/* Variables CSS pour la cohérence du design */
:root {
    /* Couleurs principales */
    --color-primary: #007AFF;
    --color-primary-dark: #0056CC;
    
    /* Couleurs secondaires */
    --color-secondary: #5856D6;
    --color-secondary-dark: #4B49B3;
    
    /* Couleurs neutres */
    --color-white: #FFFFFF;
    --color-gray-50: #F9FAFB;
    --color-gray-100: #F3F4F6;
    --color-gray-200: #E5E7EB;
    --color-gray-300: #D1D5DB;
    --color-gray-500: #6B7280;
    --color-gray-600: #4B5563;
    --color-gray-700: #374151;
    --color-gray-800: #1F2937;
    --color-gray-900: #111827;
    
    /* Typographie */
    --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    
    /* Espacement */
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-12: 3rem;
    --spacing-16: 4rem;
    
    /* Bordures et radius */
    --border-radius-lg: 0.75rem;
    
    /* Ombres */
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset et base */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    height: 100%;
}

body {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-gray-800);
    background-color: var(--color-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100%;
}

/* Main content */
.main {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-8);
}

.container {
    max-width: 600px;
    width: 100%;
    text-align: center;
    margin-bottom: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--spacing-8);
}

.logo-image {
    max-width: 300px;
    width: 100%;
    height: auto;
    margin-bottom: var(--spacing-4);
}

.title {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    color: var(--color-gray-900);
    letter-spacing: -0.02em;
    margin-bottom: var(--spacing-4);
}

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

.buttons {
    display: flex;
    gap: var(--spacing-4);
    justify-content: center;
    flex-wrap: wrap;
}

/* Boutons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-4) var(--spacing-8);
    font-family: inherit;
    font-size: var(--font-size-base);
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    border: none;
    border-radius: var(--border-radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    min-width: 160px;
}

.btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-white);
}

.btn-primary:hover {
    background: var(--color-primary-dark);
    box-shadow: var(--shadow-lg);
}

a.btn,
a.btn:visited,
a.btn:hover,
a.btn:active {
    text-decoration: none;
}

a.btn-primary,
a.btn-primary:visited,
a.btn-primary:hover,
a.btn-primary:active {
    color: var(--color-white);
    -webkit-text-fill-color: currentColor;
}

a.btn-secondary,
a.btn-secondary:visited {
    color: var(--color-gray-700);
    -webkit-text-fill-color: currentColor;
}

a.btn-secondary:hover,
a.btn-secondary:active {
    color: var(--color-gray-800);
}

a.btn-outline,
a.btn-outline:visited {
    color: var(--color-primary);
    -webkit-text-fill-color: currentColor;
}

a.btn-outline:hover,
a.btn-outline:active {
    color: var(--color-white);
}

.btn-secondary {
    background: var(--color-gray-100);
    color: var(--color-gray-700);
}

.btn-secondary:hover {
    background: var(--color-gray-200);
    color: var(--color-gray-800);
}

.btn-outline {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.btn-outline:hover {
    background: var(--color-primary);
    color: var(--color-white);
    box-shadow: var(--shadow-lg);
}

.btn-sm {
    padding: var(--spacing-3) var(--spacing-6);
    font-size: var(--font-size-sm);
    min-width: auto;
}

/* Footer */
.footer {
    margin-top: auto;
    padding: var(--spacing-6) 0;
    width: 100%;
    text-align: center;
}

.footer p {
    color: var(--color-gray-500);
    font-size: var(--font-size-sm);
}

/* Dashboard Styles */
.dashboard-header {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-200);
    position: sticky;
    top: 0;
    z-index: 100;
}

.dashboard-nav {
    padding: var(--spacing-4) 0;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.nav-left h1 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-gray-900);
    margin: 0;
}

.dashboard-main {
    flex: 1;
    padding: var(--spacing-8) 0;
    min-height: 100vh;
    background: linear-gradient(135deg, #F8FAFC 0%, #E2E8F0 100%);
}

.dashboard-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-6);
}

/* Menu Grid avec animations */
.main-menu {
    margin-bottom: var(--spacing-12);
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-6);
    margin-top: var(--spacing-8);
}

.menu-card {
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-8);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--color-gray-200);
    text-align: center;
    transition: box-shadow var(--transition-smooth), border-color var(--transition-smooth);
    cursor: default;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 280px;
}

.menu-card .btn {
    position: relative;
    z-index: 2;
}

.menu-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s ease-in-out;
    pointer-events: none;
}

.menu-card:hover {
    box-shadow: var(--shadow-xl);
    border-color: var(--color-primary);
}

.menu-card:hover::before {
    left: 100%;
}

.menu-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-4);
    transition: transform var(--transition-smooth);
    flex-shrink: 0;
}

.menu-card:hover .menu-icon {
    transform: scale(1.1) rotate(5deg);
}

.menu-card h4 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-3);
    flex-shrink: 0;
}

.menu-card p {
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-6);
    line-height: 1.5;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.menu-card .btn {
    width: 100%;
    margin-top: auto;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    cursor: pointer;
}

/* Section Profile */
.profile-section {
    background: var(--color-gray-50);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-8);
    margin-bottom: var(--spacing-8);
    animation: slideIn 0.3s ease-out;
}

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

.section-title {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-6);
}

.profile-card {
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-6);
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.profile-info {
    margin-bottom: var(--spacing-6);
}

.profile-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-3) 0;
    border-bottom: 1px solid var(--color-gray-200);
}

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

.profile-label {
    font-weight: 500;
    color: var(--color-gray-700);
}

.profile-value {
    color: var(--color-gray-900);
}

.profile-actions {
    display: flex;
    gap: var(--spacing-4);
    justify-content: flex-end;
}

/* Animations d'entrée */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.menu-card {
    animation: fadeInUp 0.6s ease-out forwards;
}

.menu-card:nth-child(1) { animation-delay: 0.1s; }
.menu-card:nth-child(2) { animation-delay: 0.2s; }
.menu-card:nth-child(3) { animation-delay: 0.3s; }
.menu-card:nth-child(4) { animation-delay: 0.4s; }

/* Styles pour la page de login - À ajouter à votre style.css existant */

/* Container principal pour la page de login */
.login-container {
    max-width: 400px;
    width: 100%;
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-8);
    margin: var(--spacing-4);
}

/* Styles pour signup */
.signup-container {
    max-width: 600px;
    width: 100%;
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-8);
    margin: var(--spacing-4);
}

/* Header de la page de login */
.signup-header {
    text-align: center;
    margin-bottom: var(--spacing-8);
}

.signup-header .logo-image {
    max-width: 200px;
    width: 100%;
    height: auto;
    margin-bottom: var(--spacing-4);
}

.login-title, .signup-title {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    color: var(--color-gray-900);
    margin: 0;
}

.signup-subtitle {
    color: var(--color-gray-600);
    margin-top: var(--spacing-3);
}

/* Formulaire de login */
.login-form, .signup-form {
    width: 100%;
}

.form-section {
    margin-bottom: var(--spacing-8);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-4);
}

.form-group {
    margin-bottom: var(--spacing-6);
    position: relative;
}

.form-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-700);
    margin-bottom: var(--spacing-3);
}

.form-input {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
    font-size: var(--font-size-base);
    font-family: inherit;
    color: var(--color-gray-900);
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--border-radius-lg);
    transition: all var(--transition-fast);
}

.form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.form-input:invalid {
    border-color: #EF4444;
}

.form-input.error {
    border-color: #EF4444;
}

.form-input.success {
    border-color: #10B981;
}

/* Wrapper pour le champ mot de passe avec toggle */
.password-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-wrapper .form-input {
    padding-right: 3rem;
}

.password-toggle {
    position: absolute;
    right: var(--spacing-3);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    color: var(--color-gray-500);
    transition: color var(--transition-fast);
}

.password-toggle:hover {
    color: var(--color-gray-700);
}

.eye-icon {
    font-size: 1.2rem;
    line-height: 1;
}

/* Messages d'erreur */
.form-error {
    color: #EF4444;
    font-size: var(--font-size-sm);
    margin-top: 0.25rem;
    min-height: 1.2rem;
}

.form-help {
    color: var(--color-gray-500);
    font-size: var(--font-size-sm);
    margin-top: 0.25rem;
}

.password-requirements {
    color: var(--color-gray-500);
    font-size: var(--font-size-sm);
    margin-top: 0.25rem;
}

.password-requirements.valid {
    color: #10B981;
}

/* Case à cocher "Se souvenir de moi" */
.remember-me {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-6);
}

.remember-me input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-primary);
}

.remember-me label {
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
    cursor: pointer;
}

.profile-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius-md);
    background: var(--color-gray-50);
    cursor: pointer;
}

.profile-checkbox-row input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.15rem;
    accent-color: var(--color-primary);
    flex-shrink: 0;
}

.profile-checkbox-row span {
    font-size: var(--font-size-sm);
    color: var(--color-gray-800);
    line-height: 1.45;
}

/* Toggle groups */
.toggle-group {
    display: flex;
    gap: var(--spacing-3);
}

.toggle-option {
    flex: 1;
    cursor: pointer;
}

.toggle-option input[type="radio"] {
    display: none;
}

.toggle-button {
    display: block;
    padding: var(--spacing-3) var(--spacing-4);
    text-align: center;
    border: 2px solid var(--color-gray-300);
    border-radius: var(--border-radius-lg);
    background: var(--color-white);
    color: var(--color-gray-700);
    transition: all var(--transition-fast);
    font-size: var(--font-size-sm);
}

.toggle-option input[type="radio"]:checked + .toggle-button {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-white);
}

.toggle-button:hover {
    border-color: var(--color-primary);
}

/* Actions du formulaire */
.form-actions {
    display: flex;
    gap: var(--spacing-4);
    justify-content: center;
    margin-top: var(--spacing-8);
}

.form-actions .btn {
    flex: 1;
    max-width: 200px;
}

/* Liens du formulaire */
.form-links {
    text-align: center;
    margin-top: var(--spacing-6);
}

.form-links p {
    margin-bottom: var(--spacing-3);
}

.form-links a {
    color: var(--color-primary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: color var(--transition-fast);
}

.form-links a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

.login-signup-cta {
    margin-bottom: var(--spacing-4);
}

.login-signup-hint {
    margin: 0 0 var(--spacing-3);
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}

.login-signup-btn {
    display: inline-flex;
    width: 100%;
    max-width: none;
    min-width: 0;
    text-decoration: none;
    box-sizing: border-box;
}

.login-submit-btn {
    display: flex;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-top: var(--spacing-4);
    box-sizing: border-box;
}

.form-links a.login-signup-btn {
    color: var(--color-white);
    text-decoration: none;
}

.form-links a.login-signup-btn:hover {
    color: var(--color-white);
    background: var(--color-primary-dark);
    text-decoration: none;
}

/* Autocomplétion */
.autocomplete-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-top: none;
    border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    display: none;
    max-height: 200px;
    overflow-y: auto;
}

.suggestion-item {
    padding: var(--spacing-3) var(--spacing-4);
    cursor: pointer;
    border-bottom: 1px solid var(--color-gray-200);
    transition: background-color var(--transition-fast);
}

.suggestion-item:hover {
    background: var(--color-gray-50);
}

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

.suggestion-name {
    font-weight: 500;
    color: var(--color-gray-900);
    font-size: var(--font-size-sm);
}

.suggestion-email {
    color: var(--color-gray-600);
    font-size: 0.75rem;
    margin-top: 2px;
}

/* Messages de succès */
.success-message {
    text-align: center;
    padding: var(--spacing-8);
}

.success-icon {
    font-size: 4rem;
    margin-bottom: var(--spacing-4);
}

.error-message {
    text-align: center;
    padding: var(--spacing-8);
}

.error-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-4);
}

.email-address {
    background: var(--color-gray-50);
    padding: var(--spacing-3);
    border-radius: var(--border-radius-lg);
    font-weight: 600;
    color: var(--color-primary);
    margin: var(--spacing-4) 0;
    word-break: break-all;
}

.info-box, .help-box {
    background: var(--color-gray-50);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-4);
    margin: var(--spacing-6) 0;
    text-align: left;
}

.info-box h3, .help-box h4 {
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-3);
    font-size: var(--font-size-lg);
}

.info-box ol, .help-box ul {
    margin-left: var(--spacing-4);
    color: var(--color-gray-700);
    line-height: 1.6;
}

.info-box li, .help-box li {
    margin-bottom: var(--spacing-2);
}

.help-box {
    border-left: 4px solid var(--color-primary);
}

.optional {
    color: var(--color-gray-500);
    font-weight: normal;
}

/* =====================================
   NOUVEAUX STYLES SLIDERS - AJOUT SEULEMENT
   ===================================== */

/* Styles spécifiques pour les sliders - NE TOUCHE PAS aux toggle-group existants */
.slider-toggle {
    display: flex;
    position: relative;
    background: var(--color-gray-200);
    border-radius: 50px;
    padding: 4px;
    height: 44px;
    align-items: center;
    overflow: hidden;
}

.slider-toggle .toggle-option {
    flex: 1;
    cursor: pointer;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    transition: all var(--transition-smooth);
}

.slider-toggle .toggle-option input[type="radio"] {
    display: none;
}

.slider-toggle .toggle-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--spacing-4);
    text-align: center;
    background: transparent;
    color: var(--color-gray-600);
    transition: all var(--transition-smooth);
    font-size: var(--font-size-sm);
    font-weight: 500;
    height: 100%;
    width: 100%;
    border-radius: 50px;
    position: relative;
    z-index: 3;
    border: none;
}

/* Slider animé */
.toggle-slider {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px);
    height: calc(100% - 8px);
    background: var(--color-primary);
    border-radius: 50px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    box-shadow: 
        0 2px 8px rgba(0, 122, 255, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* État actif - texte illuminé */
.slider-toggle .toggle-option input[type="radio"]:checked + .toggle-button {
    color: var(--color-white);
    font-weight: 600;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* Effet hover */
.slider-toggle .toggle-option:hover .toggle-button {
    color: var(--color-gray-800);
    transform: scale(1.02);
}

.slider-toggle .toggle-option input[type="radio"]:checked + .toggle-button:hover {
    color: var(--color-white);
    transform: scale(1);
}

/* Effet hover sur le groupe */
.slider-toggle:hover .toggle-slider {
    transform: translateX(var(--slider-position, 0%)) scale(1.02);
    filter: brightness(1.1);
}

/* Animation d'illumination */
@keyframes illuminate {
    0% {
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
    }
    50% {
        text-shadow: 0 0 20px rgba(255, 255, 255, 0.9);
    }
    100% {
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    }
}

/* États focus pour l'accessibilité */
.slider-toggle .toggle-option input[type="radio"]:focus + .toggle-button {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 50px;
}

/* Animation d'entrée */
.slider-toggle {
    animation: slideInToggle 0.6s ease-out;
}

@keyframes slideInToggle {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Effet de brillance qui traverse le slider */
.toggle-slider::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    transition: left 0.6s ease-in-out;
    border-radius: 50px;
    pointer-events: none;
}

.slider-toggle:hover .toggle-slider::after {
    left: 100%;
}

/* Styles supplémentaires pour le dashboard coach */

/* Header coach */
.coach-name {
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--color-gray-700);
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-gray-100);
    border-radius: var(--border-radius-lg);
}

/* Section statistiques */
.stats-section {
    margin-bottom: var(--spacing-12);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-8);
}

.stats-overview {
    margin-bottom: 3rem;
}

.stat-card {
    background: linear-gradient(135deg, var(--color-white) 0%, var(--color-gray-50) 100%);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-6);
    text-align: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--color-gray-200);
    transition: all var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 122, 255, 0.05), transparent);
    transition: left 0.6s ease;
    pointer-events: none;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.stat-card:hover::before {
    left: 100%;
}

.stat-icon {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-3);
    transition: transform var(--transition-smooth);
}

.stat-card:hover .stat-icon {
    transform: scale(1.1);
}

.stat-number {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--spacing-2);
    line-height: 1;
    min-width: 40px;
    display: inline-block;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.stat-label {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    font-weight: 500;
}

.stat-card-engagement .stat-label {
    font-weight: 700;
    color: var(--color-gray-800);
    margin-top: var(--spacing-1);
}

.stat-context {
    margin-top: var(--spacing-1);
    font-size: var(--font-size-xs);
    color: var(--color-gray-600);
    font-weight: 600;
    line-height: 1.3;
}

.stat-motivation {
    margin-top: var(--spacing-2);
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    font-weight: 500;
    line-height: 1.35;
    min-height: 2.7em;
}

.stats-grid-engagement {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.stat-card-engagement.tone-excellent {
    border-color: #10B981;
}

.stat-card-engagement.tone-excellent .stat-number {
    color: #10B981;
}

.stat-card-engagement.tone-good {
    border-color: var(--color-primary);
}

.stat-card-engagement.tone-good .stat-number {
    color: var(--color-primary);
}

.stat-card-engagement.tone-warn {
    border-color: #F59E0B;
}

.stat-card-engagement.tone-warn .stat-number {
    color: #F59E0B;
}

.stat-card-engagement.tone-urgent {
    border-color: #EF4444;
}

.stat-card-engagement.tone-urgent .stat-number {
    color: #EF4444;
}

.stat-card-engagement.tone-start {
    border-color: #6B7280;
}

.stat-card-engagement.tone-start .stat-number {
    color: #6B7280;
}

.stat-card.info {
    border-color: #3B82F6;
}

.stat-card.info .stat-icon,
.stat-card.info .stat-number {
    color: #3B82F6;
}

.stat-card-weekly-perfs {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    min-height: 100%;
}

.stat-weekly-header {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    width: 100%;
    margin-bottom: var(--spacing-4);
}

.stat-weekly-header .stat-icon {
    flex-shrink: 0;
    font-size: 1.75rem;
    line-height: 1;
}

.stat-weekly-heading {
    flex: 1;
    min-width: 0;
}

.stat-weekly-header .stat-number {
    flex-shrink: 0;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    line-height: 1;
}

.stat-weekly-list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    max-height: 220px;
    overflow-y: auto;
}

.stat-weekly-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
    padding: var(--spacing-2) 0;
    border-top: 1px solid var(--color-gray-100);
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
}

.stat-weekly-list li:first-child {
    border-top: none;
    padding-top: 0;
}

.stat-weekly-item-title {
    font-weight: 600;
    color: var(--color-gray-900);
    line-height: 1.35;
}

.stat-weekly-item-date {
    flex-shrink: 0;
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    white-space: nowrap;
}

.stat-weekly-empty {
    justify-content: center !important;
    color: var(--color-gray-500) !important;
    font-style: italic;
    border-top: none !important;
}

.stats-grid-engagement .stat-card-weekly-perfs {
    grid-column: 1 / -1;
}

@media (min-width: 900px) {
    .stats-grid-engagement {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }

    .stats-grid-engagement .stat-card-weekly-perfs {
        grid-column: auto;
    }
}

/* Cards coach améliorées */
.coach-card {
    background: linear-gradient(135deg, var(--color-white) 0%, var(--color-gray-50) 100%);
    border-left: 4px solid var(--color-primary);
}

.coach-card:hover {
    border-left-color: var(--color-secondary);
    box-shadow: var(--shadow-xl);
}

/* Section header avec bouton */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-6);
    padding-bottom: var(--spacing-4);
    border-bottom: 2px solid var(--color-gray-200);
}

/* Section joueurs */
.players-section {
    background: var(--color-gray-50);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-8);
    margin-bottom: var(--spacing-8);
}

.players-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--spacing-6);
}

.player-card {
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-6);
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--color-gray-200);
    transition: all var(--transition-smooth);
    position: relative;
}

.player-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.player-header {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-4);
}

.player-avatar {
    width: 3rem;
    height: 3rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-right: var(--spacing-4);
}

.player-info h4 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-gray-900);
    margin: 0;
}

.player-email {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin: 0;
}

.player-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
    padding: var(--spacing-3);
    background: var(--color-gray-50);
    border-radius: var(--border-radius-lg);
}

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

.player-stat .stat-label {
    font-size: 0.75rem;
    color: var(--color-gray-500);
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.05em;
}

.player-stat .stat-value {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-gray-900);
    display: block;
    margin-top: 0.25rem;
}

.player-actions {
    display: flex;
    gap: var(--spacing-3);
    justify-content: center;
}

/* États vides et erreurs */
.no-players, .error-players, .loading-players {
    text-align: center;
    padding: var(--spacing-12) var(--spacing-6);
    color: var(--color-gray-600);
}

.no-players-icon, .error-icon {
    font-size: 4rem;
    margin-bottom: var(--spacing-4);
    opacity: 0.7;
}

.no-players h4, .error-players h4 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-gray-800);
    margin-bottom: var(--spacing-3);
}

.no-players p, .error-players p {
    color: var(--color-gray-600);
    line-height: 1.6;
    margin-bottom: var(--spacing-2);
}

.no-players small {
    color: var(--color-gray-500);
}

.loading-players {
    animation: pulse 2s infinite;
}

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

/* Animation d'apparition des cartes */
.player-card {
    animation: slideInUp 0.6s ease-out forwards;
    opacity: 0;
    transform: translateY(30px);
}

.player-card:nth-child(1) { animation-delay: 0.1s; }
.player-card:nth-child(2) { animation-delay: 0.2s; }
.player-card:nth-child(3) { animation-delay: 0.3s; }
.player-card:nth-child(4) { animation-delay: 0.4s; }
.player-card:nth-child(5) { animation-delay: 0.5s; }
.player-card:nth-child(6) { animation-delay: 0.6s; }

@keyframes slideInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation des statistiques */
.stat-card:hover .stat-number {
    color: var(--color-secondary);
    transform: scale(1.1);
}

/* Effets de brillance pour les cartes importantes */
.stat-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 20px 20px 0;
    border-color: transparent rgba(0, 122, 255, 0.1) transparent transparent;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.stat-card:hover::after {
    opacity: 1;
}

/* =====================================
   INDICATEUR DE CHARGEMENT
   ===================================== */

#dashboardContent {
    display: none;
}

/* Le spinner de chargement ne doit jamais intercepter les clics */
#loadingIndicator {
    pointer-events: none;
}

#profileSection {
    display: none;
}

.loading-indicator {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    padding: var(--spacing-8);
    border-radius: var(--border-radius-lg);
    text-align: center;
    box-shadow: var(--shadow-xl);
    backdrop-filter: blur(10px);
}

.loading-icon {
    font-size: 2rem;
    margin-bottom: var(--spacing-3);
    animation: pulse 2s infinite;
}

/* =====================================
   CARTES SPÉCIALISÉES DASHBOARD
   ===================================== */

.performance-card {
    position: relative;
    background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
    border: 2px solid #16A34A;
}

.performance-card .menu-icon {
    background: linear-gradient(135deg, #16A34A 0%, #15803D 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.performance-card h4 {
    color: #15803D;
}

.performance-stats {
    margin: var(--spacing-4) 0;
    font-size: var(--font-size-sm);
    text-align: center;
}

.performance-count {
    background: var(--color-primary);
    color: var(--color-white);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-weight: 500;
    margin-right: 0.5rem;
    display: inline-block;
}

.performance-categories {
    color: var(--color-gray-600);
    font-style: italic;
}

.library-card {
    background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
    border: 2px solid #0EA5E9;
}

.library-card .menu-icon {
    background: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.library-card h4 {
    color: #0369A1;
}

.library-card:hover {
    box-shadow: var(--shadow-xl);
    border-color: #0284C7;
}

/* =====================================
   STYLES POUR LA PAGE BIBLIOTHÈQUES
   ===================================== */

.page-header {
    text-align: center;
    margin-bottom: var(--spacing-12);
}

.back-btn {
    margin-bottom: var(--spacing-8);
}

.page-title {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-4);
}

.page-description {
    color: var(--color-gray-600);
    font-size: var(--font-size-lg);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.card-stats {
    margin: var(--spacing-4) 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.stat-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--color-gray-100);
    color: var(--color-gray-700);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.stat-badge:hover {
    transform: scale(1.05);
}

.stat-badge.putting {
    background: #E0F2FE;
    color: #0369A1;
}

.stat-badge.chipping {
    background: #F0FDF4;
    color: #15803D;
}

.stat-badge.driving {
    background: #FEF3C7;
    color: #D97706;
}

/* =====================================
   SECTION INFORMATION
   ===================================== */

.info-section {
    margin-top: var(--spacing-16);
}

.info-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-6);
    background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-8);
    border-left: 4px solid var(--color-primary);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: all var(--transition-smooth);
}

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

.info-icon {
    font-size: 3rem;
    flex-shrink: 0;
    animation: bounce 2s infinite;
}

.info-content h3 {
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-3);
    font-size: var(--font-size-xl);
    font-weight: 600;
}

.info-content p {
    color: var(--color-gray-600);
    line-height: 1.6;
    margin: 0;
}

/* =====================================
   BOUTONS SPÉCIAUX
   ===================================== */

.logout-btn {
    margin-bottom: var(--spacing-4);
}

.footer .btn.logout-btn,
.btn.logout-btn {
    background: linear-gradient(135deg, #EF4444, #DC2626);
    border: 2px solid #DC2626;
    color: #fff;
}

.footer .btn.logout-btn:hover,
.btn.logout-btn:hover {
    background: linear-gradient(135deg, #DC2626, #B91C1C);
    border-color: #B91C1C;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35);
}

.footer .btn.logout-btn:active,
.btn.logout-btn:active {
    transform: translateY(0);
}

.footer .btn.logout-btn,
.btn.logout-btn {
    background: linear-gradient(135deg, #EF4444, #DC2626);
    border: 2px solid #DC2626;
    color: #fff;
}

.footer .btn.logout-btn:hover,
.btn.logout-btn:hover {
    background: linear-gradient(135deg, #DC2626, #B91C1C);
    border-color: #B91C1C;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35);
}

.footer .btn.logout-btn:active,
.btn.logout-btn:active {
    transform: translateY(0);
}

.btn-success {
    background: #10B981;
    color: white;
    border: 2px solid #10B981;
}

.btn-success:hover {
    background: #059669;
    border-color: #059669;
}

.btn-success:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.btn-info {
    background: #06B6D4;
    color: white;
    border: 2px solid #06B6D4;
}

.btn-info:hover {
    background: #0891B2;
    border-color: #0891B2;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(6,182,212,0.3);
}

/* Effet loading sur les boutons */
.btn.loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.btn.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: btn-spin 1s linear infinite;
}

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

/* =====================================
   ANIMATIONS ADDITIONNELLES
   ===================================== */

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* Effet de brillance pour les cartes spéciales */
.library-card::after,
.performance-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.6s ease-in-out;
    pointer-events: none;
}

.library-card:hover::after,
.performance-card:hover::after {
    left: 100%;
}

/* =====================================
   STYLES SPÉCIFIQUES POUR LIST_PERFORMANCE.HTML
   ===================================== */

/* Header avec navigation */
.header-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    position: relative;
    z-index: 2;
}

/* Filtres par catégorie */
.category-filters-section {
    margin-bottom: 2rem;
}

.category-filters {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.category-filter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: 2px solid var(--color-gray-300);
    background: white;
    color: var(--color-gray-700);
    border-radius: 25px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.category-filter:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,122,255,0.15);
}

.category-filter.active {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
    box-shadow: 0 4px 15px rgba(0,122,255,0.3);
}

.filter-icon {
    font-size: 1rem;
}

.filter-label {
    font-weight: 500;
}

.filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.35rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    background: var(--color-gray-100);
    color: var(--color-gray-700);
}

.category-filter.active .filter-count {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.category-filter:hover .filter-count {
    background: rgba(0, 122, 255, 0.12);
    color: var(--color-primary);
}

.category-filter.active:hover .filter-count {
    background: rgba(255, 255, 255, 0.28);
    color: #fff;
}

/* Liste performances joueur — filtres collés à la grille */
.joueur-list-performances-page .category-filters-section,
.mes-performances-page .category-filters-section,
.mes-exercices-page .category-filters-section {
    margin-bottom: 0.5rem;
}

.joueur-list-performances-page .category-filters-section .section-title,
.mes-performances-page .category-filters-section .section-title,
.mes-exercices-page .category-filters-section .section-title {
    margin-bottom: 0.75rem;
}

.joueur-list-performances-page .category-filters,
.mes-performances-page .category-filters,
.mes-exercices-page .category-filters {
    margin-bottom: 0.75rem;
}

.joueur-list-performances-page .performances-section,
.mes-performances-page .performances-section,
.mes-exercices-page .performances-section {
    margin-top: 0;
    margin-bottom: 2rem;
}

.mes-performances-page .performance-actions,
.mes-exercices-page .performance-actions {
    align-items: stretch;
}

.mes-performances-page .performance-actions .btn,
.mes-exercices-page .performance-actions .btn {
    justify-content: center;
    text-align: center;
}

.coach-list-exercices-page .performance-actions,
.coach-list-performances-page .performance-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
}

.coach-list-exercices-page .performance-actions .btn,
.coach-list-performances-page .performance-actions .btn {
    width: 100%;
    min-width: 0;
    white-space: normal;
    justify-content: center;
    text-align: center;
    line-height: 1.35;
}

/* Exercices et performances */
.exercices-section {
    margin-bottom: 3rem;
}

.exercices-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.performances-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
}

.performances-section {
    margin-bottom: 3rem;
}

.performance-card {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    border: 1px solid var(--color-gray-200);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 300px;
}

.performance-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
    border-color: var(--color-primary);
}

/* Header des cartes de performance */
.performance-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    position: relative;
    z-index: 2;
}

.performance-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    flex-shrink: 0;
}

.performance-badges {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: flex-end;
    justify-content: flex-end;
    max-width: 60%;
}

.performance-category, .performance-difficulty {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Couleurs par catégorie */
.performance-icon.putting, .performance-category.putting {
    background: linear-gradient(135deg, #10B981, #059669);
}

.performance-icon.chipping, .performance-category.chipping {
    background: linear-gradient(135deg, #F59E0B, #D97706);
}

.performance-icon.driving, .performance-category.driving {
    background: linear-gradient(135deg, #EF4444, #DC2626);
}

.performance-icon.approach, .performance-category.approach {
    background: linear-gradient(135deg, #3B82F6, #2563EB);
}

.performance-icon.bunker, .performance-category.bunker {
    background: linear-gradient(135deg, #F97316, #EA580C);
}

.performance-icon.physical, .performance-category.physical {
    background: linear-gradient(135deg, #8B5CF6, #7C3AED);
}

/* Couleurs par difficulté */
.performance-difficulty.beginner {
    background: linear-gradient(135deg, #10B981, #059669);
}

.performance-difficulty.intermediate {
    background: linear-gradient(135deg, #F59E0B, #D97706);
}

.performance-difficulty.advanced {
    background: linear-gradient(135deg, #EF4444, #DC2626);
}

.performance-difficulty.expert {
    background: linear-gradient(135deg, #8B5CF6, #7C3AED);
}

/* Contenu des cartes de performance */
.performance-content {
    flex-grow: 1;
    margin-bottom: 1.5rem;
}

.performance-content h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.performance-description {
    color: var(--color-gray-600);
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.performance-author,
.test-author,
.recentrage-author {
    font-size: 0.85rem;
    color: var(--color-gray-500);
    margin: 0.25rem 0 0.35rem;
}

.performance-author {
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.performance-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-gray-600);
}

.detail-icon {
    font-size: 1rem;
}

.detail-text {
    font-weight: 500;
}

/* Actions des cartes de performance */
.performance-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: auto;
    position: relative;
    z-index: 2;
}

.performance-actions .btn {
    flex: 1;
    font-size: 0.875rem;
    padding: 0.625rem 1rem;
}

.performance-actions .btn.btn-report-unavailable,
.performance-actions .btn.btn-report-unavailable:disabled {
    background: var(--color-gray-200);
    color: var(--color-gray-500);
    border: 2px solid var(--color-gray-300);
    opacity: 1;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.performance-actions .btn.btn-report-unavailable:hover,
.performance-actions .btn.btn-report-unavailable:active {
    background: var(--color-gray-200);
    color: var(--color-gray-500);
    border-color: var(--color-gray-300);
    transform: none;
    box-shadow: none;
}

/* États de chargement et erreur pour les performances */
.no-performances, .loading-performances, .error-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--color-gray-600);
}

.no-data-icon, .error-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.loading-performances div {
    font-size: 3rem;
    margin-bottom: 1rem;
    animation: pulse 2s infinite;
}

.error-state h3 {
    color: var(--color-gray-800);
    margin-bottom: 1rem;
}

.error-state p {
    color: var(--color-gray-600);
    margin-bottom: 1.5rem;
}

/* Animation des cartes de performance */
.performance-card {
    animation: fadeInUp 0.6s ease-out forwards;
}

.performance-card:nth-child(1) { animation-delay: 0.1s; }
.performance-card:nth-child(2) { animation-delay: 0.2s; }
.performance-card:nth-child(3) { animation-delay: 0.3s; }
.performance-card:nth-child(4) { animation-delay: 0.4s; }
.performance-card:nth-child(5) { animation-delay: 0.5s; }
.performance-card:nth-child(6) { animation-delay: 0.6s; }

/* Couleurs pour les cartes de statistiques */
.stat-card.primary {
    border-color: var(--color-primary);
}

.stat-card.primary .stat-icon {
    color: var(--color-primary);
}

.stat-card.success {
    border-color: #10B981;
}

.stat-card.success .stat-icon {
    color: #10B981;
}

.stat-card.success .stat-number {
    color: #10B981;
}
/* Assurer la cohérence entre .stat-value et .stat-number pour toutes les variantes */
.stat-card.primary .stat-value {
    color: var(--color-primary);
}

.stat-card.success .stat-value {
    color: #10B981;
}

.stat-card.warning .stat-value {
    color: #F59E0B;
}

.stat-card.danger .stat-value {
    color: #EF4444;
}

.stat-card.secondary .stat-value {
    color: #6B7280;
}

/* Styles des icônes pour les variantes de couleur */
.stat-card.primary .stat-icon {
    color: var(--color-primary);
}

.stat-card.warning .stat-icon {
    color: #F59E0B;
}

.stat-card.danger .stat-icon {
    color: #EF4444;
}

.stat-card.secondary .stat-icon {
    color: #6B7280;
}

/* Assurer que la grille de mes_performances a 3 colonnes */
.stats-section .stats-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem;
}

/* Responsive pour la grille de 3 statistiques */
@media (max-width: 768px) {
    .stats-section .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem;
    }
}

@media (max-width: 480px) {
    .stats-section .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }
}
/* =====================================
   STYLES SPÉCIFIQUES AJOUTÉS DE LIST_PERFORMANCE.HTML
   ===================================== */

/* Indicateur visuel pour les compteurs en animation */
.stat-number[data-animating="true"] {
    color: #3B82F6;
    font-weight: bold;
}

/* Indicateur d'erreur pour les compteurs */
.stat-number[data-error="true"] {
    color: #EF4444;
    background: rgba(239, 68, 68, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Amélioration de l'affichage des titres d'exercices */
.exercice-title {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin-bottom: 0.75rem !important;
}

/* Ajustement de la grille stats suite à la suppression d'une colonne */
.stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2rem;
}

/* =====================================
   RESPONSIVE DESIGN
   ===================================== */

@media (max-width: 768px) {
    .main {
        padding: var(--spacing-6) var(--spacing-4);
    }
    
    .logo-image {
        max-width: 250px;
    }
    
    .title {
        font-size: var(--font-size-3xl);
    }
    
    .description {
        font-size: var(--font-size-lg);
    }
    
    .buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .btn {
        width: 100%;
        max-width: 300px;
    }

    .login-form .login-submit-btn,
    .login-form .login-signup-btn {
        display: flex;
        width: 100%;
        max-width: none;
        min-width: 0;
        margin-left: auto;
        margin-right: auto;
    }

    .recentrage-body .btn,
    .recentrage-sticky-footer .btn {
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    .mes-performances-page .header-nav .btn,
    .mes-performances-page .performance-actions .btn,
    .joueur-list-performances-page .header-nav .btn,
    .joueur-list-performances-page .performance-actions .btn {
        width: 100%;
        max-width: none;
        min-width: 0;
    }
    
    .login-container, .signup-container {
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .signup-header .logo-image {
        max-width: 150px;
    }
    
    .login-title, .signup-title {
        font-size: var(--font-size-xl);
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .form-actions .btn {
        max-width: none;
    }
    
    .menu-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
    }

    .menu-card .btn {
        width: 100%;
        max-width: none;
        min-width: 0;
        align-self: stretch;
    }
    
    .dashboard-container {
        padding: 0 var(--spacing-4);
    }
    
    .welcome-title {
        font-size: var(--font-size-2xl);
    }
    
    .nav-container {
        padding: 0 var(--spacing-4);
    }
    
    .page-header {
        margin-bottom: var(--spacing-8);
    }
    
    .page-title {
        font-size: var(--font-size-3xl);
    }
    
    .page-description {
        font-size: var(--font-size-base);
        padding: 0 var(--spacing-4);
    }
    
    .info-card {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-4);
    }
    
    .info-icon {
        font-size: 2.5rem;
    }
    
    .card-stats {
        justify-content: center;
        gap: 0.25rem;
    }
    
    .performance-stats {
        text-align: center;
    }
    
    .performance-count {
        margin-right: 0;
        margin-bottom: 0.5rem;
        display: block;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-4);
    }
    
    .players-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
    }
    
    .player-stats {
        grid-template-columns: 1fr;
        gap: var(--spacing-2);
    }
    
    .player-actions {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .section-header {
        flex-direction: column;
        gap: var(--spacing-4);
        align-items: stretch;
    }
    
    .coach-name {
        font-size: var(--font-size-sm);
        padding: var(--spacing-2) var(--spacing-3);
    }
    
    .header-nav {
        flex-direction: column;
        gap: 1rem;
    }

    .stats-summary {
        flex-direction: column;
        gap: 1rem;
    }

    .category-filters {
        gap: 0.25rem;
    }

    .category-filter {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }

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

    .performance-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .performance-actions .btn {
        width: 100%;
        min-width: 0;
    }

    .mes-performances-page .header-nav .btn,
    .joueur-list-performances-page .header-nav .btn {
        width: 100%;
        min-width: 0;
    }

    .mes-performances-page .category-filters,
    .joueur-list-performances-page .category-filters {
        justify-content: center;
    }

    .performance-header {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .performance-badges {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }
    
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .title {
        font-size: var(--font-size-2xl);
    }
    
    .description {
        font-size: var(--font-size-base);
    }
    
    .btn {
        padding: var(--spacing-3) var(--spacing-6);
        font-size: var(--font-size-sm);
    }
    
    .login-container, .signup-container {
        padding: var(--spacing-6);
    }
    
    .form-input {
        padding: 0.75rem var(--spacing-3);
    }
    
    .menu-card {
        padding: var(--spacing-6);
    }
    
    .welcome-title {
        font-size: var(--font-size-xl);
    }
    
    .loading-indicator {
        padding: var(--spacing-6);
        margin: var(--spacing-4);
        width: calc(100% - var(--spacing-8));
        max-width: 300px;
    }
    
    .page-title {
        font-size: var(--font-size-2xl);
    }
    
    .info-card {
        padding: var(--spacing-6);
    }
    
    .card-stats {
        flex-direction: column;
        align-items: center;
    }
    
    .stat-badge {
        padding: 0.5rem 1rem;
        font-size: var(--font-size-sm);
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .stat-card {
        padding: var(--spacing-4);
    }
    
    .stat-number {
        font-size: var(--font-size-2xl);
    }
    
    .player-card {
        padding: var(--spacing-4);
    }
    
    .player-header {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-3);
    }
    
    .player-avatar {
        margin: 0;
    }
    
    .slider-toggle {
        height: 40px;
    }
    
    .slider-toggle .toggle-button {
        font-size: 0.8rem;
        padding: 0 var(--spacing-3);
    }
    
    .toggle-slider {
        top: 3px;
        left: 3px;
        width: calc(50% - 3px);
        height: calc(100% - 6px);
    }

    .performance-card {
        padding: 1rem;
    }

    .performance-actions {
        gap: 0.5rem;
    }

    .category-filter {
        padding: 0.25rem 0.5rem;
        font-size: 0.7rem;
    }
}
/* ========================================
   SECTION WELCOME ÉLÉGANTE
   ======================================== */

/* Section de bienvenue plus élégante et compacte */
.welcome-section {
    text-align: center;
    margin-bottom: var(--spacing-8);
    position: relative;
    background: linear-gradient(135deg, #F8FAFC 0%, #E2E8F0 100%);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-8) var(--spacing-6);
    box-shadow: 0 8px 25px -8px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
    animation: slideInLeft 0.8s ease-out;
}

/* Effet de brillance en arrière-plan */
.welcome-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        circle at 20% 30%,
        rgba(0, 122, 255, 0.03) 0%,
        transparent 50%
    );
    pointer-events: none;
    animation: float 20s infinite ease-in-out;
}

.welcome-section::after {
    content: '';
    position: absolute;
    top: -30%;
    right: -30%;
    width: 150%;
    height: 150%;
    background: radial-gradient(
        circle at 80% 70%,
        rgba(88, 86, 214, 0.02) 0%,
        transparent 60%
    );
    pointer-events: none;
    animation: float 25s infinite ease-in-out reverse;
}

/* Container pour le contenu de bienvenue */
.welcome-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    margin: 0 auto;
}

.welcome-section-with-profile .welcome-section-with-profile .welcome-header-row {
    margin-bottom: 0;
    justify-content: center;
    gap: var(--spacing-4);
}

.welcome-header-row {
    margin-bottom: 0;
    justify-content: center;
    gap: var(--spacing-4);
}

.welcome-header-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-3);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-4);
}

.welcome-header-row .welcome-title {
    margin-bottom: 0;
}

.welcome-header-row .welcome-title::after {
    display: none;
}

.dashboard-profile-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: var(--color-white);
    border: 2px solid var(--color-primary);
    box-shadow: 0 2px 10px rgba(0, 122, 255, 0.12);
    text-decoration: none;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
    flex-shrink: 0;
}

.dashboard-profile-link:hover {
    transform: scale(1.06);
    background: #EFF6FF;
    box-shadow: 0 4px 14px rgba(0, 122, 255, 0.22);
}

.dashboard-profile-link .profile-link-icon {
    font-size: 1.35rem;
    line-height: 1;
}

.exercice-content-body {
    background: #f8fafc;
}

.exercice-content .info-box h3 {
    margin-top: var(--spacing-4);
    margin-bottom: var(--spacing-2);
}

.exercice-content .info-box h3:first-child {
    margin-top: 0;
}

.exercice-content .info-box ul,
.exercice-content .info-box ol {
    margin: 0;
    padding-left: 1.25rem;
}

.exercice-spot-list li + li,
.exercice-putt-sequence li + li {
    margin-top: var(--spacing-3);
}

.exercice-cross-hint {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin-top: var(--spacing-2);
}

.exercice-score-summary {
    margin: var(--spacing-4) 0;
    padding: var(--spacing-4);
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--color-primary);
}

.exercice-score-summary p {
    margin: 0 0 var(--spacing-2);
}

.exercice-score-summary p:last-child {
    margin-bottom: 0;
}

.exercice-meta-line {
    margin: 0 0 var(--spacing-4);
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
}

.exercice-objective-callout {
    margin: var(--spacing-6) 0;
    padding: var(--spacing-5) var(--spacing-5);
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border-radius: var(--radius-md);
    border: 2px solid #F59E0B;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.15);
}

.exercice-objective-callout h3 {
    margin: 0 0 var(--spacing-3);
    color: #92400E;
    font-size: var(--font-size-lg);
}

.exercice-objective-callout p {
    margin: 0 0 var(--spacing-3);
    color: #78350F;
    line-height: 1.55;
}

.exercice-objective-callout p:last-child {
    margin-bottom: 0;
}

.exercice-objective-example {
    margin-top: var(--spacing-3) !important;
    padding: var(--spacing-3);
    background: rgba(255, 255, 255, 0.65);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
}

.exercice-objective-callout.superspeed-perf-callout {
    background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
    border-color: #3B82F6;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.15);
}

.exercice-objective-callout.superspeed-perf-callout h3 {
    color: #1E40AF;
}

.exercice-objective-callout.superspeed-perf-callout p {
    color: #1E3A8A;
}

.exercice-score-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--spacing-3) 0 var(--spacing-2);
    font-size: var(--font-size-sm);
}

.exercice-score-table th,
.exercice-score-table td {
    border: 1px solid var(--color-gray-200);
    padding: var(--spacing-2) var(--spacing-3);
    text-align: center;
}

.exercice-score-table th {
    background: var(--color-gray-50);
    font-weight: 600;
    color: var(--color-gray-800);
}

.exercice-score-table td:first-child {
    font-weight: 600;
    background: var(--color-gray-50);
}

.exercice-video-wrap {
    position: relative;
    width: 100%;
    max-width: 360px;
    margin: var(--spacing-4) auto;
    aspect-ratio: 9 / 16;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    background: #000;
}

.exercice-video-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.exercice-video-link {
    text-align: center;
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-4);
}

.exercice-video-link a {
    color: var(--color-primary);
    font-weight: 600;
}

.eat-drill-diagram {
    font-family: ui-monospace, 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.95rem;
    line-height: 1.35;
    text-align: center;
    margin: 0.75rem 0 0;
    color: #334155;
    white-space: pre;
}

.speed101010-diagram {
    font-family: ui-monospace, 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0.75rem 0 0;
    color: #334155;
    white-space: pre;
    overflow-x: auto;
}

.speed101010-balls-track {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.75rem 0 1rem;
    justify-content: center;
}

.speed101010-ball-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: 2px solid #CBD5E1;
    background: #F8FAFC;
    color: #64748B;
    font-size: 0.8rem;
    font-weight: 700;
}

.speed101010-ball-slot.is-current {
    border-color: #2563EB;
    background: #EFF6FF;
    color: #1D4ED8;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.speed101010-ball-slot.is-success {
    border-color: #16A34A;
    background: #DCFCE7;
    color: #15803D;
}

.speed101010-ball-slot.is-fail {
    border-color: #DC2626;
    background: #FEE2E2;
    color: #B91C1C;
}

.speed101010-touch-stack .breakputt-touch-btn.zone-stick {
    border-color: #F59E0B;
}

.speed101010-detail-row {
    padding: 0.45rem 0.65rem;
    border-radius: 0.5rem;
    margin-bottom: 0.35rem;
    background: #F8FAFC;
    font-size: 0.92rem;
}

.speed101010-detail-row.ball-success {
    border-left: 3px solid #16A34A;
}

.speed101010-detail-row.ball-fail {
    border-left: 3px solid #DC2626;
}

.chip90-toast.toast-success {
    border-color: #16A34A;
}

.chip90-toast.toast-fail {
    border-color: #DC2626;
}

.exercice-completion-stats {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: var(--spacing-3);
    padding: var(--spacing-3);
    background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
}

.exercice-times-done {
    font-weight: 600;
    color: var(--color-gray-800);
}

.exercice-last-done {
    color: var(--color-gray-600);
}

.performance-actions .btn-mark-done {
    margin-bottom: 0;
}

.exercice-card-actions {
    flex-direction: column;
    position: relative;
    z-index: 2;
}

.exercice-card-actions .btn {
    width: 100%;
    flex: none;
}

.exercice-done-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid var(--color-gray-200);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    padding: var(--spacing-3) var(--spacing-4);
}

.exercice-done-bar-inner {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.exercice-done-bar-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
}

.exercice-done-bar-times {
    font-weight: 600;
}

.exercice-done-bar-btn {
    width: 100%;
}

body.has-exercice-done-bar .exercice-content {
    padding-bottom: 7rem;
}

.exercice-notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10001;
    pointer-events: none;
}

.exercice-notification {
    color: #fff;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
    margin-bottom: 0.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    font-weight: 600;
    font-size: var(--font-size-sm);
    max-width: min(320px, calc(100vw - 2rem));
    animation: slideInRight 0.3s ease-out;
}

.exercice-notification-success {
    background: linear-gradient(135deg, #10B981, #059669);
}

.exercice-notification-error {
    background: linear-gradient(135deg, #EF4444, #DC2626);
}

.exercice-notification-info {
    background: linear-gradient(135deg, #3B82F6, #2563EB);
}

.exercice-notification-hide {
    animation: slideOutRight 0.3s ease-in forwards;
}

@media (min-width: 640px) {
    .exercice-done-bar-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .exercice-done-bar-btn {
        width: auto;
        min-width: 220px;
        flex-shrink: 0;
    }
}

/* Titre de bienvenue amélioré et compact */
.welcome-title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-4);
    line-height: 1.2;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, var(--color-gray-900) 0%, var(--color-gray-700) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
}

.welcome-title::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    border-radius: 2px;
}

/* Texte de bienvenue amélioré et compact */
.welcome-text {
    font-size: var(--font-size-lg);
    color: var(--color-gray-600);
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.5;
    font-weight: 400;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Animation flottante */
@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    25% {
        transform: translateY(-10px) rotate(1deg);
    }
    50% {
        transform: translateY(-20px) rotate(0deg);
    }
    75% {
        transform: translateY(-10px) rotate(-1deg);
    }
}

/* =====================================
   ANIMATIONS POUR SUPPRESSION DE BLOCS - AJOUT À /css/style.css
   ===================================== */

/* Animation de disparition pour les blocs de test */
@keyframes slideOutAndFade {
    0% {
        opacity: 1;
        transform: translateX(0) scale(1);
        height: auto;
        margin-bottom: var(--spacing-6);
        padding: var(--spacing-6);
    }
    25% {
        opacity: 0.7;
        transform: translateX(-10px) scale(0.98);
    }
    50% {
        opacity: 0.3;
        transform: translateX(-20px) scale(0.95);
    }
    75% {
        opacity: 0.1;
        transform: translateX(-30px) scale(0.9);
        height: auto;
        margin-bottom: var(--spacing-6);
        padding: var(--spacing-6);
    }
    100% {
        opacity: 0;
        transform: translateX(-50px) scale(0.8);
        height: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
        overflow: hidden;
    }
}

/* Classe pour déclencher l'animation de suppression */
.removing-block {
    animation: slideOutAndFade 0.6s ease-in-out forwards;
    pointer-events: none;
}

/* Animation de secousse pour feedback d'erreur */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.error-shake {
    animation: shake 0.5s ease-in-out;
}

/* Amélioration des boutons de performance pour la suppression */
.performance-actions .btn.btn-danger:hover {
    background: linear-gradient(135deg, #DC2626, #B91C1C);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.performance-actions .btn.btn-danger:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.2);
}

/* États de chargement pour les boutons */
.btn.loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border: 2px solid #ffffff;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: buttonSpin 0.8s linear infinite;
}

@keyframes buttonSpin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}
/*
 * Modal de confirmation de suppression
 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.modal-overlay.show {
    display: flex;
    animation: fadeIn 0.3s ease-out;
}

.modal-content {
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-8);
    max-width: 400px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    animation: slideIn 0.3s ease-out;
}

.modal-header h3 {
    margin: 0 0 var(--spacing-4) 0;
    font-size: var(--font-size-xl);
    color: var(--color-gray-900);
}

.modal-body p {
    margin: 0 0 var(--spacing-2) 0;
    color: var(--color-gray-700);
    line-height: 1.5;
}

.modal-warning {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    font-style: italic;
}

.modal-actions {
    display: flex;
    gap: var(--spacing-3);
    margin-top: var(--spacing-6);
    justify-content: flex-end;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from { 
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to { 
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Animation d'apparition des cartes joueurs */
.player-card {
    animation: slideInUp 0.6s ease-out forwards;
    opacity: 0;
    transform: translateY(30px);
}

.player-card:nth-child(1) { animation-delay: 0.1s; }
.player-card:nth-child(2) { animation-delay: 0.2s; }
.player-card:nth-child(3) { animation-delay: 0.3s; }
.player-card:nth-child(4) { animation-delay: 0.4s; }
.player-card:nth-child(5) { animation-delay: 0.5s; }
.player-card:nth-child(6) { animation-delay: 0.6s; }

@keyframes slideInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive design */
@media (max-width: 768px) {
    .players-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
    }
    
    .players-title {
        font-size: var(--font-size-3xl);
    }
    
    .player-card {
        padding: var(--spacing-4);
    }
    
    .player-avatar {
        width: 3rem;
        height: 3rem;
        font-size: 1.5rem;
    }
    
    .player-actions {
        flex-direction: column;
    }
    
    .modal-content {
        margin: var(--spacing-4);
    }
}

/* =====================================
   STYLES MES JOUEURS
   ===================================== */

/* Bouton retour amélioré */
.back-button {
    margin-bottom: var(--spacing-6);
}

.back-button .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-3);
}

/* Barre de recherche stylisée */
.search-bar {
    position: relative;
    max-width: 400px;
    margin: 0 auto var(--spacing-8);
}

.search-icon {
    position: absolute;
    left: var(--spacing-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-gray-500);
    font-size: var(--font-size-lg);
    z-index: 2;
}

.search-input {
    width: 100%;
    padding: var(--spacing-4) var(--spacing-4) var(--spacing-4) 3rem;
    border: 2px solid var(--color-gray-200);
    border-radius: 50px;
    font-size: var(--font-size-base);
    background: var(--color-white);
    transition: all var(--transition-smooth);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
    transform: translateY(-2px);
}

/* Grille des joueurs améliorée */
.players-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-8);
}

/* Cartes joueurs avec icônes selon le genre */
.player-card {
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-6);
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    border: 1px solid var(--color-gray-200);
    transition: all var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.player-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    border-color: var(--color-primary);
}

.player-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.6s ease-in-out;
    pointer-events: none;
}

.player-card:hover::before {
    left: 100%;
}

/* Header des cartes avec avatar selon le genre */
.player-header {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-4);
    position: relative;
    z-index: 2;
}

.player-avatar {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin-right: var(--spacing-4);
    position: relative;
    overflow: hidden;
    border: 3px solid var(--color-white);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Avatars selon le genre avec emojis */
.player-avatar.homme {
    background: linear-gradient(135deg, #3B82F6, #1E40AF);
}

.player-avatar.femme {
    background: linear-gradient(135deg, #EC4899, #BE185D);
}

.player-avatar.default {
    background: linear-gradient(135deg, var(--color-gray-400), var(--color-gray-600));
}

.player-info h4 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-gray-900);
    margin: 0 0 0.25rem 0;
}

.player-email {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin: 0;
}

/* Détails du joueur */
.player-details {
    margin: var(--spacing-4) 0;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-2) 0;
    border-bottom: 1px solid var(--color-gray-100);
}

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

.detail-label {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    font-weight: 500;
}

.detail-value {
    font-size: var(--font-size-sm);
    color: var(--color-gray-900);
    font-weight: 600;
}

/* Actions des cartes joueurs */
.player-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    margin-top: var(--spacing-4);
    justify-content: center;
    align-items: stretch;
    position: relative;
    z-index: 2;
}

.player-actions .btn {
    flex: 1;
    font-size: var(--font-size-sm);
    padding: 0.75rem 1rem;
    text-align: center;
    justify-content: center;
    white-space: normal;
    line-height: 1.35;
    min-width: 0;
}

.player-actions .view-performances-btn {
    background: linear-gradient(135deg, #007AFF, #0056CC);
    color: var(--color-white);
    border: none;
    font-weight: 600;
}

.player-actions .view-performances-btn:hover {
    background: linear-gradient(135deg, #0056CC, #004499);
    color: var(--color-white);
    box-shadow: 0 4px 14px rgba(0, 122, 255, 0.4);
    transform: translateY(-1px);
}

.player-actions .view-weekly-summary-btn {
    background: linear-gradient(135deg, #059669, #047857);
    color: var(--color-white);
    border: none;
    font-weight: 600;
}

.player-actions .view-weekly-summary-btn:hover {
    background: linear-gradient(135deg, #047857, #065f46);
    color: var(--color-white);
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.4);
    transform: translateY(-1px);
}

/* Bouton supprimer rouge */
.btn-danger {
    background: linear-gradient(135deg, #EF4444, #DC2626);
    color: white;
    border: none;
    position: relative;
    overflow: hidden;
}

.btn-danger:hover {
    background: linear-gradient(135deg, #DC2626, #B91C1C);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.3);
}

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

.btn-danger.loading {
    pointer-events: none;
}

.btn-danger.loading .btn-text {
    opacity: 0;
}

.btn-danger.loading .btn-spinner {
    opacity: 1;
}

.btn-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

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

/* Animation de suppression des cartes */
@keyframes removeCard {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
        height: auto;
        margin-bottom: var(--spacing-6);
        padding: var(--spacing-6);
    }
    25% {
        opacity: 0.8;
        transform: scale(0.95) translateY(-10px);
    }
    50% {
        opacity: 0.4;
        transform: scale(0.9) translateY(-20px);
    }
    75% {
        opacity: 0.1;
        transform: scale(0.8) translateY(-30px);
        height: auto;
        margin-bottom: var(--spacing-6);
        padding: var(--spacing-6);
    }
    100% {
        opacity: 0;
        transform: scale(0.7) translateY(-40px);
        height: 0;
        margin-bottom: 0;
        padding: 0;
        overflow: hidden;
    }
}

.player-card.removing {
    animation: removeCard 0.8s ease-in-out forwards;
    pointer-events: none;
}

/* États vides et messages */
.no-players-message,
.error-message {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--spacing-12) var(--spacing-6);
}

.empty-state,
.error-state {
    max-width: 400px;
    margin: 0 auto;
}

.empty-icon,
.error-icon {
    font-size: 4rem;
    margin-bottom: var(--spacing-4);
    opacity: 0.7;
}

.empty-state h3,
.error-state h3 {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    color: var(--color-gray-800);
    margin-bottom: var(--spacing-3);
}

.empty-state p,
.error-state p {
    color: var(--color-gray-600);
    line-height: 1.6;
    margin-bottom: var(--spacing-2);
}

/*
/* ========================================
   STYLES POUR LES TESTS DE PERFORMANCE
   À AJOUTER À LA FIN DE /css/style.css
   ======================================== */

/* Container principal des tests */
.test-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-6);
    background: var(--color-white);
    min-height: 100vh;
}

/* Header des tests */
.test-header {
    text-align: center;
    margin-bottom: var(--spacing-8);
    padding: var(--spacing-6);
    background: linear-gradient(135deg, #F8FAFC 0%, #E2E8F0 100%);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-gray-200);
}

.test-header h1 {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-3);
}

.test-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-gray-600);
    margin: 0;
}

/* Contenu des tests */
.test-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
}

.test-content section {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-6);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.test-content section h2 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-4);
    padding-bottom: var(--spacing-3);
    border-bottom: 2px solid var(--color-gray-100);
}

/* Instructions des tests */
.test-instructions ol {
    margin-left: var(--spacing-6);
    color: var(--color-gray-700);
}

.test-instructions li {
    margin-bottom: var(--spacing-3);
    line-height: 1.6;
}

.test-instructions li strong {
    color: var(--color-gray-900);
}

/* Scorecard des tests */
.test-scorecard {
    background: linear-gradient(135deg, #FAFBFF 0%, #F0F9FF 100%);
    border: 2px solid #DBEAFE;
}

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

.distance-section {
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-4);
    border: 1px solid var(--color-gray-200);
}

.distance-section h3 {
    text-align: center;
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-4);
    padding-bottom: var(--spacing-3);
    border-bottom: 1px solid var(--color-gray-200);
}

/* Grille des putts */
.putts-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
}

.putt-box {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gray-100);
    border: 2px solid var(--color-gray-300);
    border-radius: 8px;
    font-weight: 600;
    color: var(--color-gray-700);
    cursor: pointer;
    transition: all var(--transition-smooth);
    user-select: none;
}

.putt-box:hover {
    background: var(--color-gray-200);
    border-color: var(--color-gray-400);
    transform: scale(1.05);
}

.putt-box.success {
    background: linear-gradient(135deg, #10B981, #059669);
    border-color: #059669;
    color: var(--color-white);
    font-weight: 700;
}

.putt-box.success:hover {
    background: linear-gradient(135deg, #059669, #047857);
    transform: scale(1.08);
}

/* Affichage des scores */
.score-display {
    text-align: center;
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-gray-900);
    padding: var(--spacing-3);
    background: var(--color-gray-50);
    border-radius: 8px;
}

.total-score {
    text-align: center;
    padding: var(--spacing-6);
    background: linear-gradient(135deg, #F0FDF4, #DCFCE7);
    border: 2px solid #BBF7D0;
    border-radius: var(--border-radius-lg);
    margin-top: var(--spacing-6);
}

.total-score h3 {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: #166534;
    margin-bottom: var(--spacing-3);
}

.percentage {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: #15803D;
}

/* Actions des tests */
.test-actions {
    display: flex;
    gap: var(--spacing-4);
    justify-content: center;
    margin-top: var(--spacing-8);
    padding: var(--spacing-6);
    background: var(--color-gray-50);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-gray-200);
}

.test-actions .btn {
    min-width: 140px;
    font-weight: 600;
}

/* Styles pour le bouton de scan */
.scan-button-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-left: auto;
}

.scan-status {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    font-style: italic;
}

.scan-status.success {
    color: #059669;
}

.scan-status.error {
    color: #DC2626;
}

/* Loading overlay pour le scan */
.scan-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.scan-loading-content {
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-8);
    text-align: center;
    box-shadow: var(--shadow-xl);
    max-width: 400px;
    width: 90%;
}

.scan-loading-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-4);
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.scan-loading-text {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-3);
}

.scan-loading-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}

/* Responsive design pour les tests */
@media (max-width: 768px) {
    .test-container {
        padding: var(--spacing-4);
    }
    
    .test-header {
        padding: var(--spacing-4);
    }
    
    .test-header h1 {
        font-size: var(--font-size-2xl);
    }
    
    .scorecard-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
    }
    
    .evaluation-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-3);
    }
    
    .test-actions {
        flex-direction: column;
        gap: var(--spacing-3);
    }
    
    .test-actions .btn {
        width: 100%;
    }
    
    .putts-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: var(--spacing-2);
    }
}

@media (max-width: 480px) {
    .test-content section {
        padding: var(--spacing-4);
    }
    
    .distance-section {
        padding: var(--spacing-3);
    }
    
    .putts-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 8px;
    }
    
    .putt-box {
        font-size: var(--font-size-sm);
    }
    
    .scan-loading-content {
        padding: var(--spacing-6);
    }
}

/* Animations pour les tests */
.test-container {
    animation: fadeInUp 0.6s ease-out;
}

.distance-section {
    animation: fadeInUp 0.6s ease-out;
}

.distance-section:nth-child(1) { animation-delay: 0.1s; }
.distance-section:nth-child(2) { animation-delay: 0.2s; }
.distance-section:nth-child(3) { animation-delay: 0.3s; }

/* =====================================
   STYLES POUR LE BOUTON SUPPRIMER COACH
   ===================================== */

/* Conteneur pour le champ coach avec bouton supprimer */
.coach-input-container {
    position: relative;
    display: flex;
    gap: var(--spacing-3);
    align-items: center;
}

.coach-input-container .form-input {
    flex: 1;
}

.coach-add-container .btn-add-coach {
    flex-shrink: 0;
    white-space: nowrap;
}

.linked-coaches-list {
    list-style: none;
    margin: 0 0 var(--spacing-4);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.linked-coach-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius-lg);
}

.linked-coach-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.linked-coach-info strong {
    color: var(--color-gray-900);
    font-size: var(--font-size-sm);
}

.linked-coach-info small {
    color: var(--color-gray-600);
    font-size: 0.8rem;
    word-break: break-all;
}

.linked-coaches-empty {
    margin: 0 0 var(--spacing-3);
}

/* Bouton supprimer coach */
.btn-remove-coach {
    background: #EF4444;
    color: white;
    border: 2px solid #EF4444;
    padding: var(--spacing-3);
    min-width: auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    border-radius: var(--border-radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
    opacity: 1; /* Visible pour test */
    transform: scale(1);
    pointer-events: auto;
}

.btn-remove-coach.visible {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.btn-remove-coach:hover {
    background: #DC2626;
    border-color: #DC2626;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.btn-remove-coach:active {
    transform: scale(0.95);
}

/* Animation pour l'apparition du bouton */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.btn-remove-coach.visible {
    animation: fadeInScale 0.2s ease-out;
}

/* Styles pour la suppression en cours */
.btn-remove-coach.removing {
    background: #9CA3AF;
    border-color: #9CA3AF;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-remove-coach.removing::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid white;
    border-radius: 50%;
    animation: btn-spin 1s linear infinite;
}

/* Animation pour la suppression réussie */
@keyframes successPulse {
    0% { 
        background: #10B981;
        border-color: #10B981;
        transform: scale(1);
    }
    50% { 
        background: #059669;
        border-color: #059669;
        transform: scale(1.1);
    }
    100% { 
        background: #10B981;
        border-color: #10B981;
        transform: scale(1);
    }
}

.btn-remove-coach.success {
    background: #10B981;
    border-color: #10B981;
    animation: successPulse 0.6s ease-in-out;
}

/* Responsive */
@media (max-width: 768px) {
    .coach-input-container {
        gap: var(--spacing-2);
    }
    
    .btn-remove-coach {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
}
# Styles CSS à ajouter à /css/style.css

Ajoutez ces styles à la fin de votre fichier `/css/style.css` :

```css
# Styles CSS à ajouter à /css/style.css

Ajoutez ces styles à la fin de votre fichier `/css/style.css` :

```css
# Styles CSS à ajouter pour l'interface bulles

Ajoutez ces styles à la fin de votre fichier `/css/style.css` :

```css
/* =====================================
   STYLES INTERFACE BULLES MODERNE - À AJOUTER À LA FIN DE /css/style.css
   ===================================== */

/* Animation du spinner de chargement */
.loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 1s ease-in-out infinite;
    margin-right: 0.5rem;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Effets de pulsation pour la bulle centrale */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 20px 40px rgba(0, 122, 255, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 25px 50px rgba(0, 122, 255, 0.6);
    }
}

/* Animation d'apparition en spirale */
@keyframes spiralIn {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* Animation de disparition */
@keyframes fadeOutScale {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0.8);
        opacity: 0;
    }
}

/* Effets de survol avancés */
.player-bubble:hover {
    animation: pulse 2s infinite;
}

/* Réactivité mobile */
@media (max-width: 768px) {
    #bubble-container {
        width: 350px !important;
        height: 350px !important;
    }
    
    .player-bubble {
        width: 80px !important;
        height: 80px !important;
    }
    
    .player-bubble div:first-child {
        width: 40px !important;
        height: 40px !important;
        font-size: 1rem !important;
    }
    
    .player-bubble div:last-child {
        font-size: 0.7rem !important;
    }
}

@media (max-width: 480px) {
    #bubble-container {
        width: 300px !important;
        height: 300px !important;
    }
    
    .player-bubble {
        width: 70px !important;
        height: 70px !important;
    }
}

/* Animations avancées pour les notifications */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOutRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

/* Effet de flou pour l'arrière-plan */
.blur-background {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Styles pour les éléments interactifs */
.interactive-element {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.interactive-element:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.interactive-element:active {
    transform: translateY(0);
}
```
/* =====================================
   STYLES POUR L'INTERFACE UTILISATEUR CONNECTÉ
   À ajouter à la fin de /css/style.css
   ===================================== */

/* Message de bienvenue pour utilisateur connecté */
.user-welcome {
    display: inline-block;
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-4);
    margin-right: var(--spacing-4);
    padding: var(--spacing-3) var(--spacing-4);
    background: linear-gradient(135deg, var(--color-gray-50) 0%, var(--color-gray-100) 100%);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-gray-200);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: var(--transition-smooth);
}

.user-welcome:hover {
    background: linear-gradient(135deg, var(--color-gray-100) 0%, var(--color-gray-200) 100%);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

/* Container pour les boutons d'utilisateur connecté */
.buttons .user-welcome + .btn {
    margin-left: var(--spacing-2);
}

/* Responsive pour les petits écrans */
@media (max-width: 640px) {
    .user-welcome {
        display: block;
        text-align: center;
        margin-right: 0;
        margin-bottom: var(--spacing-4);
        font-size: var(--font-size-base);
        padding: var(--spacing-3);
    }
    
    .buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .buttons .user-welcome + .btn {
        margin-left: 0;
        margin-top: var(--spacing-3);
    }
}

/* ========================================
   STYLES POUR L'IMPORT FLIGHTSCOPE WEDGING
   À ajouter à la fin de /css/style.css
   ======================================== */

/* Instructions d'import */
.import-instructions {
    background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
    border: 2px solid #BAE6FD;
}

.instructions-content ol {
    margin-left: var(--spacing-6);
    color: var(--color-gray-700);
}

.instructions-content li {
    margin-bottom: var(--spacing-3);
    line-height: 1.6;
}

.instructions-content li strong {
    color: var(--color-gray-900);
}

/* Zone d'upload */
.upload-section {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
}

.upload-area {
    border: 3px dashed var(--color-gray-300);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-8);
    text-align: center;
    background: var(--color-gray-50);
    transition: all var(--transition-smooth);
    cursor: pointer;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-area:hover {
    border-color: var(--color-primary);
    background: #F0F9FF;
}

.upload-area.drag-over {
    border-color: var(--color-primary);
    background: #E0F2FE;
    transform: scale(1.02);
}

.upload-content {
    max-width: 400px;
}

.upload-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-4);
}

.upload-content h3 {
    font-size: var(--font-size-lg);
    color: var(--color-gray-800);
    margin-bottom: var(--spacing-3);
}

.upload-content p {
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-4);
}

.upload-note {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-top: var(--spacing-3);
}

/* Barre de progression */
.progress-container {
    margin-top: var(--spacing-6);
    text-align: center;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: var(--color-gray-200);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: var(--spacing-3);
}

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

.progress-text {
    color: var(--color-gray-600);
    font-weight: 500;
}

/* Section de date */
.date-section {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border: 2px solid #F59E0B;
}

.date-picker-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    max-width: 400px;
    margin: 0 auto;
}

.date-input {
    padding: var(--spacing-3);
    border: 2px solid var(--color-gray-300);
    border-radius: var(--border-radius-lg);
    font-size: var(--font-size-base);
    transition: border-color var(--transition-fast);
    background: var(--color-white);
}

.date-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

/* Section de prévisualisation */
.preview-section {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
}

.preview-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
    padding: var(--spacing-4);
    background: var(--color-gray-50);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-gray-200);
}

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

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

.stat-value {
    display: block;
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-gray-900);
}

/* Tableau de données */
.table-container {
    overflow-x: auto;
    margin-bottom: var(--spacing-6);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-gray-200);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-white);
}

.data-table th {
    background: linear-gradient(135deg, var(--color-gray-100) 0%, var(--color-gray-200) 100%);
    padding: var(--spacing-3);
    text-align: center;
    font-weight: 600;
    color: var(--color-gray-900);
    border-bottom: 2px solid var(--color-gray-300);
    font-size: var(--font-size-sm);
}

.data-table td {
    padding: var(--spacing-3);
    text-align: center;
    border-bottom: 1px solid var(--color-gray-200);
    font-size: var(--font-size-sm);
}

.data-table tbody tr:hover {
    background: var(--color-gray-50);
}

/* Mise en forme conditionnelle */
.good-value {
    background: #DCFCE7 !important;
    color: #166534;
    font-weight: 600;
}

.warning-value {
    background: #FEF3C7 !important;
    color: #92400E;
    font-weight: 600;
}

.bad-value {
    background: #FEE2E2 !important;
    color: #991B1B;
    font-weight: 600;
}

/* Actions de prévisualisation */
.preview-actions {
    display: flex;
    gap: var(--spacing-4);
    justify-content: center;
    margin-top: var(--spacing-6);
}

/* Section de succès */
.success-section {
    background: linear-gradient(135deg, #DCFCE7 0%, #BBF7D0 100%);
    border: 2px solid #22C55E;
}

.success-content {
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
}

.success-icon {
    font-size: 4rem;
    margin-bottom: var(--spacing-4);
}

.success-content h2 {
    color: #166534;
    margin-bottom: var(--spacing-3);
}

.success-content p {
    color: #166534;
    margin-bottom: var(--spacing-3);
    line-height: 1.6;
}

/* Spinner de chargement */
.loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 1s ease-in-out infinite;
    margin-right: 0.5rem;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .upload-area {
        padding: var(--spacing-6);
        min-height: 150px;
    }
    
    .upload-icon {
        font-size: 2rem;
    }
    
    .preview-stats {
        grid-template-columns: 1fr;
        gap: var(--spacing-3);
    }
    
    .preview-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .preview-actions .btn {
        width: 100%;
        max-width: 200px;
    }
    
    .data-table {
        font-size: 0.8rem;
    }
    
    .data-table th,
    .data-table td {
        padding: var(--spacing-2);
    }
}
/* =====================================
   COMPTEUR DE JOURS DEPUIS DERNIÈRE PERFORMANCE
   À ajouter à la fin de /css/style.css
   ===================================== */

/* Styles pour le compteur de jours avec couleurs dynamiques */
.days-counter {
    position: relative;
    font-weight: 700;
    font-size: 2.5rem;
    color: var(--color-gray-500);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    line-height: 1;
    margin-bottom: var(--spacing-1);
    min-width: 60px;
    display: inline-block;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* États de couleur basés sur le nombre de jours */
.days-counter[data-days="0"],
.days-counter[data-days="1"],
.days-counter[data-days="2"],
.days-counter[data-days="3"],
.days-counter[data-days="4"],
.days-counter[data-days="5"] {
    color: #10B981; /* Vert - Excellent */
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.1) 100%);
    border-radius: var(--border-radius-lg);
    padding: 0.25rem 0.5rem;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
}

.days-counter[data-days="6"],
.days-counter[data-days="7"],
.days-counter[data-days="8"] {
    color: #F59E0B; /* Orange - Attention */
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(217, 119, 6, 0.1) 100%);
    border-radius: var(--border-radius-lg);
    padding: 0.25rem 0.5rem;
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.2);
}

.days-counter[data-days^="9"],
.days-counter[data-days^="1"], /* 10+ */
.days-counter[data-days^="2"], /* 20+ */
.days-counter[data-days^="3"], /* 30+ */
.days-counter[data-days^="4"], /* 40+ */
.days-counter[data-days^="5"], /* 50+ */
.days-counter[data-days^="6"], /* 60+ */
.days-counter[data-days^="7"], /* 70+ */
.days-counter[data-days^="8"], /* 80+ */
.days-counter[data-days^="9"] { /* 90+ */
    color: #EF4444; /* Rouge - Critique */
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.1) 100%);
    border-radius: var(--border-radius-lg);
    padding: 0.25rem 0.5rem;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.2);
}

/* Exception pour les jours 10-19 qui doivent rester rouge */
.days-counter[data-days="10"],
.days-counter[data-days="11"],
.days-counter[data-days="12"],
.days-counter[data-days="13"],
.days-counter[data-days="14"],
.days-counter[data-days="15"],
.days-counter[data-days="16"],
.days-counter[data-days="17"],
.days-counter[data-days="18"],
.days-counter[data-days="19"] {
    color: #EF4444; /* Rouge - Critique */
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.1) 100%);
    border-radius: var(--border-radius-lg);
    padding: 0.25rem 0.5rem;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.2);
}

/* Animation de pulsation pour les états critiques (8+ jours) */
.days-counter[data-days^="9"],
.days-counter[data-days^="1"], /* 10+ */
.days-counter[data-days^="2"], /* 20+ */
.days-counter[data-days^="3"], /* 30+ */
.days-counter[data-days^="4"], /* 40+ */
.days-counter[data-days^="5"], /* 50+ */
.days-counter[data-days^="6"], /* 60+ */
.days-counter[data-days^="7"], /* 70+ */
.days-counter[data-days^="8"], /* 80+ */
.days-counter[data-days^="9"], /* 90+ */
.days-counter[data-days="8"],
.days-counter[data-days="10"],
.days-counter[data-days="11"],
.days-counter[data-days="12"],
.days-counter[data-days="13"],
.days-counter[data-days="14"],
.days-counter[data-days="15"],
.days-counter[data-days="16"],
.days-counter[data-days="17"],
.days-counter[data-days="18"],
.days-counter[data-days="19"] {
    animation: pulseCritical 2s ease-in-out infinite;
}

@keyframes pulseCritical {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 20px rgba(239, 68, 68, 0.2);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 30px rgba(239, 68, 68, 0.4);
    }
}

/* Animation de brillance pour l'état excellent (0-5 jours) */
.days-counter[data-days="0"],
.days-counter[data-days="1"],
.days-counter[data-days="2"],
.days-counter[data-days="3"],
.days-counter[data-days="4"],
.days-counter[data-days="5"] {
    animation: shimmerGreen 3s ease-in-out infinite;
}

@keyframes shimmerGreen {
    0%, 100% {
        box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
    }
    50% {
        box-shadow: 0 0 30px rgba(16, 185, 129, 0.4);
    }
}

/* Animation de clignotement pour l'état d'attention (6-8 jours) */
.days-counter[data-days="6"],
.days-counter[data-days="7"] {
    animation: warningBlink 4s ease-in-out infinite;
}

@keyframes warningBlink {
    0%, 80%, 100% {
        box-shadow: 0 0 20px rgba(245, 158, 11, 0.2);
    }
    90% {
        box-shadow: 0 0 25px rgba(245, 158, 11, 0.4);
    }
}

/* Effet de hover pour le compteur */
.days-counter:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease-in-out;
}

/* Animation d'apparition du compteur */
.days-counter {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
    animation-delay: 0.2s;
}

/* État de chargement pour le compteur */
.days-counter.loading {
    color: var(--color-gray-400);
    background: none;
    box-shadow: none;
    animation: none;
}

.days-counter.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-gray-300);
    border-top: 2px solid var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Responsive pour le compteur */
@media (max-width: 768px) {
    .days-counter {
        font-size: 2rem;
        min-width: 50px;
    }
}

@media (max-width: 480px) {
    .days-counter {
        font-size: 1.8rem;
        min-width: 45px;
    }
}
/* Ajustement de la grille stats pour 3 colonnes au lieu de 2 */
.stats-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem;
}

/* Responsive : 2 colonnes sur tablette, 1 sur mobile */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }
}

/* Ajout à /css/style.css pour des blocs statistiques carrés et compacts */

/* Nouvelle classe pour des statistiques mini carrées */
.stats-mini {
    margin-bottom: var(--spacing-6);
}

.stats-mini .stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-3);
    max-width: 600px; /* Limite la largeur totale pour garder les blocs petits */
    margin: 0 auto;
}

.stats-mini .stat-card {
    background: linear-gradient(135deg, var(--color-white) 0%, var(--color-gray-50) 100%);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-3);
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--color-gray-200);
    transition: all var(--transition-smooth);
    position: relative;
    overflow: hidden;
    
    /* Dimensions carrées */
    aspect-ratio: 1;
    min-height: 90px;
    max-height: 90px;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.stats-mini .stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 122, 255, 0.05), transparent);
    transition: left 0.6s ease;
    pointer-events: none;
}

.stats-mini .stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
    border-color: var(--color-primary);
}

.stats-mini .stat-card:hover::before {
    left: 100%;
}

.stats-mini .stat-icon {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-1);
    transition: transform var(--transition-smooth);
    display: block;
    line-height: 1;
}

.stats-mini .stat-card:hover .stat-icon {
    transform: scale(1.1);
}

.stats-mini .stat-number {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--spacing-1);
    line-height: 1;
    min-width: 20px;
    display: inline-block;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.stats-mini .stat-label {
    font-size: 0.7rem;
    color: var(--color-gray-600);
    font-weight: 500;
    line-height: 1.1;
    text-align: center;
}

/* Responsive pour les statistiques mini */
@media (max-width: 768px) {
    .stats-mini .stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-2);
        max-width: 450px;
    }
    
    .stats-mini .stat-card {
        padding: var(--spacing-2);
        min-height: 75px;
        max-height: 75px;
    }
    
    .stats-mini .stat-icon {
        font-size: 1.3rem;
    }
    
    .stats-mini .stat-number {
        font-size: var(--font-size-lg);
    }
    
    .stats-mini .stat-label {
        font-size: 0.65rem;
    }
}

@media (max-width: 480px) {
    .stats-mini .stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-1);
        max-width: 350px;
    }
    
    .stats-mini .stat-card {
        padding: var(--spacing-1);
        min-height: 65px;
        max-height: 65px;
    }
    
    .stats-mini .stat-icon {
        font-size: 1.2rem;
    }
    
    .stats-mini .stat-number {
        font-size: var(--font-size-base);
    }
    
    .stats-mini .stat-label {
        font-size: 0.6rem;
    }
}

/* =====================================
   STYLES POUR LE TEST PUTTING 4-8 FEETS
   À ajouter à la fin de /css/style.css
   ===================================== */

/* Section vitesse des greens */
.speed-section {
    background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
    border: 2px solid #BAE6FD;
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-6);
}

.speed-info {
    background: white;
    border-radius: var(--border-radius-md);
    padding: var(--spacing-4);
    margin-bottom: var(--spacing-4);
    border-left: 4px solid var(--color-primary);
}

.speed-info p {
    margin-bottom: var(--spacing-3);
    font-weight: 600;
    color: var(--color-gray-800);
}

.speed-info ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--spacing-4);
    flex-wrap: wrap;
}

.speed-info li {
    background: var(--color-gray-50);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-gray-200);
}

/* Slider de vitesse des greens */
.speed-slider-container {
    margin-top: var(--spacing-4);
}

.speed-slider {
    position: relative;
    width: 100%;
    height: 60px;
    background: var(--color-gray-100);
    border-radius: 30px;
    margin-bottom: var(--spacing-4);
    cursor: pointer;
    overflow: hidden;
    border: 2px solid var(--color-gray-200);
}

.speed-track {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        #10B981 0%, #10B981 33%, 
        #F59E0B 33%, #F59E0B 66%, 
        #EF4444 66%, #EF4444 100%);
    border-radius: 30px;
}

.speed-handle {
    position: absolute;
    top: 50%;
    left: 16.5%;
    width: 50px;
    height: 50px;
    background: #10B981;
    border: 4px solid white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: grab;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
    z-index: 10;
}

.speed-handle:hover {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.5);
}

.speed-handle:active {
    cursor: grabbing;
    transform: translate(-50%, -50%) scale(0.95);
}

.speed-labels {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-2) var(--spacing-3);
}

.speed-label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-600);
    transition: all var(--transition-smooth);
}

.speed-label.active {
    color: var(--color-gray-900);
    font-weight: 700;
    transform: scale(1.1);
}

.speed-display {
    text-align: center;
    padding: var(--spacing-3);
    background: white;
    border-radius: var(--border-radius-lg);
    border: 2px solid var(--color-gray-200);
}

.speed-text {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: #10B981;
    transition: color 0.3s ease;
}

/* Section putts */
.putts-section {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border: 2px solid #F59E0B;
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-6);
    position: relative;
}

.putts-info {
    background: white;
    border-radius: var(--border-radius-md);
    padding: var(--spacing-4);
    margin-bottom: var(--spacing-4);
    border-left: 4px solid #F59E0B;
}

.putts-info p {
    margin: 0;
    font-weight: 600;
    color: var(--color-gray-800);
}

/* Slider du nombre de putts */
.putts-slider-container {
    margin-top: var(--spacing-4);
}

.putts-slider {
    position: relative;
    width: 100%;
    height: 60px;
    background: var(--color-gray-100);
    border-radius: 30px;
    margin-bottom: var(--spacing-4);
    cursor: pointer;
    border: 2px solid var(--color-gray-200);
}

.putts-track {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #EF4444 0%, #EF4444 0%, #E5E7EB 0%, #E5E7EB 100%);
    border-radius: 30px;
    transition: background 0.3s ease;
}

.putts-handle {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 50px;
    height: 50px;
    background: #EF4444;
    border: 4px solid white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: grab;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
    z-index: 10;
}

.putts-handle:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.putts-handle:active {
    cursor: grabbing;
    transform: translate(-50%, -50%) scale(0.95);
}

.putts-scale {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-2) 0;
}

.scale-mark {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-500);
    transition: all var(--transition-smooth);
    position: relative;
}

.scale-mark.active {
    color: var(--color-gray-900);
    font-weight: 700;
    transform: scale(1.1);
}

.scale-mark.active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: currentColor;
    border-radius: 50%;
}

.putts-display {
    text-align: center;
    padding: var(--spacing-4);
    background: white;
    border-radius: var(--border-radius-lg);
    border: 2px solid var(--color-gray-200);
}

.putts-number {
    font-size: 3rem;
    font-weight: 900;
    color: #EF4444;
    transition: color 0.3s ease;
    display: block;
    line-height: 1;
}

.putts-label {
    font-size: var(--font-size-base);
    color: var(--color-gray-600);
    margin-top: var(--spacing-2);
    display: block;
}

.performance-indicator {
    margin-top: var(--spacing-3);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--border-radius-full);
    transition: all 0.3s ease;
}

.performance-indicator.faible {
    background: rgba(239, 68, 68, 0.1);
    border: 2px solid #EF4444;
}

.performance-indicator.moyen {
    background: rgba(245, 158, 11, 0.1);
    border: 2px solid #F59E0B;
}

.performance-indicator.excellent {
    background: rgba(16, 185, 129, 0.1);
    border: 2px solid #10B981;
    animation: excellentPulse 2s infinite;
}

.performance-text {
    font-weight: 700;
    font-size: var(--font-size-lg);
    transition: color 0.3s ease;
}

@keyframes excellentPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
    }
}

/* =====================================
   ANIMATION FEUX D'ARTIFICE AMÉLIORÉE - PLUS VISIBLE
   À remplacer dans /css/style.css
   ===================================== */

/* Container des feux d'artifice - plus large */
.fireworks-container {
    position: absolute;
    top: -50px; /* Déborde vers le haut */
    left: -50px; /* Déborde vers la gauche */
    width: calc(100% + 100px); /* Plus large */
    height: calc(100% + 100px); /* Plus haut */
    pointer-events: none;
    overflow: visible; /* Permet de déborder */
    border-radius: var(--border-radius-lg);
    z-index: 1000; /* Au-dessus de tout */
}

.fireworks-container.active {
    z-index: 1000;
}

/* Base du feu d'artifice - plus visible */
.firework {
    position: absolute;
    width: 8px; /* Doublé de 4px à 8px */
    height: 8px;
}

/* Particules de feu d'artifice - BEAUCOUP plus visibles */
.firework-particle {
    position: absolute;
    width: 12px; /* Triplé de 4px à 12px */
    height: 12px;
    border-radius: 50%;
    animation: fireworkExplodeEnhanced 2s ease-out forwards; /* Animation plus longue */
    transform-origin: center;
    box-shadow: 0 0 10px currentColor; /* Effet de brillance */
}

/* Animation des particules améliorée */
@keyframes fireworkExplodeEnhanced {
    0% {
        opacity: 1;
        transform: scale(0.5) rotate(0deg) translateY(0);
        box-shadow: 0 0 15px currentColor;
    }
    25% {
        opacity: 1;
        transform: scale(1.5) rotate(90deg) translateY(-60px); /* Distance augmentée */
        box-shadow: 0 0 25px currentColor;
    }
    50% {
        opacity: 1;
        transform: scale(2) rotate(180deg) translateY(-80px); /* Plus loin */
        box-shadow: 0 0 35px currentColor;
    }
    75% {
        opacity: 0.8;
        transform: scale(1.8) rotate(270deg) translateY(-100px); /* Encore plus loin */
        box-shadow: 0 0 30px currentColor;
    }
    100% {
        opacity: 0;
        transform: scale(0.2) rotate(360deg) translateY(-120px); /* Maximum de distance */
        box-shadow: 0 0 5px currentColor;
    }
}

/* Particules avec trainée lumineuse */
.firework-particle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 3px;
    background: linear-gradient(90deg, currentColor, transparent);
    transform: translate(-50%, -50%) rotate(var(--particle-angle, 0deg));
    opacity: 0.7;
    border-radius: 2px;
    animation: trailFade 2s ease-out forwards;
}

@keyframes trailFade {
    0% {
        opacity: 0.8;
        width: 25px;
    }
    50% {
        opacity: 0.6;
        width: 30px;
    }
    100% {
        opacity: 0;
        width: 5px;
    }
}

/* Couleurs de feu d'artifice plus vives et variées */
.firework-particle.color-gold {
    background: radial-gradient(circle, #FFD700, #FFA500);
    box-shadow: 0 0 20px #FFD700;
}

.firework-particle.color-red {
    background: radial-gradient(circle, #FF6B6B, #FF4757);
    box-shadow: 0 0 20px #FF6B6B;
}

.firework-particle.color-blue {
    background: radial-gradient(circle, #4ECDC4, #45B7D1);
    box-shadow: 0 0 20px #4ECDC4;
}

.firework-particle.color-green {
    background: radial-gradient(circle, #96CEB4, #10B981);
    box-shadow: 0 0 20px #96CEB4;
}

.firework-particle.color-purple {
    background: radial-gradient(circle, #A8E6CF, #8B5FBF);
    box-shadow: 0 0 20px #A8E6CF;
}

.firework-particle.color-pink {
    background: radial-gradient(circle, #FFB6C1, #FF69B4);
    box-shadow: 0 0 20px #FFB6C1;
}

.firework-particle.color-orange {
    background: radial-gradient(circle, #FFEAA7, #FF7675);
    box-shadow: 0 0 20px #FFEAA7;
}

.firework-particle.color-cyan {
    background: radial-gradient(circle, #74B9FF, #00CEC9);
    box-shadow: 0 0 20px #74B9FF;
}

/* Animation d'explosion centrale */
.firework::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8), transparent);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    animation: centralExplosion 0.5s ease-out forwards;
}

@keyframes centralExplosion {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(4);
        opacity: 0;
    }
}

/* Effet de flash à l'écran */
.fireworks-container.active::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent);
    pointer-events: none;
    z-index: 999;
    animation: screenFlash 0.3s ease-out;
}

@keyframes screenFlash {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* Particules secondaires plus petites */
.firework-particle.secondary {
    width: 6px;
    height: 6px;
    animation: secondaryParticle 1.5s ease-out forwards;
}

@keyframes secondaryParticle {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    100% {
        opacity: 0;
        transform: scale(0.3) translateY(-40px);
    }
}

/* Animation pour mobile - plus subtile mais toujours visible */
@media (max-width: 768px) {
    .firework-particle {
        width: 10px;
        height: 10px;
    }
    
    @keyframes fireworkExplodeEnhanced {
        0% {
            opacity: 1;
            transform: scale(0.5) rotate(0deg) translateY(0);
        }
        50% {
            opacity: 1;
            transform: scale(1.8) rotate(180deg) translateY(-60px);
        }
        100% {
            opacity: 0;
            transform: scale(0.3) rotate(360deg) translateY(-80px);
        }
    }
}

/* Responsive */
@media (max-width: 768px) {
    .speed-info ul {
        flex-direction: column;
        gap: var(--spacing-2);
    }
    
    .speed-handle,
    .putts-handle {
        width: 40px;
        height: 40px;
    }
    
    .speed-slider,
    .putts-slider {
        height: 50px;
    }
    
    .putts-number {
        font-size: 2.5rem;
    }
    
    .putts-scale {
        font-size: var(--font-size-xs);
    }
}

@media (max-width: 480px) {
    .speed-section,
    .putts-section,
    .notes-section {
        padding: var(--spacing-4);
    }
    
    .speed-handle,
    .putts-handle {
        width: 35px;
        height: 35px;
    }
    
    .speed-slider,
    .putts-slider {
        height: 45px;
    }
    
    .putts-number {
        font-size: 2rem;
    }
}
/* =====================================
   CORRECTIONS SLIDERS POUR MOBILE - À AJOUTER À LA FIN DE /css/style.css
   ===================================== */

/* Améliorations pour mobile */
@media (max-width: 768px) {
    /* Augmentation de la taille des sliders pour une meilleure visibilité */
    .speed-slider,
    .putts-slider {
        height: 60px; /* Augmenté de 50px à 60px */
        border: 3px solid var(--color-gray-300); /* Bordure plus visible */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Ombre pour définir le slider */
    }
    
    /* Handles plus grands et plus visibles */
    .speed-handle,
    .putts-handle {
        width: 50px; /* Augmenté de 40px à 50px */
        height: 50px; /* Augmenté de 40px à 50px */
        border: 4px solid white; /* Bordure blanche pour contraste */
        box-shadow: 
            0 4px 12px rgba(0, 0, 0, 0.2),
            0 0 0 2px rgba(0, 0, 0, 0.1); /* Double ombre pour visibilité */
        z-index: 20; /* Z-index plus élevé pour s'assurer que le handle soit visible */
    }
    
    /* Amélioration du contraste des tracks */
    .speed-track {
        border: 1px solid rgba(255, 255, 255, 0.3); /* Bordure subtile */
    }
    
    /* Labels plus grands sur mobile */
    .speed-label {
        font-size: var(--font-size-base); /* Augmenté pour meilleure lisibilité */
        font-weight: 600;
        padding: var(--spacing-2);
        background: rgba(255, 255, 255, 0.9);
        border-radius: var(--border-radius-sm);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    
    /* Amélioration des échelles pour les putts */
    .putts-scale {
        padding: var(--spacing-3) 0;
    }
    
    .scale-mark {
        font-size: var(--font-size-base);
        font-weight: 600;
        padding: var(--spacing-1) var(--spacing-2);
        background: rgba(255, 255, 255, 0.9);
        border-radius: var(--border-radius-sm);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    
    /* Affichage des valeurs plus visible */
    .speed-display,
    .putts-display {
        border: 3px solid var(--color-gray-300);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    
    .speed-text {
        font-size: var(--font-size-2xl); /* Plus grand pour mobile */
        font-weight: 800;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }
    
    .putts-number {
        font-size: 3.5rem; /* Augmenté de 2.5rem à 3.5rem */
        font-weight: 900;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
}

/* Améliorations supplémentaires pour très petits écrans */
@media (max-width: 480px) {
    /* Maintien des tailles pour petits écrans */
    .speed-slider,
    .putts-slider {
        height: 55px; /* Légèrement réduit mais toujours visible */
        margin: var(--spacing-4) 0; /* Plus d'espacement */
    }
    
    .speed-handle,
    .putts-handle {
        width: 45px; /* Légèrement réduit mais toujours touchable */
        height: 45px;
        border: 3px solid white;
    }
    
    /* Zone tactile élargie pour les handles */
    .speed-handle::before,
    .putts-handle::before {
        content: '';
        position: absolute;
        top: -10px;
        left: -10px;
        right: -10px;
        bottom: -10px;
        z-index: -1;
    }
    
    /* Sections avec plus d'espacement */
    .speed-section,
    .putts-section,
    .notes-section {
        padding: var(--spacing-5); /* Augmenté de var(--spacing-4) */
        margin-bottom: var(--spacing-5);
    }
    
    /* Amélioration du contraste général */
    .speed-info,
    .putts-info {
        border: 2px solid var(--color-gray-300);
        background: rgba(255, 255, 255, 0.95);
    }
}

/* Amélioration du feedback tactile */
@media (max-width: 768px) {
    .speed-handle:active,
    .putts-handle:active {
        transform: translate(-50%, -50%) scale(1.1);
        box-shadow: 
            0 6px 20px rgba(0, 0, 0, 0.3),
            0 0 0 3px rgba(0, 0, 0, 0.1);
    }
    
    /* Animation d'entrée pour mobile */
    .speed-slider,
    .putts-slider {
        animation: slideInMobile 0.5s ease-out;
    }
    
    @keyframes slideInMobile {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* Ajout de styles pour améliorer la visibilité des éléments interactifs */
@media (max-width: 768px) {
    /* Indicateur visuel que l'élément est interactif */
    .speed-slider::after,
    .putts-slider::after {
        content: '👆 Glissez ou touchez';
        position: absolute;
        bottom: -30px;
        left: 50%;
        transform: translateX(-50%);
        font-size: var(--font-size-xs);
        color: var(--color-gray-600);
        background: rgba(255, 255, 255, 0.9);
        padding: var(--spacing-1) var(--spacing-2);
        border-radius: var(--border-radius-sm);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        opacity: 0.8;
        animation: fadeInHint 2s ease-out;
    }
    
    @keyframes fadeInHint {
        0% { opacity: 0; transform: translateX(-50%) translateY(10px); }
        50% { opacity: 1; transform: translateX(-50%) translateY(0); }
        100% { opacity: 0.8; transform: translateX(-50%) translateY(0); }
    }
}

/* Correction pour les handles qui peuvent être cachés */
.speed-handle,
.putts-handle {
    position: absolute !important;
    z-index: 30 !important; /* Z-index très élevé pour s'assurer de la visibilité */
    pointer-events: auto !important;
}

/* Amélioration de l'accessibilité tactile */
@media (pointer: coarse) {
    .speed-handle,
    .putts-handle {
        min-width: 44px; /* Taille minimum recommandée pour le tactile */
        min-height: 44px;
    }
}
/* =====================================
   STYLES RAPPORT PUTTING 4-8 FEETS - À AJOUTER À LA FIN DE /css/style.css
   ===================================== */

/* Header du rapport */
.report-header {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: white;
    padding: var(--spacing-8);
    border-radius: var(--border-radius-lg);
    margin-bottom: var(--spacing-8);
}

.report-header-content {
    max-width: 1200px;
    margin: 0 auto;
}

.report-title-section {
    text-align: center;
    margin-top: var(--spacing-4);
}

.report-main-title {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    margin-bottom: var(--spacing-3);
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.report-subtitle {
    font-size: var(--font-size-lg);
    opacity: 0.9;
    margin-bottom: var(--spacing-4);
}

.report-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-3);
    font-size: var(--font-size-sm);
    opacity: 0.8;
}

.report-separator {
    opacity: 0.6;
}

/* Contenu du rapport */
.report-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-6);
}

.report-section {
    margin-bottom: var(--spacing-12);
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-8);
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    border: 1px solid var(--color-gray-200);
}

.section-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-4);
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.section-description {
    color: var(--color-gray-600);
    font-size: var(--font-size-base);
    line-height: 1.6;
    margin-bottom: var(--spacing-6);
}

/* Grille de statistiques */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-6);
}

.stat-card {
    background: linear-gradient(135deg, var(--color-white) 0%, var(--color-gray-50) 100%);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-6);
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 2px solid var(--color-gray-200);
    transition: all var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 122, 255, 0.05), transparent);
    transition: left 0.6s ease;
    pointer-events: none;
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.stat-card:hover::before {
    left: 100%;
}

.stat-icon {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-3);
    transition: transform var(--transition-smooth);
    display: block;
}

.stat-card:hover .stat-icon {
    transform: scale(1.1);
}

.stat-value {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--spacing-2);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.stat-label {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    font-weight: 500;
    line-height: 1.3;
}

/* Variations de couleurs pour les cartes de stats */
.stat-card.success {
    border-color: #10B981;
}

.stat-card.success .stat-value {
    color: #10B981;
}

.stat-card.warning {
    border-color: #F59E0B;
}

.stat-card.warning .stat-value {
    color: #F59E0B;
}

.stat-card.danger {
    border-color: #EF4444;
}

.stat-card.danger .stat-value {
    color: #EF4444;
}

.stat-card.secondary {
    border-color: #6B7280;
}

.stat-card.secondary .stat-value {
    color: #6B7280;
}

/* Container des graphiques */
.chart-container {
    position: relative;
    height: 400px;
    margin-bottom: var(--spacing-4);
    background: var(--color-gray-50);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-4);
}

/* Conteneur des recommandations */
.recommendations-container {
    display: grid;
    gap: var(--spacing-4);
}

.recommendation-card {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-4);
    padding: var(--spacing-6);
    border-radius: var(--border-radius-lg);
    border-left: 4px solid;
    transition: all var(--transition-smooth);
}

.recommendation-card:hover {
    transform: translateX(8px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.recommendation-icon {
    font-size: 2rem;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.recommendation-content {
    flex: 1;
}

.recommendation-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-2);
    color: var(--color-gray-900);
}

.recommendation-text {
    color: var(--color-gray-700);
    line-height: 1.6;
    margin-bottom: var(--spacing-3);
}

.recommendation-action {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: inherit;
    opacity: 0.9;
}

/* Types de recommandations */
.recommendation-card.success {
    background: linear-gradient(135deg, #DCFCE7 0%, #BBF7D0 100%);
    border-left-color: #10B981;
    color: #065F46;
}

.recommendation-card.warning {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border-left-color: #F59E0B;
    color: #92400E;
}

.recommendation-card.info {
    background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
    border-left-color: #3B82F6;
    color: #1E40AF;
}

.recommendation-card.tip {
    background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
    border-left-color: #8B5CF6;
    color: #5B21B6;
}

/* Tableaux de données */
.table-container {
    overflow-x: auto;
    border-radius: var(--border-radius-lg);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-white);
    font-size: var(--font-size-sm);
}

.data-table th {
    background: var(--color-gray-50);
    padding: var(--spacing-4);
    text-align: left;
    font-weight: 600;
    color: var(--color-gray-900);
    border-bottom: 2px solid var(--color-gray-200);
    font-size: var(--font-size-sm);
}

.data-table td {
    padding: var(--spacing-4);
    border-bottom: 1px solid var(--color-gray-200);
    color: var(--color-gray-700);
    font-size: var(--font-size-sm);
}

.data-table tbody tr:hover {
    background: var(--color-gray-50);
}

/* Badges spécifiques au putting */
.speed-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.speed-badge.speed-lent {
    background: #DCFCE7;
    color: #065F46;
}

.speed-badge.speed-moyen {
    background: #FEF3C7;
    color: #92400E;
}

.speed-badge.speed-rapide {
    background: #FEE2E2;
    color: #991B1B;
}

.percentage-value {
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
}

.percentage-value.excellent {
    background: #DCFCE7;
    color: #065F46;
}

.percentage-value.good {
    background: #FEF3C7;
    color: #92400E;
}

.percentage-value.average {
    background: #E0E7FF;
    color: #3730A3;
}

.percentage-value.poor {
    background: #FEE2E2;
    color: #991B1B;
}

.level-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.level-badge.level-faible {
    background: #FEE2E2;
    color: #991B1B;
}

.level-badge.level-moyen {
    background: #FEF3C7;
    color: #92400E;
}

.level-badge.level-bon {
    background: #DCFCE7;
    color: #065F46;
}

/* Helpers de texte */
.text-center {
    text-align: center;
}

.font-bold {
    font-weight: 700;
}

/* État d'erreur */
.error-state {
    text-align: center;
    padding: var(--spacing-12);
    color: var(--color-gray-600);
}

.error-icon {
    font-size: 4rem;
    margin-bottom: var(--spacing-4);
    color: var(--color-gray-400);
}

/* Responsive */
@media (max-width: 768px) {
    .report-header {
        padding: var(--spacing-6) var(--spacing-4);
    }
    
    .report-main-title {
        font-size: var(--font-size-2xl);
    }
    
    .report-content {
        padding: 0 var(--spacing-4);
    }
    
    .report-section {
        padding: var(--spacing-6);
        margin-bottom: var(--spacing-8);
    }
    
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: var(--spacing-4);
    }
    
    .stat-card {
        padding: var(--spacing-4);
    }
    
    .stat-icon {
        font-size: 2rem;
    }
    
    .stat-value {
        font-size: var(--font-size-xl);
    }
    
    .chart-container {
        height: 300px;
        padding: var(--spacing-3);
    }
    
    .recommendation-card {
        flex-direction: column;
        text-align: center;
        padding: var(--spacing-4);
    }
    
    .recommendation-icon {
        align-self: center;
    }
    
    .report-meta {
        flex-direction: column;
        gap: var(--spacing-2);
    }
    
    .header-nav {
        flex-direction: column;
        gap: var(--spacing-3);
        align-items: stretch;
    }
	
css/* === CONSISTENCY SCORE STYLÉ === */
.consistency-dashboard {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 40px;
    margin: 30px 0;
    align-items: center;
}

.consistency-main {
    display: flex;
    justify-content: center;
    align-items: center;
}

.consistency-circle {
    position: relative;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        #ef4444 0deg 72deg,
        #f59e0b 72deg 144deg,
        #10b981 144deg 216deg,
        #3b82f6 216deg 288deg,
        #8b5cf6 288deg 360deg
    );
    padding: 8px;
    animation: consistencyPulse 3s ease-in-out infinite;
}

.consistency-inner {
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
}

.consistency-inner::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: consistencyShimmer 4s linear infinite;
}

.consistency-score {
    font-size: 3.5rem;
    font-weight: 900;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    margin-bottom: 8px;
    z-index: 2;
    position: relative;
}

.consistency-label {
    font-size: 0.9rem;
    color: #6b7280;
    font-weight: 600;
    margin-bottom: 4px;
    z-index: 2;
    position: relative;
}

.consistency-rating {
    font-size: 1.1rem;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 20px;
    z-index: 2;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.85rem;
}

.consistency-rating.excellent {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.consistency-rating.good {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.consistency-rating.average {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.consistency-rating.poor {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

.consistency-details {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.consistency-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.metric-card {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: left 0.5s ease;
    pointer-events: none;
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    border-color: #3b82f6;
}

.metric-card:hover::before {
    left: 100%;
}

.metric-icon {
    font-size: 1.5rem;
    margin-bottom: 8px;
    display: block;
}

.metric-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 4px;
    line-height: 1;
}

.metric-label {
    font-size: 0.8rem;
    color: #6b7280;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.consistency-insights {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    padding: 20px;
    font-style: italic;
    color: #92400e;
    line-height: 1.6;
    position: relative;
}

.consistency-insights::before {
    content: '💡';
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 1.5rem;
}

/* Animations */
@keyframes consistencyPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 0 30px rgba(59, 130, 246, 0.5);
    }
}

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

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

.metric-value.animate {
    animation: countUp 0.8s ease-out;
}

/* Responsive pour Consistency Score */
@media (max-width: 768px) {
    .consistency-dashboard {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }
    
    .consistency-circle {
        width: 180px;
        height: 180px;
    }
    
    .consistency-score {
        font-size: 2.8rem;
    }
    
    .consistency-metrics {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}
}





/* Container principal des rapports */
.report-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-6);
    background: var(--color-white);
    min-height: 100vh;
}

/* Header des rapports */
.report-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-8);
    padding-bottom: var(--spacing-6);
    border-bottom: 2px solid var(--color-gray-200);
}

.report-header .header-left,
.report-header .header-right {
    flex: 0 0 auto;
}

.report-header .header-center {
    flex: 1;
    text-align: center;
}

.report-header h1 {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--color-gray-900);
    margin: 0;
}

.report-metadata {
    margin-top: var(--spacing-3);
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}

/* Main content des rapports */
.report-main {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
}

/* Sections des rapports */
.report-section {
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-8);
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    border: 1px solid var(--color-gray-200);
    position: relative;
}

.section-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-4);
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.section-description {
    color: var(--color-gray-600);
    font-size: var(--font-size-base);
    line-height: 1.6;
    margin-bottom: var(--spacing-6);
}

/* Header de section avec actions */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-4);
}

.section-header h2 {
    margin: 0;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-gray-900);
}

.chart-actions {
    display: flex;
    gap: var(--spacing-3);
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--color-gray-300);
    color: var(--color-gray-700);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--border-radius-lg);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-outline:hover {
    background: var(--color-gray-100);
    border-color: var(--color-gray-400);
    color: var(--color-gray-800);
    transform: translateY(-1px);
}

.btn-sm {
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-sm);
}

/* Container pour les recommandations */
.recommendations-container {
    display: grid;
    gap: var(--spacing-4);
}

.recommendation-card {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-4);
    padding: var(--spacing-6);
    border-radius: var(--border-radius-lg);
    border-left: 4px solid var(--color-primary);
    background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
    transition: all var(--transition-smooth);
}

.recommendation-card:hover {
    transform: translateX(8px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.recommendation-icon {
    font-size: 2rem;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.recommendation-content {
    flex: 1;
}

.recommendation-content h4 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-2);
    color: var(--color-gray-900);
}

.recommendation-content p {
    color: var(--color-gray-700);
    line-height: 1.6;
    margin: 0;
}

/* États de loading et erreur pour rapports */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
}

.loading-overlay.active {
    display: flex;
}

.loading-content {
    text-align: center;
    background: var(--color-white);
    padding: var(--spacing-8);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-xl);
    max-width: 400px;
    width: 90%;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--color-gray-200);
    border-top: 4px solid var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto var(--spacing-4);
}

.error-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.error-content {
    text-align: center;
    max-width: 400px;
    padding: var(--spacing-8);
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-xl);
}

.error-icon {
    font-size: 4rem;
    margin-bottom: var(--spacing-4);
    color: var(--color-gray-400);
}

/* CORRECTION SPÉCIFIQUE CONSISTENCY SCORE */
.consistency-dashboard {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 40px;
    margin: 30px 0;
    align-items: center;
}

.consistency-main {
    display: flex;
    justify-content: center;
    align-items: center;
}

.consistency-circle {
    position: relative;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        #e5e7eb 0deg 360deg
    );
    padding: 8px;
    animation: consistencyPulse 3s ease-in-out infinite;
    transition: all 0.5s ease;
}

.consistency-inner {
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
}

.consistency-inner::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: consistencyShimmer 4s linear infinite;
}

.consistency-score {
    font-size: 3.5rem;
    font-weight: 900;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    margin-bottom: 8px;
    z-index: 2;
    position: relative;
}

.consistency-label {
    font-size: 0.9rem;
    color: #6b7280;
    font-weight: 600;
    margin-bottom: 4px;
    z-index: 2;
    position: relative;
}

.consistency-rating {
    font-size: 1.1rem;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 20px;
    z-index: 2;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.85rem;
}

.consistency-rating.excellent {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.consistency-rating.good {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.consistency-rating.average {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.consistency-rating.poor {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

.consistency-rating.insufficient {
    background: linear-gradient(135deg, #6b7280, #4b5563);
    color: white;
    box-shadow: 0 4px 15px rgba(107, 114, 128, 0.3);
}

.consistency-details {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.consistency-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.metric-card {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: left 0.5s ease;
    pointer-events: none;
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    border-color: #3b82f6;
}

.metric-card:hover::before {
    left: 100%;
}

.metric-icon {
    font-size: 1.5rem;
    margin-bottom: 8px;
    display: block;
}

.metric-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 4px;
    line-height: 1;
}

.metric-label {
    font-size: 0.8rem;
    color: #6b7280;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.consistency-insights {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    padding: 20px;
    color: #92400e;
    line-height: 1.6;
    position: relative;
}

.consistency-insights::before {
    content: '💡';
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 1.5rem;
}

.consistency-insights p {
    margin: 0 0 var(--spacing-3) 0;
    color: inherit;
}

.consistency-insights p:last-child {
    margin-bottom: 0;
}

/* Animations pour Consistency Score */
@keyframes consistencyPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 0 30px rgba(59, 130, 246, 0.5);
    }
}

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

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

.metric-value.animate {
    animation: countUp 0.8s ease-out;
}

/* Responsive pour Consistency Score et rapports */
@media (max-width: 768px) {
    .report-header {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-4);
    }
    
    .report-header .header-left,
    .report-header .header-right {
        order: 2;
    }
    
    .report-header .header-center {
        order: 1;
    }
    
    .section-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-4);
    }
    
    .chart-actions {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .consistency-dashboard {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }
    
    .consistency-circle {
        width: 180px;
        height: 180px;
    }
    
    .consistency-score {
        font-size: 2.8rem;
    }
    
    .consistency-metrics {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .metric-card {
        padding: 15px;
    }
    
    .recommendation-card {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-3);
    }
}

/* =====================================
   STYLES POUR LES 7 CATÉGORIES DÉFINITIVES - À AJOUTER À LA FIN DE /css/style.css
   ===================================== */

/* 1. PUTTING - Vert menthe */
.performance-icon.putting, .performance-category.putting {
    background: linear-gradient(135deg, #10B981, #059669) !important;
}

/* 2. CHIPPING - Orange */
.performance-icon.chipping, .performance-category.chipping {
    background: linear-gradient(135deg, #F59E0B, #D97706) !important;
}

/* 3. WEDGING - Bleu profond */
.performance-icon.wedging, .performance-category.wedging {
    background: linear-gradient(135deg, #2563EB, #1D4ED8) !important;
}

/* 4. BUNKER - Orange intense */
.performance-icon.bunker, .performance-category.bunker {
    background: linear-gradient(135deg, #F97316, #EA580C) !important;
}

/* 5. FERRING - Violet électrique */
.performance-icon.ferring, .performance-category.ferring {
    background: linear-gradient(135deg, #7C3AED, #5B21B6) !important;
}

/* 6. DRIVING - Rouge */
.performance-icon.driving, .performance-category.driving {
    background: linear-gradient(135deg, #EF4444, #DC2626) !important;
}

/* 7. COURSE_MANAGEMENT - Teal/turquoise */
.performance-icon.course_management, .performance-category.course_management {
    background: linear-gradient(135deg, #14B8A6, #0D9488) !important;
}

/* 8. MENTAL - Violet */
.performance-icon.mental, .performance-category.mental {
    background: linear-gradient(135deg, #8B5CF6, #7C3AED) !important;
}

/* Style de fallback pour catégories non définies */
.performance-icon:not(.putting):not(.chipping):not(.wedging):not(.bunker):not(.ferring):not(.driving):not(.course_management):not(.mental),
.performance-category:not(.putting):not(.chipping):not(.wedging):not(.bunker):not(.ferring):not(.driving):not(.course_management):not(.mental) {
    background: linear-gradient(135deg, #6B7280, #4B5563) !important;
}

/* Styles pour l'état vide des filtres */
.empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--color-gray-600);
}

.empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.7;
}

.empty-state h3 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-gray-800);
    margin-bottom: var(--spacing-3);
}

.empty-state p {
    color: var(--color-gray-600);
    line-height: 1.6;
}

/* =====================================
   STYLES POUR LES DATES DE DERNIÈRE RÉALISATION
   À ajouter à la fin de /css/style.css
   ===================================== */

/* Date de dernière réalisation */
.last-test-date {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin: var(--spacing-3) 0;
    padding: var(--spacing-2) var(--spacing-3);
    background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
    border: 1px solid #BAE6FD;
    border-radius: var(--border-radius-lg);
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
    transition: all var(--transition-smooth);
}

.last-test-date:hover {
    background: linear-gradient(135deg, #E0F2FE 0%, #BAE6FD 100%);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.last-test-date .date-icon {
    font-size: 1rem;
    opacity: 0.8;
}

.last-test-date .date-text {
    font-weight: 500;
    line-height: 1.3;
    flex: 1;
}

/* Animation d'apparition */
@keyframes slideInDate {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.last-test-date {
    animation: slideInDate 0.3s ease-out;
}

/* Responsive */
@media (max-width: 768px) {
    .last-test-date {
        padding: var(--spacing-2);
        font-size: 0.8rem;
        margin: var(--spacing-2) 0;
    }
    
    .last-test-date .date-icon {
        font-size: 0.9rem;
    }
}

/* Mode sombre */
@media (prefers-color-scheme: dark) {
    .last-test-date {
        background: linear-gradient(135deg, #1F2937 0%, #374151 100%);
        border-color: #4B5563;
        color: #D1D5DB;
    }
    
    .last-test-date:hover {
        background: linear-gradient(135deg, #374151 0%, #4B5563 100%);
    }
}
/* =====================================
   STYLES POUR TEST VITESSE DE SWING - 3 CLUBS
   À ajouter à la fin de /css/style.css
   ===================================== */

/* Section des clubs */
.clubs-section {
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}

.clubs-info {
    background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
    border: 1px solid #BAE6FD;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
    color: #0369A1;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Conteneur de club */
.club-container {
    background: linear-gradient(135deg, #FAFAFA 0%, #F5F5F5 100%);
    border: 2px solid #E5E7EB;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.club-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    transition: all 0.3s ease;
}

.club-container.club-rouge::before {
    background: linear-gradient(90deg, #EF4444, #DC2626);
}

.club-container.club-vert::before {
    background: linear-gradient(90deg, #10B981, #059669);
}

.club-container.club-bleu::before {
    background: linear-gradient(90deg, #3B82F6, #2563EB);
}

.club-container:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-color: #D1D5DB;
}

.club-container:focus-within {
    border-color: #3B82F6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* En-tête du club */
.club-header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    gap: 12px;
}

.club-color-indicator {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    position: relative;
}

.club-color-indicator.rouge {
    background: linear-gradient(135deg, #EF4444, #DC2626);
}

.club-color-indicator.vert {
    background: linear-gradient(135deg, #10B981, #059669);
}

.club-color-indicator.bleu {
    background: linear-gradient(135deg, #3B82F6, #2563EB);
}

.club-color-indicator::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.9;
}

.club-header h4 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1F2937;
}

/* Conteneur de saisie de vitesse */
.speed-input-container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.speed-input-container label {
    font-weight: 500;
    color: #374151;
    font-size: 0.95rem;
}

.speed-input {
    width: 100%;
    padding: 12px 50px 12px 16px;
    border: 2px solid #D1D5DB;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    background: white;
    transition: all 0.3s ease;
    text-align: center;
}

.speed-input:focus {
    outline: none;
    border-color: #3B82F6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    background: #F8FAFC;
}

.speed-input:valid {
    border-color: #10B981;
}

.unit {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #6B7280;
    font-weight: 500;
    font-size: 0.9rem;
    pointer-events: none;
    margin-top: 12px; /* Pour compenser le label */
}

/* Section résumé */
.summary-section {
    background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
    border: 2px solid #BBF7D0;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    animation: slideInUp 0.5s ease-out;
}

.summary-section h3 {
    color: #065F46;
    margin-bottom: 20px;
    text-align: center;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.summary-card {
    background: white;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 1px solid #E5E7EB;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.summary-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.summary-card.best::before {
    background: linear-gradient(90deg, #F59E0B, #D97706);
}

.summary-card.average::before {
    background: linear-gradient(90deg, #3B82F6, #2563EB);
}

.summary-card.difference::before {
    background: linear-gradient(90deg, #8B5CF6, #7C3AED);
}

.summary-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.summary-icon {
    font-size: 2rem;
    margin-bottom: 12px;
}

.summary-label {
    font-size: 0.85rem;
    color: #6B7280;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.summary-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1F2937;
    margin-bottom: 4px;
    line-height: 1;
}

.summary-club {
    font-size: 0.9rem;
    color: #4B5563;
    font-weight: 500;
}

/* Animations */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation du spinner de chargement */
.loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 1s linear infinite;
    margin-right: 8px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Feux d'artifice */
.fireworks-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    display: none;
}

.firework {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    animation: fireworkAnimation 1s ease-out forwards;
}

@keyframes fireworkAnimation {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(8);
        opacity: 0.8;
    }
    100% {
        transform: scale(15);
        opacity: 0;
    }
}

/* Message de succès */
.success-message {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
}

.success-content {
    background: white;
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    max-width: 400px;
    width: 90%;
    transform: scale(0.8);
    opacity: 0;
    transition: all 0.3s ease;
}

.success-content.animate-in {
    transform: scale(1);
    opacity: 1;
}

.success-icon {
    font-size: 4rem;
    margin-bottom: 20px;
}

.success-content h3 {
    color: #1F2937;
    margin-bottom: 12px;
    font-size: 1.5rem;
}

.success-content p {
    color: #6B7280;
    margin-bottom: 24px;
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 768px) {
    .clubs-section {
        padding: 16px;
    }
    
    .club-container {
        padding: 16px;
        margin-bottom: 16px;
    }
    
    .club-header h4 {
        font-size: 1.1rem;
    }
    
    .speed-input {
        padding: 10px 40px 10px 12px;
        font-size: 1rem;
    }
    
    .summary-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .summary-card {
        padding: 16px;
    }
    
    .summary-value {
        font-size: 1.5rem;
    }
    
    .success-content {
        padding: 30px 20px;
    }
    
    .success-content h3 {
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    .unit {
        right: 12px;
        font-size: 0.8rem;
    }
    
    .club-color-indicator {
        width: 20px;
        height: 20px;
    }
    
    .club-color-indicator::after {
        width: 6px;
        height: 6px;
    }
}

/* ======================================== 
   STYLES CSS À AJOUTER POUR SPEEDCLUBS 
   ======================================== */

/* Conteneur de barre de progression */
.progress-container {
    margin-top: 8px;
    height: 6px;
    background: #E5E7EB;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

/* Barre de progression */
.progress-bar {
    height: 100%;
    width: 0%;
    border-radius: 3px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* Couleurs des barres de progression par club */
.progress-bar[data-club="vert"] {
    background: linear-gradient(90deg, #10B981, #059669);
}

.progress-bar[data-club="bleu"] {
    background: linear-gradient(90deg, #3B82F6, #2563EB);
}

.progress-bar[data-club="rouge"] {
    background: linear-gradient(90deg, #EF4444, #DC2626);
}

/* Effet brillant sur la barre de progression */
.progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.4), 
        transparent
    );
    animation: shimmer 2s infinite;
    pointer-events: none;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* États visuels des conteneurs de club */
.club-container {
    transition: all 0.3s ease;
    position: relative;
}

/* État lors de la saisie */
.club-container.typing {
    transform: scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.club-container.typing .club-color-indicator {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
}

/* État terminé */
.club-container.completed {
    border-color: #10B981;
    background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
}

.club-container.completed .club-header h4 {
    color: #065F46;
}

.club-container.completed .speed-input {
    border-color: #10B981;
    background: #F0FDF4;
}

/* Indicateur de validation visuelle */
.club-container.completed::after {
    content: '✓';
    position: absolute;
    top: 10px;
    right: 10px;
    color: #10B981;
    font-size: 1.2rem;
    font-weight: bold;
    animation: checkmarkAppear 0.5s ease;
}

@keyframes checkmarkAppear {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* État du bouton prêt */
.btn-ready {
    background: linear-gradient(135deg, #10B981, #059669) !important;
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
    animation: readyPulse 2s infinite;
}

@keyframes readyPulse {
    0%, 100% {
        box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
    }
    50% {
        box-shadow: 0 12px 35px rgba(16, 185, 129, 0.5);
    }
}

/* Animations d'entrée pour le message de succès */
.success-content {
    transform: scale(0.8);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.success-content.animate-in {
    transform: scale(1);
    opacity: 1;
}

/* Amélioration des feux d'artifice */
.firework {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    animation: explode 1s ease-out forwards;
}

@keyframes explode {
    0% {
        opacity: 1;
        transform: scale(0);
    }
    20% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1) translateY(-100px);
    }
}

/* Améliorations des effets hover pour les club-containers */
.club-container:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.club-container:hover .club-color-indicator {
    transform: scale(1.05);
}

/* Responsive pour les barres de progression */
@media (max-width: 768px) {
    .progress-container {
        margin-top: 6px;
        height: 4px;
    }
    
    .club-container.typing {
        transform: scale(1.01);
    }
    
    .btn-ready {
        transform: scale(1.02);
    }
}
/* =====================================
   STYLES POUR LES RAPPORTS SPEEDCLUBS - À AJOUTER À LA FIN DE /css/style.css
   ===================================== */

/* Container principal des rapports */
.report-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-6);
    background: var(--color-white);
    min-height: 100vh;
}

/* Header des rapports */
.report-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-8);
    padding: var(--spacing-6);
    background: linear-gradient(135deg, #F8FAFC 0%, #E2E8F0 100%);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-gray-200);
}

.header-left, .header-right {
    flex: 0 0 auto;
}

.header-center {
    flex: 1;
    text-align: center;
}

.report-header h1 {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--color-gray-900);
    margin: 0;
}

.report-metadata {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin-top: var(--spacing-2);
}

/* Sections de rapport */
.report-main {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
}

.report-section {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-6);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.report-section h2 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-4);
    padding-bottom: var(--spacing-3);
    border-bottom: 2px solid var(--color-gray-100);
}

/* Headers de section avec actions */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-4);
}

.chart-actions {
    display: flex;
    gap: var(--spacing-2);
}

/* Container pour graphiques */
.chart-container {
    position: relative;
    margin-bottom: var(--spacing-4);
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-4);
    border: 1px solid var(--color-gray-200);
}

.chart-wrapper {
    position: relative;
    height: 400px;
}

/* Styles pour les statistiques speedclubs */
.speedclubs-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

.speed-stat-card {
    background: linear-gradient(135deg, var(--color-white) 0%, #F9FAFB 100%);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-5);
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--color-gray-200);
    transition: all var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.speed-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.speed-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}

/* Couleurs spécifiques pour chaque club */
.speed-stat-card.club-vert::before {
    background: linear-gradient(90deg, #10B981, #059669);
}

.speed-stat-card.club-bleu::before {
    background: linear-gradient(90deg, #3B82F6, #2563EB);
}

.speed-stat-card.club-rouge::before {
    background: linear-gradient(90deg, #EF4444, #DC2626);
}

.speed-stat-card.club-global::before {
    background: linear-gradient(90deg, #8B5CF6, #7C3AED);
}

.speed-stat-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
}

.club-indicator {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.club-indicator.vert {
    background: linear-gradient(135deg, #10B981, #059669);
}

.club-indicator.bleu {
    background: linear-gradient(135deg, #3B82F6, #2563EB);
}

.club-indicator.rouge {
    background: linear-gradient(135deg, #EF4444, #DC2626);
}

.speed-stat-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-gray-900);
    margin: 0;
}

.speed-stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-gray-900);
    margin: var(--spacing-2) 0;
    line-height: 1;
}

.speed-stat-unit {
    font-size: var(--font-size-lg);
    color: var(--color-gray-600);
    font-weight: 500;
}

.speed-stat-change {
    font-size: var(--font-size-sm);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-1);
    margin-top: var(--spacing-2);
}

.speed-stat-change.positive {
    color: #059669;
}

.speed-stat-change.negative {
    color: #DC2626;
}

.speed-stat-change.neutral {
    color: var(--color-gray-600);
}

/* Progression des clubs */
.clubs-progression {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-6);
}

.club-progress-card {
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-5);
    border: 2px solid transparent;
    transition: all var(--transition-smooth);
    position: relative;
}

.club-progress-card.vert {
    border-color: #10B981;
    background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
}

.club-progress-card.bleu {
    border-color: #3B82F6;
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
}

.club-progress-card.rouge {
    border-color: #EF4444;
    background: linear-gradient(135deg, #FEF2F2 0%, #FECACA 100%);
}

.club-progress-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
}

.club-progress-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin: 0;
}

.club-progress-card.vert .club-progress-title {
    color: #065F46;
}

.club-progress-card.bleu .club-progress-title {
    color: #1E40AF;
}

.club-progress-card.rouge .club-progress-title {
    color: #991B1B;
}

/* Loading et error states */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.3s ease;
}

.loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.loading-content {
    text-align: center;
    max-width: 300px;
}

.loading-spinner {
    width: 60px;
    height: 60px;
    border: 6px solid #E5E7EB;
    border-top-color: #3B82F6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto var(--spacing-4);
}

.error-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.error-content {
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-8);
    text-align: center;
    max-width: 400px;
    margin: var(--spacing-4);
}

.error-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-4);
}

/* Responsive design */
@media (max-width: 768px) {
    .report-container {
        padding: var(--spacing-4);
    }
    
    .report-header {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-4);
    }
    
    .header-left, .header-right {
        order: 2;
    }
    
    .header-center {
        order: 1;
    }
    
    .speedclubs-stats {
        grid-template-columns: 1fr;
    }
    
    .clubs-progression {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
    }
    
    .chart-wrapper {
        height: 300px;
    }
    
    .section-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-3);
    }
    
    .chart-actions {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .report-header h1 {
        font-size: var(--font-size-2xl);
    }
    
    .speed-stat-value {
        font-size: 2rem;
    }
}
/* =====================================
   AJOUTS CSS POUR SPEEDCLUBS
   À ajouter à la fin de /css/style.css
   ===================================== */

/* Style pour la date dans les cartes de statistiques */
.speed-stat-date {
    margin-top: var(--spacing-2);
    padding: var(--spacing-1) var(--spacing-2);
    background: rgba(0, 0, 0, 0.05);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    color: var(--color-gray-600);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
}

/* Adaptation de la grille pour exactement 3 colonnes */
.speedclubs-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* Ajustement des cartes pour être plus compactes */
.speed-stat-card {
    background: linear-gradient(135deg, var(--color-white) 0%, #F9FAFB 100%);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-4);
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--color-gray-200);
    transition: all var(--transition-smooth);
    position: relative;
    overflow: hidden;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Responsive pour les cartes speedclubs */
@media (max-width: 768px) {
    .speedclubs-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--spacing-3);
    }
}

@media (max-width: 480px) {
    .speedclubs-stats {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-3);
    }
    
    .speed-stat-card {
        min-height: 140px;
        padding: var(--spacing-3);
    }
    
    .speed-stat-value {
        font-size: 2rem;
    }
    
    .speed-stat-date {
        font-size: 0.7rem;
        padding: var(--spacing-1);
    }
}

/* ========================================
   DISPERSION DRIVING — Test interactif
   ======================================== */

.dispersion-scoring-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4);
    justify-content: center;
}

.dispersion-scoring-legend .legend-item {
    padding: var(--spacing-3) var(--spacing-5);
    border-radius: var(--border-radius-lg);
    font-size: var(--font-size-sm);
    font-weight: 500;
    border: 2px solid transparent;
}

.dispersion-scoring-legend .legend-item span {
    display: block;
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: var(--spacing-1);
}

.legend-miss {
    background: #FEE2E2;
    color: #991B1B;
    border-color: #FECACA;
}

.legend-rough {
    background: #FEF3C7;
    color: #92400E;
    border-color: #FDE68A;
}

.legend-fairway {
    background: #DCFCE7;
    color: #166534;
    border-color: #BBF7D0;
}

.dispersion-interactive-section {
    border: 2px solid var(--color-primary);
    background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
}

.dispersion-session-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
    padding: var(--spacing-4);
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-gray-200);
}

.dispersion-current-shot,
.dispersion-live-score {
    font-size: var(--font-size-lg);
    color: var(--color-gray-700);
}

.dispersion-live-score strong {
    color: var(--color-primary);
    font-size: var(--font-size-2xl);
}

.dispersion-fairway-hint {
    text-align: center;
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-4);
    font-size: var(--font-size-sm);
}

.dispersion-fairway-stage {
    position: relative;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    min-height: 200px;
}

.dispersion-fairway-stage.is-transitioning {
    pointer-events: none;
}

.dispersion-shot-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.96);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.42s ease, visibility 0.42s ease;
    z-index: 2;
    pointer-events: none;
}

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

.dispersion-shot-feedback {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    z-index: 3;
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
    text-align: center;
    padding: var(--spacing-4);
}

.dispersion-shot-feedback.visible {
    opacity: 1;
    transform: scale(1);
}

.dispersion-shot-feedback .feedback-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-gray-900);
}

.dispersion-shot-feedback .feedback-subtitle {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-primary);
}

.dispersion-zones-row.zones-hidden {
    opacity: 0;
    transform: scale(0.97);
    transition: opacity 0.32s ease, transform 0.32s ease;
}

.dispersion-zones-row.zones-reveal {
    animation: dispersionZonesReveal 0.52s ease forwards;
}

@keyframes dispersionZonesReveal {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.dispersion-current-shot.pulse-next {
    animation: dispersionShotPulse 0.55s ease;
}

@keyframes dispersionShotPulse {
    0% { transform: scale(1); }
    35% { transform: scale(1.06); color: var(--color-primary); }
    100% { transform: scale(1); }
}

.dispersion-current-shot.pulse-next #current-shot-num {
    color: var(--color-primary);
    display: inline-block;
    animation: dispersionNumPop 0.55s ease;
}

@keyframes dispersionNumPop {
    0% { transform: scale(1); }
    40% { transform: scale(1.35); }
    100% { transform: scale(1); }
}

.dispersion-direction {
    text-align: center;
    font-weight: 600;
    color: var(--color-gray-500);
    margin-bottom: var(--spacing-3);
    font-size: var(--font-size-sm);
}

.dispersion-zones-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1.4fr 1fr 1fr;
    gap: var(--spacing-2);
    min-height: 140px;
}

.dispersion-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    border: 2px solid transparent;
    border-radius: var(--border-radius-lg);
    cursor: pointer;
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast), transform 0.15s ease;
    padding: var(--spacing-3);
    font-family: inherit;
}

.dispersion-zone:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.dispersion-zone:not(:disabled):hover {
    box-shadow: var(--shadow-lg);
    transform: scale(1.02);
}

.dispersion-zone.zone-flash {
    transform: scale(1.05);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.35);
}

.zone-miss-left,
.zone-miss-right {
    background: linear-gradient(180deg, #FEE2E2 0%, #FECACA 100%);
    border-color: #F87171;
    color: #991B1B;
}

.zone-rough-left,
.zone-rough-right {
    background: linear-gradient(180deg, #FEF3C7 0%, #FDE68A 100%);
    border-color: #F59E0B;
    color: #92400E;
}

.zone-fairway {
    background: linear-gradient(180deg, #BBF7D0 0%, #4ADE80 100%);
    border-color: #16A34A;
    color: #14532D;
}

.zone-label {
    font-weight: 700;
    font-size: var(--font-size-sm);
}

.zone-points {
    font-size: var(--font-size-xl);
    font-weight: 700;
}

.dispersion-lateral-summary {
    margin-top: var(--spacing-8);
    padding-top: var(--spacing-6);
    border-top: 1px solid var(--color-gray-200);
}

.dispersion-lateral-summary h4,
.dispersion-shots-track h4 {
    margin-bottom: var(--spacing-4);
    color: var(--color-gray-800);
    font-size: var(--font-size-lg);
}

.dispersion-lateral-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

.lateral-stat {
    text-align: center;
    padding: var(--spacing-4);
    background: var(--color-gray-50);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-gray-200);
}

.lateral-stat strong {
    display: block;
    font-size: var(--font-size-2xl);
    color: var(--color-primary);
    margin-top: var(--spacing-2);
}

.lateral-left .lateral-icon { color: #DC2626; }
.lateral-center .lateral-icon { color: #16A34A; }
.lateral-right .lateral-icon { color: #2563EB; }

.dispersion-lateral-bar {
    display: flex;
    height: 12px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--color-gray-200);
}

.lateral-bar-left {
    background: #F87171;
    transition: width 0.3s ease;
}

.lateral-bar-center {
    background: #22C55E;
    transition: width 0.3s ease;
}

.lateral-bar-right {
    background: #3B82F6;
    transition: width 0.3s ease;
}

.dispersion-shots-track {
    margin-top: var(--spacing-8);
}

.dispersion-shots-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: var(--spacing-2);
}

.dispersion-shot-dot {
    aspect-ratio: 1;
    border-radius: var(--border-radius-lg);
    border: 2px solid var(--color-gray-300);
    background: var(--color-white);
    font-weight: 700;
    font-size: var(--font-size-sm);
    cursor: default;
    transition: all var(--transition-fast);
    font-family: inherit;
}

.dispersion-shot-dot.empty {
    color: var(--color-gray-400);
    background: var(--color-gray-50);
}

.dispersion-shot-dot.current {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.dispersion-shot-dot.filled {
    color: var(--color-white);
    cursor: pointer;
}

.dispersion-shot-dot.filled.zone-fairway {
    background: #16A34A;
    border-color: #15803D;
}

.dispersion-shot-dot.filled.zone-rough_left,
.dispersion-shot-dot.filled.zone-rough_right {
    background: #F59E0B;
    border-color: #D97706;
}

.dispersion-shot-dot.filled.zone-miss_left,
.dispersion-shot-dot.filled.zone-miss_right {
    background: #DC2626;
    border-color: #B91C1C;
}

@media (max-width: 768px) {
    .dispersion-zones-row {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .dispersion-zone {
        min-height: 64px;
        flex-direction: row;
        justify-content: space-between;
    }

    .dispersion-shots-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .dispersion-lateral-stats {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   DRILL PUTTING 4-5-6 M — Test interactif
   ======================================== */

.putting456-scoring-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    justify-content: center;
}

.putting456-scoring-legend .legend-item {
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--border-radius-lg);
    font-size: var(--font-size-sm);
    font-weight: 500;
    border: 2px solid transparent;
}

.putting456-scoring-legend .legend-item span {
    display: block;
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: var(--spacing-1);
}

.putting456-scoring-legend .legend-made {
    background: #DCFCE7;
    color: #166534;
    border-color: #BBF7D0;
}

.putting456-scoring-legend .legend-lag {
    background: #DCFCE7;
    color: #166534;
    border-color: #BBF7D0;
}

.putting456-scoring-legend .legend-short {
    background: #FEE2E2;
    color: #991B1B;
    border-color: #FECACA;
}

.putting456-scoring-legend .legend-long-made {
    background: #FEF3C7;
    color: #92400E;
    border-color: #FDE68A;
}

.putting456-scoring-legend .legend-long-missed {
    background: #FEE2E2;
    color: #7F1D1D;
    border-color: #FCA5A5;
}

.putting456-interactive-section {
    border: 2px solid #059669;
    background: linear-gradient(180deg, #F0FDF4 0%, #FFFFFF 100%);
}

/* --- Mobile-first touch UI --- */

.putting456-body {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.putting456-test .test-container,
.putting456-test.test-container {
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}

.putting456-header-compact h1 {
    font-size: 1.35rem;
}

.putting456-back .btn {
    min-height: 44px;
}

.putting456-info-box {
    margin-bottom: var(--spacing-3);
}

.putting456-info-box h3 {
    font-size: 1rem;
    margin-bottom: var(--spacing-2);
}

.putting456-info-box ol {
    margin: 0;
    padding-left: 1.25rem;
}

.putting456-info-box li + li {
    margin-top: var(--spacing-2);
}

.putting456-scoring-section h3 {
    font-size: 1rem;
    margin-bottom: var(--spacing-3);
    text-align: center;
}

.putting456-scoring-section .putting456-scoring-legend {
    gap: var(--spacing-2);
}

.putting456-scoring-section .putting456-scoring-legend .legend-item {
    flex: 1 1 calc(50% - var(--spacing-2));
    min-width: 140px;
    text-align: center;
    padding: var(--spacing-2) var(--spacing-3);
}

.putting456-details {
    margin-bottom: var(--spacing-3);
    padding: var(--spacing-3);
    background: #f9fafb;
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-gray-200);
}

.putting456-details summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}

.putting456-details summary::-webkit-details-marker {
    display: none;
}

.putting456-date-compact {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
}

.putting456-date-compact label {
    font-weight: 600;
    white-space: nowrap;
}

.putting456-date-compact .form-input {
    flex: 1;
    min-height: 44px;
}

.putting456-status-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-gray-200);
}

.putting456-status-bar .status-item {
    text-align: center;
}

.putting456-status-bar .status-label {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-gray-500);
    margin-bottom: 2px;
}

.putting456-status-bar .status-item strong {
    font-size: 1.35rem;
    line-height: 1.1;
    color: var(--color-gray-900);
}

.putting456-status-bar .status-item strong small {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-gray-500);
}

.putting456-status-bar .status-distance {
    background: linear-gradient(135deg, #059669, #10B981);
    border-radius: var(--border-radius-lg);
    color: #fff;
    padding: var(--spacing-2) var(--spacing-1);
}

.putting456-status-bar .status-distance .status-label,
.putting456-status-bar .status-distance strong,
.putting456-status-bar .status-distance strong small {
    color: #fff;
}

.putting456-status-bar .status-distance.pulse-distance {
    animation: putting456DistancePulse 0.5s ease;
}

.putting456-status-bar .status-distance.is-complete {
    background: linear-gradient(135deg, #047857, #059669);
}

.putting456-status-bar .status-distance[data-distance="4"],
.putting456-status-bar .status-distance[data-distance="5"],
.putting456-status-bar .status-distance[data-distance="6"] {
    box-shadow: 0 2px 10px rgba(5, 150, 105, 0.35);
}

.putting456-points-track {
    position: relative;
    height: 10px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: var(--spacing-4);
}

.putting456-points-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #059669, #34D399);
    border-radius: 999px;
    transition: width 0.4s ease;
}

.putting456-points-fill.is-complete {
    background: linear-gradient(90deg, #047857, #10B981);
}

@keyframes putting456DistancePulse {
    0% { transform: scale(1); }
    35% { transform: scale(1.06); }
    100% { transform: scale(1); }
}

@keyframes putting456ZonesReveal {
    from { opacity: 0.35; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

.putting456-touch-panel {
    margin-bottom: var(--spacing-4);
}

.putting456-touch-panel.is-transitioning {
    pointer-events: none;
}

.putting456-touch-hint {
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-2);
}

.putting456-touch-ladder {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
    padding: 0 var(--spacing-1);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.putting456-touch-ladder .ladder-line {
    flex: 1;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #dc2626 0%, #ea580c 25%, #16a34a 50%, #166534 75%, #dc2626 100%);
    opacity: 0.45;
}

.putting456-touch-ladder .ladder-you {
    color: #64748b;
}

.putting456-touch-ladder .ladder-beyond {
    color: #64748b;
}

.putting456-touch-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.putting456-touch-buttons.zones-hidden,
.putting456-zones-stack.zones-hidden {
    opacity: 0.35;
    transform: scale(0.98);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.putting456-touch-buttons.zones-reveal,
.putting456-zones-stack.zones-reveal {
    animation: putting456ZonesReveal 0.4s ease forwards;
}

.putting456-touch-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    width: 100%;
    min-height: 62px;
    padding: var(--spacing-3) var(--spacing-4);
    padding-left: calc(var(--spacing-4) + 4px);
    border: none;
    border-radius: 14px;
    cursor: pointer;
    text-align: left;
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1),
                box-shadow 0.25s ease,
                filter 0.15s ease;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14);
}

.putting456-touch-btn:active:not(:disabled),
.putting456-touch-btn.zone-pressed {
    transform: scale(0.97);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18) inset;
    filter: brightness(0.95);
}

.putting456-touch-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.putting456-touch-btn.zone-flash {
    animation: putting456TouchPop 0.48s cubic-bezier(0.34, 1.45, 0.64, 1);
}

@keyframes putting456TouchPop {
    0% { transform: scale(1); }
    35% { transform: scale(0.96); filter: brightness(0.92); }
    65% { transform: scale(1.02); filter: brightness(1.08); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22); }
    100% { transform: scale(1); filter: brightness(1); }
}

.touch-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: scale(0);
    opacity: 0.85;
    animation: putting456Ripple 0.55s ease-out forwards;
    pointer-events: none;
}

@keyframes putting456Ripple {
    to {
        transform: scale(2.8);
        opacity: 0;
    }
}

.putting456-touch-btn .touch-step {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
}

.putting456-touch-btn.zone-hole {
    min-height: 72px;
    background: linear-gradient(135deg, #14532d 0%, #15803d 100%);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 14px rgba(20, 83, 45, 0.35);
}

.putting456-touch-btn.zone-lag {
    background: linear-gradient(135deg, #15803d 0%, #16a34a 100%);
    color: #fff;
}

.putting456-touch-btn.zone-short,
.putting456-touch-btn.zone-long-missed {
    background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
    color: #fff;
}

.putting456-touch-btn.zone-long-made {
    background: linear-gradient(135deg, #c2410c 0%, #ea580c 100%);
    color: #fff;
}

.putting456-touch-btn .touch-text {
    flex: 1;
    min-width: 0;
    margin-left: 22px;
}

.putting456-touch-btn .touch-dot,
.putting456-touch-btn .touch-visual-hole {
    margin-left: 22px;
}

.putting456-touch-btn.zone-hole .touch-text {
    margin-left: 0;
}

.putting456-touch-btn .touch-label {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

.putting456-touch-btn .touch-sub {
    display: block;
    font-size: 0.75rem;
    opacity: 0.9;
    margin-top: 2px;
}

.putting456-touch-btn .touch-pts {
    font-size: 1.2rem;
    font-weight: 800;
    flex-shrink: 0;
    min-width: 36px;
    text-align: center;
}

.putting456-touch-btn .pts-plus { color: #fef08a; }
.putting456-touch-btn .pts-minus { color: #fecaca; }
.putting456-touch-btn .pts-zero { color: #ffedd5; }

/* Visuel trou + balle */
.touch-visual-hole {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.touch-visual-hole .cup {
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: #0c0a09;
    border: 3px solid #052e16;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
}

.touch-visual-hole .ball {
    position: absolute;
    top: 6px;
    left: 50%;
    width: 22px;
    height: 22px;
    margin-left: -11px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff, #9ca3af);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.touch-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.6);
}

.touch-dot-green { background: #bbf7d0; }
.touch-dot-red { background: #fecaca; }
.touch-dot-orange { background: #fed7aa; }

.putting456-toast {
    margin-top: var(--spacing-3);
    padding: var(--spacing-3);
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
    border-radius: var(--border-radius-lg);
    text-align: center;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.25s ease, max-height 0.25s ease, padding 0.25s ease, margin 0.25s ease;
}

.putting456-toast.visible {
    opacity: 1;
    max-height: 80px;
}

.putting456-toast .toast-title {
    display: block;
    font-weight: 700;
    font-size: var(--font-size-base);
    color: #065f46;
}

.putting456-toast .toast-sub {
    display: block;
    font-size: var(--font-size-sm);
    color: #047857;
    margin-top: 2px;
}

.status-putt.pulse-next {
    animation: putting456PuttPulse 0.5s ease;
}

@keyframes putting456PuttPulse {
    0% { transform: scale(1); }
    35% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.status-putt.pulse-next #current-putt-num {
    color: #059669;
}

.putting456-putts-track h4 {
    margin-bottom: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}

.putting456-putts-scroll {
    display: flex;
    gap: var(--spacing-2);
    overflow-x: auto;
    padding-bottom: var(--spacing-2);
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
}

.putting456-putt-chip {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    min-height: 56px;
    padding: var(--spacing-2);
    border-radius: 12px;
    font-size: 0.7rem;
    color: #fff;
    scroll-snap-align: start;
}

.putting456-putt-chip.zone-hole { background: #166534; }
.putting456-putt-chip.zone-lag { background: #16a34a; }
.putting456-putt-chip.zone-short,
.putting456-putt-chip.zone-long-missed { background: #dc2626; }
.putting456-putt-chip.zone-long-made { background: #ea580c; color: #fff; }

.putting456-putt-chip.chip-next {
    background: #f3f4f6;
    color: var(--color-gray-600);
    border: 2px dashed #059669;
}

.putting456-putt-chip.last-played {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #059669;
    cursor: pointer;
}

.putting456-putt-chip .chip-num { font-weight: 700; }
.putting456-putt-chip .chip-pts { font-weight: 800; font-size: 0.85rem; }

.putting456-actions-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: grid;
    grid-template-columns: 1fr 1fr 1.4fr;
    gap: var(--spacing-2);
    padding: var(--spacing-3);
    padding-bottom: calc(var(--spacing-3) + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid var(--color-gray-200);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(8px);
}

.putting456-actions-bar .btn {
    min-height: 48px;
    font-size: 0.9rem;
    padding: var(--spacing-2) var(--spacing-3);
}

.putting456-actions-bar #save-btn.btn-ready {
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.35);
}

.putting456-stats-details {
    margin-top: var(--spacing-3);
}

.putting456-outcome-summary h4,
.putting456-putts-track h4 {
    margin-bottom: var(--spacing-3);
    font-size: var(--font-size-base);
    color: var(--color-gray-700);
}

.putting456-outcome-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
}

.putting456-outcome-stats .outcome-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-2);
    background: #f9fafb;
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
}

.putting456-outcome-stats .stat-icon {
    font-size: 1.25rem;
}

.putting456-outcome-stats .stat-label {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
}

.putting456-outcome-stats strong {
    font-size: var(--font-size-lg);
}

.putting456-outcome-bar {
    display: flex;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: #e5e7eb;
}

.putting456-outcome-bar > div {
    height: 100%;
    transition: width 0.35s ease;
    min-width: 0;
}

.outcome-bar-made { background: #22C55E; }
.outcome-bar-lag { background: #3B82F6; }
.outcome-bar-short { background: #EF4444; }
.outcome-bar-long-made { background: #F59E0B; }
.outcome-bar-long-missed { background: #991B1B; }

.putting456-putts-track {
    padding: var(--spacing-4);
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-gray-200);
}

.putting456-putts-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    min-height: 60px;
}

.putting456-putt-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 72px;
    border-radius: var(--border-radius-lg);
    border: 2px solid var(--color-gray-200);
    background: var(--color-white);
    font-size: var(--font-size-xs);
    transition: transform 0.15s ease;
}

.putting456-putt-dot.filled {
    cursor: pointer;
    border: none;
    color: #fff;
    font-weight: 600;
}

.putting456-putt-dot.filled:hover {
    transform: scale(1.08);
}

.putting456-putt-dot.filled.zone-hole { background: #16A34A; }
.putting456-putt-dot.filled.zone-lag { background: #2563EB; }
.putting456-putt-dot.filled.zone-short { background: #DC2626; }
.putting456-putt-dot.filled.zone-long-made { background: #F59E0B; color: #1f2937; }
.putting456-putt-dot.filled.zone-long-missed { background: #991B1B; }

.putting456-putt-dot.current {
    border: 2px dashed #059669;
    background: #ECFDF5;
    animation: putting456CurrentPulse 1.5s ease infinite;
}

@keyframes putting456CurrentPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.3); }
    50% { box-shadow: 0 0 0 6px rgba(5, 150, 105, 0); }
}

.putting456-putt-dot.last-played {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.8), 0 0 0 5px #059669;
}

.putting456-putt-dot .dot-num {
    font-weight: 700;
    font-size: var(--font-size-sm);
}

.putting456-putt-dot .dot-dist {
    opacity: 0.85;
}

.putting456-putt-dot .dot-points {
    font-weight: 800;
    font-size: var(--font-size-base);
}

.putting456-empty {
    color: #9ca3af;
    text-align: center;
    padding: var(--spacing-4);
    width: 100%;
}

/* Rapport Putting 4-5-6 m */

.putting456-report-hero {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: flex-start;
}

.putting456-score-badge {
    min-width: 160px;
    padding: 1.5rem;
    border-radius: 16px;
    text-align: center;
    color: #fff;
}

.putting456-score-badge.elite { background: linear-gradient(135deg, #047857, #059669); }
.putting456-score-badge.tour { background: linear-gradient(135deg, #059669, #10B981); }
.putting456-score-badge.average { background: linear-gradient(135deg, #D97706, #F59E0B); }
.putting456-score-badge.needs-work { background: linear-gradient(135deg, #DC2626, #EF4444); }

.putting456-score-value {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
}

.putting456-score-label {
    font-size: 0.95rem;
    opacity: 0.95;
    margin-top: 0.25rem;
}

.putting456-score-date {
    font-size: 0.85rem;
    opacity: 0.85;
    margin-top: 0.5rem;
}

.putting456-hero-metrics {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-content: flex-start;
}

.putting456-metric-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.6rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    min-width: 90px;
}

.putting456-metric-pill .pill-label {
    font-size: 0.8rem;
    color: #6b7280;
}

.putting456-tour-compare {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.95rem;
    margin-top: 0.5rem;
}

.putting456-tour-compare.above-tour {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #6ee7b7;
}

.putting456-tour-compare.below-tour {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fdba74;
}

.putting456-report-charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.putting456-report-chart-card {
    background: #f9fafb;
    border-radius: 12px;
    padding: 1rem;
    border: 1px solid #e5e7eb;
}

.putting456-report-putts-detail {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 360px;
    overflow-y: auto;
}

.putting456-report-putt-row {
    display: grid;
    grid-template-columns: 40px 60px 1fr 70px 70px;
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: #f9fafb;
    border-radius: 8px;
    font-size: 0.9rem;
}

.putting456-history-table .above-tour { color: #059669; font-weight: 600; }
.putting456-history-table .below-tour { color: #DC2626; }

@media (min-width: 769px) {
    .putting456-test.test-container {
        max-width: 420px;
        margin: 0 auto;
        padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
    }

    .putting456-actions-bar {
        max-width: 480px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
    }
}

@media (max-width: 768px) {
    .putting456-outcome-stats {
        grid-template-columns: repeat(3, 1fr);
    }

    .putting456-report-putt-row {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }

    .putting456-header-compact .test-subtitle {
        font-size: 0.85rem;
    }
}

/* ========================================
   UP & DOWN 9-HOLE CHALLENGE — Test + Rapport
   ======================================== */

.updown9-body {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    overflow-x: hidden;
    max-width: 100vw;
}

.updown9-test.test-container {
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
}

.updown9-test-content {
    gap: var(--spacing-4);
}

.updown9-test .test-header.updown9-header-compact {
    margin-bottom: var(--spacing-4);
    padding: var(--spacing-4);
}

.updown9-details {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-3) var(--spacing-4);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.updown9-details summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-gray-800);
    list-style: none;
}

.updown9-details summary::-webkit-details-marker {
    display: none;
}

.updown9-details[open] summary {
    margin-bottom: var(--spacing-3);
}

.updown9-info-details ol {
    margin: 0;
    padding-left: 1.25rem;
}

.updown9-info-details li + li {
    margin-top: var(--spacing-2);
}

.updown9-interactive-section {
    border: 2px solid #D97706;
    background: linear-gradient(180deg, #FFFBEB 0%, #FFFFFF 100%);
}

.updown9-header-compact h1 {
    font-size: 1.35rem;
}

.updown9-back .btn {
    min-height: 44px;
}

.updown9-info-box {
    margin-bottom: var(--spacing-3);
}

.updown9-info-box h3 {
    font-size: 1rem;
    margin-bottom: var(--spacing-2);
}

.updown9-info-box ol {
    margin: 0;
    padding-left: 1.25rem;
}

.updown9-info-box li + li {
    margin-top: var(--spacing-2);
}

.updown9-date-compact {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: 0;
    padding: var(--spacing-3);
    box-shadow: none;
}

.updown9-date-compact label {
    font-weight: 600;
    white-space: nowrap;
}

.updown9-date-compact .form-input {
    flex: 1;
    min-height: 44px;
}

.updown9-status-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.updown9-status-bar .status-item {
    text-align: center;
    min-width: 0;
}

.updown9-status-bar .status-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-gray-500);
    margin-bottom: 2px;
}

.updown9-status-bar .status-item strong {
    display: block;
    font-size: 1.15rem;
    color: var(--color-gray-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.updown9-status-bar .status-item strong small {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-gray-500);
}

.updown9-status-bar .score-under { color: #16A34A; }
.updown9-status-bar .score-even { color: #2563EB; }
.updown9-status-bar .score-over { color: #DC2626; }

.updown9-lie-badge {
    border-radius: 10px;
    transition: background 0.3s ease, color 0.3s ease;
}

.updown9-lie-badge.lie-fairway { background: #ecfdf5; color: #047857; }
.updown9-lie-badge.lie-bunker { background: #fffbeb; color: #b45309; }
.updown9-lie-badge.lie-rough { background: #fef2f2; color: #b91c1c; }
.updown9-lie-badge.lie-fringe { background: #ecfeff; color: #0e7490; }
.updown9-lie-badge.lie-short { background: #eff6ff; color: #1d4ed8; }
.updown9-lie-badge.lie-long { background: #f5f3ff; color: #6d28d9; }
.updown9-lie-badge.is-complete { background: #f3f4f6; color: #6b7280; }

.updown9-lie-badge.pulse-lie {
    animation: updown9LiePulse 0.55s ease;
}

@keyframes updown9LiePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

.updown9-status-bar .status-hole.pulse-hole {
    animation: updown9HolePulse 0.5s ease;
}

@keyframes updown9HolePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.updown9-progress-track {
    height: 6px;
    background: var(--color-gray-200);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: var(--spacing-4);
}

.updown9-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #D97706, #F59E0B);
    border-radius: 999px;
    transition: width 0.35s ease;
}

.updown9-progress-fill.is-complete {
    background: linear-gradient(90deg, #16A34A, #059669);
}

.updown9-strokes-hint {
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-3);
}

.updown9-touch-panel.is-complete {
    opacity: 0.85;
}

.updown9-touch-hint {
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-2);
}

.updown9-lie-hero {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    margin-bottom: var(--spacing-3);
    border-radius: 14px;
    border: 2px solid transparent;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.updown9-lie-hero.lie-switching {
    opacity: 0.4;
    transform: scale(0.98);
}

.updown9-lie-hero.lie-fairway { background: linear-gradient(135deg, #ecfdf5, #d1fae5); border-color: #6ee7b7; }
.updown9-lie-hero.lie-bunker { background: linear-gradient(135deg, #fffbeb, #fef3c7); border-color: #fcd34d; }
.updown9-lie-hero.lie-rough { background: linear-gradient(135deg, #fef2f2, #fee2e2); border-color: #fca5a5; }
.updown9-lie-hero.lie-fringe { background: linear-gradient(135deg, #ecfeff, #cffafe); border-color: #67e8f9; }
.updown9-lie-hero.lie-short { background: linear-gradient(135deg, #eff6ff, #dbeafe); border-color: #93c5fd; }
.updown9-lie-hero.lie-long { background: linear-gradient(135deg, #f5f3ff, #ede9fe); border-color: #c4b5fd; }
.updown9-lie-hero.is-complete { background: #f3f4f6; border-color: #e5e7eb; }

.updown9-lie-hero .lie-hero-icon {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
}

.updown9-lie-hero .lie-hero-text {
    flex: 1;
    min-width: 0;
}

.updown9-lie-hero .lie-hero-text strong {
    display: block;
    font-size: 1.05rem;
    color: #1f2937;
}

.updown9-lie-hero .lie-hero-text span {
    display: block;
    font-size: 0.8rem;
    color: #4b5563;
    margin-top: 2px;
    line-height: 1.3;
}

.updown9-lie-plan {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-bottom: var(--spacing-3);
}

.lie-plan-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0.45;
    border: 1px solid transparent;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.lie-plan-chip small {
    font-size: 0.6rem;
    opacity: 0.85;
}

.lie-plan-chip.lie-fairway { background: #ecfdf5; color: #047857; }
.lie-plan-chip.lie-bunker { background: #fffbeb; color: #b45309; }
.lie-plan-chip.lie-rough { background: #fef2f2; color: #b91c1c; }
.lie-plan-chip.lie-fringe { background: #ecfeff; color: #0e7490; }
.lie-plan-chip.lie-short { background: #eff6ff; color: #1d4ed8; }
.lie-plan-chip.lie-long { background: #f5f3ff; color: #6d28d9; }

.lie-plan-chip.played {
    opacity: 0.7;
}

.lie-plan-chip.current {
    opacity: 1;
    transform: scale(1.08);
    border-color: currentColor;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06);
}

.updown9-touch-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.updown9-touch-buttons.zones-hidden {
    opacity: 0.35;
    transform: scale(0.98);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.updown9-touch-buttons.zones-reveal {
    animation: updown9ZonesReveal 0.4s ease forwards;
}

@keyframes updown9ZonesReveal {
    from { opacity: 0.5; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.updown9-touch-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    width: 100%;
    min-height: 64px;
    padding: var(--spacing-3) var(--spacing-4);
    padding-left: calc(var(--spacing-4) + 4px);
    border: 2px solid transparent;
    border-radius: 14px;
    cursor: pointer;
    text-align: left;
    position: relative;
    overflow: hidden;
    font-family: inherit;
    font-size: inherit;
    line-height: 1.2;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.25s ease, filter 0.15s ease;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14);
    color: #fff;
}

.updown9-touch-btn:active:not(:disabled),
.updown9-touch-btn.zone-pressed {
    transform: scale(0.97);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18) inset;
    filter: brightness(0.95);
}

.updown9-touch-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.updown9-touch-btn.zone-flash {
    animation: updown9TouchPop 0.48s cubic-bezier(0.34, 1.45, 0.64, 1);
}

@keyframes updown9TouchPop {
    0% { transform: scale(1); }
    35% { transform: scale(0.96); filter: brightness(0.92); }
    65% { transform: scale(1.02); filter: brightness(1.08); }
    100% { transform: scale(1); filter: brightness(1); }
}

.updown9-touch-btn .touch-step {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
}

.updown9-touch-btn .touch-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: scale(0);
    opacity: 0.85;
    animation: updown9Ripple 0.55s ease-out forwards;
    pointer-events: none;
}

@keyframes updown9Ripple {
    to { transform: scale(2.8); opacity: 0; }
}

.updown9-touch-btn.zone-chip-in {
    background-color: #16a34a;
    background-image: linear-gradient(135deg, #14532d 0%, #16a34a 100%);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 4px 14px rgba(20, 83, 45, 0.35);
}

.updown9-touch-btn.zone-par {
    background-color: #2563eb;
    background-image: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 4px 14px rgba(29, 78, 216, 0.3);
}

.updown9-touch-btn.zone-bogey {
    background-color: #ea580c;
    background-image: linear-gradient(135deg, #c2410c 0%, #ea580c 100%);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 4px 14px rgba(194, 65, 12, 0.3);
}

.updown9-touch-btn.zone-double {
    background-color: #dc2626;
    background-image: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 4px 14px rgba(185, 28, 28, 0.3);
}

.updown9-touch-btn .touch-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 800;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    flex-shrink: 0;
    margin-left: 22px;
}

.updown9-touch-btn .touch-text {
    flex: 1;
    min-width: 0;
}

.updown9-touch-btn .touch-label {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

.updown9-touch-btn .touch-sub {
    display: block;
    font-size: 0.75rem;
    opacity: 0.9;
    margin-top: 2px;
}

.updown9-touch-btn .touch-pts {
    font-size: 1.15rem;
    font-weight: 800;
    flex-shrink: 0;
    min-width: 32px;
    text-align: center;
}

.updown9-touch-btn .pts-birdie { color: #fef08a; }
.updown9-touch-btn .pts-par { color: #dbeafe; }
.updown9-touch-btn .pts-bogey { color: #ffedd5; }
.updown9-touch-btn .pts-double { color: #fecaca; }

.updown9-toast {
    margin-top: var(--spacing-3);
    padding: var(--spacing-3);
    border-radius: var(--border-radius-lg);
    background: #fffbeb;
    border: 1px solid #fde68a;
    text-align: center;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.updown9-toast.visible {
    opacity: 1;
    transform: translateY(0);
}

.updown9-toast .toast-title {
    display: block;
    font-weight: 700;
    color: #92400e;
}

.updown9-toast .toast-sub {
    display: block;
    font-size: var(--font-size-sm);
    color: #b45309;
    margin-top: 2px;
}

.updown9-scorecard-details {
    margin-top: var(--spacing-3);
}

.updown9-scorecard-details summary {
    font-size: var(--font-size-sm);
}

.updown9-scorecard h4 {
    font-size: var(--font-size-sm);
    font-weight: 700;
    margin-bottom: var(--spacing-2);
    color: var(--color-gray-700);
}

.updown9-holes-scroll {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 6px;
    overflow-x: auto;
    padding-bottom: var(--spacing-1);
}

.updown9-hole-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 52px;
    padding: 4px;
    border-radius: 8px;
    background: var(--color-gray-100);
    border: 2px solid var(--color-gray-200);
    font-size: 0.7rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.updown9-hole-chip.lie-fairway:not(.filled) { background: #ecfdf5; border-color: #a7f3d0; }
.updown9-hole-chip.lie-bunker:not(.filled) { background: #fffbeb; border-color: #fde68a; }
.updown9-hole-chip.lie-rough:not(.filled) { background: #fef2f2; border-color: #fecaca; }
.updown9-hole-chip.lie-fringe:not(.filled) { background: #ecfeff; border-color: #a5f3fc; }
.updown9-hole-chip.lie-short:not(.filled) { background: #eff6ff; border-color: #bfdbfe; }
.updown9-hole-chip.lie-long:not(.filled) { background: #f5f3ff; border-color: #ddd6fe; }

.updown9-hole-chip .chip-lie {
    font-size: 0.55rem;
    font-weight: 800;
    opacity: 0.75;
    letter-spacing: 0.02em;
}

.updown9-hole-chip.filled.zone-chip-in { background: #166534; color: #fff; border-color: #14532d; }
.updown9-hole-chip.filled.zone-par { background: #2563eb; color: #fff; border-color: #1d4ed8; }
.updown9-hole-chip.filled.zone-bogey { background: #ea580c; color: #fff; border-color: #c2410c; }
.updown9-hole-chip.filled.zone-double { background: #dc2626; color: #fff; border-color: #b91c1c; }

.updown9-hole-chip.filled .chip-lie {
    opacity: 0.85;
    color: inherit;
}

.updown9-hole-chip.chip-next {
    border-color: #F59E0B;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.35);
    transform: scale(1.05);
}

.updown9-hole-chip.last-played {
    animation: updown9ChipFlash 0.5s ease;
}

@keyframes updown9ChipFlash {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.25); }
}

.updown9-hole-chip .chip-num {
    font-weight: 700;
    font-size: 0.65rem;
    opacity: 0.85;
}

.updown9-hole-chip .chip-score {
    font-weight: 800;
    font-size: 0.8rem;
}

.updown9-rate-hint {
    margin-top: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    text-align: center;
}

.updown9-actions-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: grid;
    grid-template-columns: 1fr 1fr 1.4fr;
    gap: var(--spacing-2);
    padding: var(--spacing-3);
    padding-bottom: calc(var(--spacing-3) + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.96);
    border: none;
    border-top: 1px solid var(--color-gray-200);
    border-radius: 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(8px);
}

.updown9-actions-bar-dual {
    grid-template-columns: 1fr 1fr;
}

.updown9-body.updown9-saving .updown9-interactive-section {
    opacity: 0.6;
    pointer-events: none;
}

.success-redirect-hint {
    margin-top: var(--spacing-3);
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

.updown9-actions-bar .btn {
    min-height: 48px;
    font-size: 0.9rem;
}

.updown9-actions-bar #save-btn.btn-ready {
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.35);
}

/* Rapport Up & Down 9-Hole */

.updown9-stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--spacing-4);
}

.updown9-stats-container .stat-card {
    background: #f9fafb;
    border-radius: 10px;
    padding: 1.25rem;
    text-align: center;
    border-left: 4px solid #3b82f6;
}

.updown9-stats-container .stat-card.success { border-left-color: #10b981; }
.updown9-stats-container .stat-card.warning { border-left-color: #f59e0b; }
.updown9-stats-container .stat-card.danger { border-left-color: #ef4444; }
.updown9-stats-container .stat-card.info { border-left-color: #3b82f6; }

.updown9-stats-container .stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1f2937;
}

.updown9-stats-container .stat-label {
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: 4px;
}

.updown9-report-hero {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: flex-start;
}

.updown9-score-badge {
    min-width: 160px;
    padding: 1.5rem;
    border-radius: 16px;
    text-align: center;
    color: #fff;
}

.updown9-score-badge.elite { background: linear-gradient(135deg, #047857, #059669); }
.updown9-score-badge.good { background: linear-gradient(135deg, #059669, #10B981); }
.updown9-score-badge.average { background: linear-gradient(135deg, #D97706, #F59E0B); }
.updown9-score-badge.needs-work { background: linear-gradient(135deg, #DC2626, #EF4444); }

.updown9-score-value {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
}

.updown9-score-label {
    font-size: 0.95rem;
    opacity: 0.95;
    margin-top: 0.25rem;
}

.updown9-score-date {
    font-size: 0.85rem;
    opacity: 0.85;
    margin-top: 0.5rem;
}

.updown9-hero-metrics {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-content: flex-start;
}

.updown9-metric-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.6rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    min-width: 90px;
}

.updown9-metric-pill .pill-label {
    font-size: 0.75rem;
    color: #6b7280;
}

.updown9-updown-compare {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
}

.updown9-updown-compare.above-bench {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

.updown9-updown-compare.below-bench {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fdba74;
}

.updown9-benchmarks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.updown9-benchmark-card {
    padding: 1rem 1.25rem;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
}

.updown9-benchmark-card h4 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
}

.updown9-benchmark-card p {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    color: #4b5563;
}

.updown9-benchmark-card .bench-status {
    font-size: 0.85rem;
    font-weight: 600;
    color: #059669;
}

.updown9-benchmark-card.tour { border-left: 4px solid #059669; }
.updown9-benchmark-card.good { border-left: 4px solid #2563eb; }
.updown9-benchmark-card.average { border-left: 4px solid #f59e0b; }

.updown9-report-charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.updown9-report-chart-card {
    background: #f9fafb;
    border-radius: 12px;
    padding: 1rem;
    border: 1px solid #e5e7eb;
}

.updown9-report-holes-detail {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 360px;
    overflow-y: auto;
}

.updown9-report-hole-row {
    display: grid;
    grid-template-columns: 36px 1fr 1.5fr 70px 50px;
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: #f9fafb;
    border-radius: 8px;
    font-size: 0.9rem;
}

.updown9-table-scroll {
    overflow-x: auto;
}

.updown9-report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.updown9-report-table th,
.updown9-report-table td {
    padding: 0.65rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

.updown9-report-table th {
    background: #f3f4f6;
    font-weight: 600;
    color: #374151;
}

.chart-wrapper-sm {
    height: 280px;
}

@media (min-width: 769px) {
    .updown9-test.test-container {
        max-width: 480px;
        margin: 0 auto;
        padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
    }

    .updown9-actions-bar {
        max-width: 520px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
    }
}

@media (max-width: 768px) {
    .updown9-test.test-container {
        padding: var(--spacing-3);
        padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px));
    }

    .updown9-test-content {
        gap: var(--spacing-3);
    }

    .updown9-test .test-content section.updown9-interactive-section {
        padding: var(--spacing-3);
    }

    .updown9-test .test-header.updown9-header-compact {
        margin-bottom: var(--spacing-3);
        padding: var(--spacing-3);
    }

    .updown9-header-compact h1 {
        font-size: 1.15rem;
    }

    .updown9-header-compact .test-subtitle {
        font-size: 0.85rem;
    }

    .updown9-status-bar {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-2);
        padding: var(--spacing-2);
    }

    .updown9-status-bar .status-item strong {
        font-size: 1rem;
    }

    .updown9-lie-hero {
        padding: var(--spacing-2) var(--spacing-3);
        gap: var(--spacing-2);
    }

    .updown9-lie-hero .lie-hero-icon {
        font-size: 1.6rem;
    }

    .updown9-lie-hero .lie-hero-text strong {
        font-size: 0.92rem;
        line-height: 1.25;
    }

    .updown9-lie-hero .lie-hero-text span {
        font-size: 0.72rem;
    }

    .updown9-holes-scroll {
        grid-template-columns: repeat(9, minmax(30px, 1fr));
    }

    .updown9-report-hole-row {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
    }

    .updown9-report-hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .updown9-status-bar .status-lie {
        display: none;
    }

    .updown9-status-bar {
        grid-template-columns: repeat(3, 1fr);
    }

    .updown9-strokes-hint {
        margin-bottom: var(--spacing-2);
        font-size: 0.8rem;
    }

    .updown9-date-compact {
        margin-bottom: var(--spacing-3);
    }
}

/* ========================================
   CHIP CIRCLE 90 CM — Test + Rapport
   ======================================== */

.chip90-body {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    overflow-x: hidden;
    max-width: 100vw;
}

.chip90-test.test-container {
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
}

.chip90-test-content {
    gap: var(--spacing-4);
}

.chip90-interactive-section {
    border: 2px solid #059669;
    background: linear-gradient(180deg, #F0FDF4 0%, #FFFFFF 100%);
}

.chip90-header-compact h1 {
    font-size: 1.35rem;
}

.chip90-back .btn {
    min-height: 44px;
}

.chip90-info-box ol {
    margin: 0;
    padding-left: 1.25rem;
}

.chip90-info-box li + li {
    margin-top: var(--spacing-2);
}

.chip90-date-compact {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: 0;
}

.chip90-date-compact .form-input {
    flex: 1;
    min-height: 44px;
}

.chip90-status-bar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.chip90-status-bar .status-item {
    text-align: center;
    min-width: 0;
}

.chip90-status-bar .status-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-gray-500);
    margin-bottom: 2px;
}

.chip90-status-bar .status-item strong {
    font-size: 1.15rem;
    color: var(--color-gray-900);
}

.chip90-status-bar .status-item strong small {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-gray-500);
}

.chip90-status-bar .status-position.pulse-position {
    animation: chip90PositionPulse 0.5s ease;
}

@keyframes chip90PositionPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.chip90-progress-track {
    height: 6px;
    background: var(--color-gray-200);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: var(--spacing-3);
}

.chip90-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #059669, #10B981);
    border-radius: 999px;
    transition: width 0.35s ease;
}

.chip90-progress-fill.is-complete {
    background: linear-gradient(90deg, #16A34A, #059669);
}

.chip90-positions-track {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: var(--spacing-3);
}

.chip90-position-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    background: #f3f4f6;
    color: #6b7280;
    border: 2px solid #e5e7eb;
    transition: all 0.2s ease;
}

.chip90-position-chip.current {
    background: #ecfdf5;
    color: #047857;
    border-color: #6ee7b7;
    transform: scale(1.06);
}

.chip90-position-chip.done {
    background: #166534;
    color: #fff;
    border-color: #14532d;
}

.chip90-position-chip.failed {
    background: #991b1b;
    color: #fff;
    border-color: #7f1d1d;
}

.chip90-streak-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-3);
}

.chip90-streak-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.chip90-streak-dots {
    display: flex;
    gap: 6px;
}

.chip90-streak-dots .streak-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #e5e7eb;
    border: 2px solid #d1d5db;
    transition: all 0.25s ease;
}

.chip90-streak-dots .streak-dot.filled {
    background: #16A34A;
    border-color: #15803d;
    box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.25);
}

.chip90-touch-hint {
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-3);
}

.chip90-touch-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chip90-touch-buttons.zones-hidden {
    opacity: 0.35;
    transform: scale(0.98);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.chip90-touch-buttons.zones-reveal {
    animation: chip90ZonesReveal 0.4s ease forwards;
}

@keyframes chip90ZonesReveal {
    from { opacity: 0.5; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.chip90-touch-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    width: 100%;
    min-height: 72px;
    padding: var(--spacing-4);
    border: 2px solid transparent;
    border-radius: 16px;
    cursor: pointer;
    text-align: left;
    position: relative;
    overflow: hidden;
    font-family: inherit;
    font-size: inherit;
    line-height: 1.2;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.25s ease, filter 0.15s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
    color: #fff;
}

.chip90-touch-btn:active:not(:disabled),
.chip90-touch-btn.zone-pressed {
    transform: scale(0.97);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18) inset;
    filter: brightness(0.95);
}

.chip90-touch-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.chip90-touch-btn.zone-flash {
    animation: chip90TouchPop 0.48s cubic-bezier(0.34, 1.45, 0.64, 1);
}

@keyframes chip90TouchPop {
    0% { transform: scale(1); }
    35% { transform: scale(0.96); filter: brightness(0.92); }
    65% { transform: scale(1.02); filter: brightness(1.08); }
    100% { transform: scale(1); filter: brightness(1); }
}

.chip90-touch-btn.zone-in {
    background-color: #16a34a;
    background-image: linear-gradient(135deg, #14532d 0%, #16a34a 100%);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 16px rgba(20, 83, 45, 0.35);
}

.chip90-touch-btn.zone-out {
    background-color: #dc2626;
    background-image: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 16px rgba(185, 28, 28, 0.35);
}

.chip90-touch-btn .touch-icon {
    font-size: 1.75rem;
    line-height: 1;
    flex-shrink: 0;
    width: 44px;
    text-align: center;
}

.chip90-touch-btn .touch-text {
    flex: 1;
    min-width: 0;
}

.chip90-touch-btn .touch-label {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
}

.chip90-touch-btn .touch-sub {
    display: block;
    font-size: 0.8rem;
    opacity: 0.9;
    margin-top: 4px;
}

.chip90-touch-btn .touch-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: scale(0);
    opacity: 0.85;
    animation: chip90Ripple 0.55s ease-out forwards;
    pointer-events: none;
}

@keyframes chip90Ripple {
    to { transform: scale(2.8); opacity: 0; }
}

.chip90-toast {
    margin-top: var(--spacing-3);
    padding: var(--spacing-3);
    border-radius: var(--border-radius-lg);
    background: #fffbeb;
    border: 1px solid #fde68a;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

.chip90-toast.visible {
    opacity: 1;
    transform: translateY(0);
}

.chip90-toast .toast-title {
    display: block;
    font-weight: 700;
    color: #92400e;
}

.chip90-toast .toast-sub {
    display: block;
    font-size: 0.85rem;
    color: #b45309;
    margin-top: 2px;
}

.chip90-balls-track h4 {
    font-size: var(--font-size-sm);
    font-weight: 700;
    margin: var(--spacing-4) 0 var(--spacing-2);
    color: var(--color-gray-700);
}

.chip90-balls-scroll {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 36px;
}

.chip90-empty-balls {
    font-size: 0.85rem;
    color: var(--color-gray-500);
}

.chip90-ball-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 40px;
    padding: 4px;
    border-radius: 8px;
    font-size: 0.9rem;
    border: 2px solid transparent;
}

.chip90-ball-chip small {
    font-size: 0.55rem;
    font-weight: 700;
    opacity: 0.85;
}

.chip90-ball-chip.ball-in {
    background: #ecfdf5;
    border-color: #6ee7b7;
}

.chip90-ball-chip.ball-out {
    background: #fef2f2;
    border-color: #fca5a5;
}

.chip90-actions-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2);
    padding: var(--spacing-3);
    padding-bottom: calc(var(--spacing-3) + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.96);
    border: none;
    border-top: 1px solid var(--color-gray-200);
    border-radius: 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(8px);
}

.chip90-actions-bar .btn {
    min-height: 48px;
    font-size: 0.9rem;
}

.chip90-body.chip90-saving .chip90-interactive-section {
    opacity: 0.6;
    pointer-events: none;
}

.chip90-touch-panel.is-complete {
    opacity: 0.85;
}

/* Rapport Chip Circle 90 */

.chip90-stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--spacing-4);
}

.chip90-stats-container .stat-card {
    background: #f9fafb;
    border-radius: 10px;
    padding: 1.25rem;
    text-align: center;
    border-left: 4px solid #3b82f6;
}

.chip90-stats-container .stat-card.elite { border-left-color: #059669; }
.chip90-stats-container .stat-card.good { border-left-color: #2563eb; }
.chip90-stats-container .stat-card.average { border-left-color: #f59e0b; }
.chip90-stats-container .stat-card.needs-work { border-left-color: #ef4444; }

.chip90-report-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

.chip90-score-badge {
    background: linear-gradient(135deg, #2563EB, #3B82F6);
    color: #fff;
    border-radius: 16px;
    padding: var(--spacing-4) var(--spacing-6);
    text-align: center;
    min-width: 140px;
}

.chip90-score-badge.elite { background: linear-gradient(135deg, #047857, #059669); }
.chip90-score-badge.good { background: linear-gradient(135deg, #059669, #10B981); }
.chip90-score-badge.average { background: linear-gradient(135deg, #D97706, #F59E0B); }
.chip90-score-badge.needs-work { background: linear-gradient(135deg, #DC2626, #EF4444); }

.chip90-score-value {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
}

.chip90-score-label {
    font-size: 0.9rem;
    margin-top: 4px;
    opacity: 0.95;
}

.chip90-score-date {
    font-size: 0.75rem;
    margin-top: 6px;
    opacity: 0.8;
}

.chip90-hero-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
}

.chip90-metric-pill {
    background: #f3f4f6;
    border-radius: 999px;
    padding: 8px 16px;
    text-align: center;
}

.chip90-metric-pill .pill-label {
    display: block;
    font-size: 0.65rem;
    color: #6b7280;
    text-transform: uppercase;
}

.chip90-benchmarks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--spacing-4);
}

.chip90-benchmark-card {
    background: #f9fafb;
    border-radius: 12px;
    padding: var(--spacing-4);
    border: 1px solid #e5e7eb;
}

.chip90-benchmark-card.perfect { border-left: 4px solid #059669; }
.chip90-benchmark-card.tour { border-left: 4px solid #2563eb; }
.chip90-benchmark-card.good { border-left: 4px solid #f59e0b; }

.chip90-benchmark-card h4 {
    margin-bottom: var(--spacing-2);
    font-size: 0.95rem;
}

.chip90-benchmark-card p {
    font-size: 0.85rem;
    color: #6b7280;
    margin-bottom: var(--spacing-2);
}

.chip90-benchmark-card .bench-status {
    font-size: 0.8rem;
    font-weight: 600;
    color: #059669;
}

.chip90-report-charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.chip90-report-chart-card {
    background: #f9fafb;
    border-radius: 12px;
    padding: 1rem;
    border: 1px solid #e5e7eb;
}

.chip90-report-positions-detail {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.chip90-report-position-row {
    display: grid;
    grid-template-columns: 48px 1fr 80px 80px 90px;
    gap: 0.5rem;
    align-items: center;
    padding: 0.6rem 0.75rem;
    background: #f9fafb;
    border-radius: 8px;
    font-size: 0.9rem;
}

.chip90-table-scroll {
    overflow-x: auto;
}

.chip90-report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.chip90-report-table th,
.chip90-report-table td {
    padding: 0.6rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

.chip90-report-table th {
    background: #f3f4f6;
    font-weight: 600;
}

.chip90-report-table .elite { color: #059669; font-weight: 600; }
.chip90-report-table .good { color: #2563eb; font-weight: 600; }
.chip90-report-table .average { color: #D97706; font-weight: 600; }
.chip90-report-table .needs-work { color: #DC2626; font-weight: 600; }

@media (min-width: 769px) {
    .chip90-test.test-container {
        max-width: 480px;
        margin: 0 auto;
    }

    .chip90-actions-bar {
        max-width: 520px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
    }
}

@media (max-width: 768px) {
    .chip90-test.test-container {
        padding: var(--spacing-3);
        padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px));
    }

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

    .chip90-report-position-row {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
    }

    .chip90-report-hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* ==========================================================================
   Wedging 3 trous compacts (-3)
   ========================================================================== */

.wedge3-body {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    overflow-x: hidden;
    max-width: 100vw;
}

.wedge3-test.test-container {
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
}

.wedge3-test-content {
    gap: var(--spacing-4);
}

.wedge3-interactive-section {
    border: 2px solid #2563EB;
    background: linear-gradient(180deg, #EFF6FF 0%, #FFFFFF 100%);
}

.wedge3-header-compact h1 {
    font-size: 1.35rem;
}

.wedge3-back .btn {
    min-height: 44px;
}

.wedge3-info-box ol {
    margin: 0;
    padding-left: 1.25rem;
}

.wedge3-info-box li + li {
    margin-top: var(--spacing-2);
}

.wedge3-date-compact {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: 0;
}

.wedge3-date-compact .form-input {
    flex: 1;
    min-height: 44px;
}

.wedge3-status-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.wedge3-status-bar .status-item {
    text-align: center;
    min-width: 0;
}

.wedge3-status-bar .status-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-gray-500);
    margin-bottom: 2px;
}

.wedge3-status-bar .status-item strong {
    font-size: 1.15rem;
    color: var(--color-gray-900);
}

.wedge3-status-bar .status-item strong small {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-gray-500);
}

.wedge3-status-bar .score-target { color: #059669; }
.wedge3-status-bar .score-under { color: #16A34A; }
.wedge3-status-bar .score-even { color: var(--color-gray-700); }
.wedge3-status-bar .score-over { color: #DC2626; }

.wedge3-target-hint {
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-2);
}

.wedge3-progress-track {
    height: 6px;
    background: var(--color-gray-200);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: var(--spacing-3);
}

.wedge3-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #2563EB, #3B82F6);
    border-radius: 999px;
    transition: width 0.35s ease;
}

.wedge3-progress-fill.is-complete {
    background: linear-gradient(90deg, #16A34A, #059669);
}

.wedge3-progress-fill.is-failed {
    background: linear-gradient(90deg, #DC2626, #EF4444);
}

.wedge3-attempts-track {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-bottom: var(--spacing-3);
}

.wedge3-attempt-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 42px;
    padding: 4px 6px;
    border-radius: 10px;
    font-size: 0.7rem;
    background: #f3f4f6;
    color: #6b7280;
    border: 2px solid #e5e7eb;
    transition: all 0.2s ease;
}

.wedge3-attempt-chip small {
    font-size: 0.6rem;
    font-weight: 600;
    opacity: 0.8;
}

.wedge3-attempt-chip strong {
    font-size: 0.75rem;
    font-weight: 800;
}

.wedge3-attempt-chip.current {
    background: #DBEAFE;
    color: #1D4ED8;
    border-color: #93C5FD;
    transform: scale(1.06);
}

.wedge3-attempt-chip.success {
    background: #166534;
    color: #fff;
    border-color: #14532d;
}

.wedge3-attempt-chip.failed {
    background: #FEE2E2;
    color: #991B1B;
    border-color: #FCA5A5;
}

.wedge3-touch-hint {
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-3);
}

.wedge3-touch-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wedge3-touch-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    width: 100%;
    min-height: 64px;
    padding: var(--spacing-3) var(--spacing-4);
    border: 2px solid transparent;
    border-radius: 14px;
    cursor: pointer;
    text-align: left;
    position: relative;
    overflow: hidden;
    font-family: inherit;
    font-size: inherit;
    line-height: 1.2;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    color: #fff;
    transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.25s ease, filter 0.15s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}

.wedge3-touch-btn:active:not(:disabled),
.wedge3-touch-btn.zone-pressed {
    transform: scale(0.97);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18) inset;
    filter: brightness(0.95);
}

.wedge3-touch-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.wedge3-touch-btn.zone-flash {
    animation: wedge3TouchPop 0.48s cubic-bezier(0.34, 1.45, 0.64, 1);
}

@keyframes wedge3TouchPop {
    0% { transform: scale(1); }
    35% { transform: scale(0.96); filter: brightness(0.92); }
    65% { transform: scale(1.02); filter: brightness(1.08); }
    100% { transform: scale(1); filter: brightness(1); }
}

.wedge3-touch-btn.zone-eagle {
    background-color: #7C3AED;
    background-image: linear-gradient(135deg, #5B21B6 0%, #7C3AED 100%);
    border-color: rgba(255, 255, 255, 0.25);
}

.wedge3-touch-btn.zone-birdie {
    background-color: #16A34A;
    background-image: linear-gradient(135deg, #14532D 0%, #16A34A 100%);
    border-color: rgba(255, 255, 255, 0.25);
}

.wedge3-touch-btn.zone-par {
    background-color: #2563EB;
    background-image: linear-gradient(135deg, #1D4ED8 0%, #2563EB 100%);
    border-color: rgba(255, 255, 255, 0.25);
}

.wedge3-touch-btn.zone-bogey {
    background-color: #D97706;
    background-image: linear-gradient(135deg, #B45309 0%, #D97706 100%);
    border-color: rgba(255, 255, 255, 0.25);
}

.wedge3-touch-btn.zone-double {
    background-color: #DC2626;
    background-image: linear-gradient(135deg, #991B1B 0%, #DC2626 100%);
    border-color: rgba(255, 255, 255, 0.25);
}

.wedge3-touch-btn .touch-icon {
    flex-shrink: 0;
    width: 36px;
    text-align: center;
    font-size: 1.25rem;
}

.wedge3-touch-btn .touch-text {
    flex: 1;
    min-width: 0;
}

.wedge3-touch-btn .touch-label {
    display: block;
    font-weight: 700;
    font-size: 0.95rem;
}

.wedge3-touch-btn .touch-sub {
    display: block;
    font-size: 0.72rem;
    opacity: 0.9;
    margin-top: 2px;
}

.wedge3-touch-btn .touch-pts {
    flex-shrink: 0;
    font-weight: 800;
    font-size: 1rem;
    min-width: 28px;
    text-align: center;
}

.wedge3-touch-btn .touch-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    pointer-events: none;
    animation: wedge3Ripple 0.55s ease-out forwards;
}

@keyframes wedge3Ripple {
    from { transform: scale(0); opacity: 0.6; }
    to { transform: scale(1); opacity: 0; }
}

.wedge3-toast {
    min-height: 0;
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-700);
    margin-top: var(--spacing-2);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.wedge3-toast.visible {
    opacity: 1;
}

.wedge3-toast .toast-title {
    font-weight: 700;
}

.wedge3-toast .toast-sub {
    font-size: 0.8rem;
    color: var(--color-gray-500);
}

.wedge3-current-attempt h4 {
    font-size: 0.85rem;
    margin-bottom: var(--spacing-2);
    color: var(--color-gray-600);
}

.wedge3-holes-scroll {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wedge3-empty-holes {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

.wedge3-hole-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 44px;
    padding: 6px 10px;
    border-radius: 10px;
    font-size: 0.75rem;
    color: #fff;
    font-weight: 700;
}

.wedge3-hole-chip small {
    font-size: 0.6rem;
    opacity: 0.85;
}

.wedge3-hole-chip.zone-eagle { background: #7C3AED; }
.wedge3-hole-chip.zone-birdie { background: #16A34A; }
.wedge3-hole-chip.zone-par { background: #2563EB; }
.wedge3-hole-chip.zone-bogey { background: #D97706; }
.wedge3-hole-chip.zone-double { background: #DC2626; }

.wedge3-actions-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    padding-bottom: calc(var(--spacing-3) + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid var(--color-gray-200);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
    z-index: 100;
}

.wedge3-actions-bar .btn {
    flex: 1;
    min-height: 48px;
}

.wedge3-body.wedge3-saving .wedge3-interactive-section {
    opacity: 0.65;
    pointer-events: none;
}

.wedge3-touch-panel.is-complete {
    opacity: 0.85;
}

/* Rapport */
.wedge3-report-body .wedge3-stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--spacing-3);
}

.wedge3-report-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

.wedge3-score-badge {
    padding: var(--spacing-4) var(--spacing-5);
    border-radius: var(--border-radius-lg);
    color: #fff;
    text-align: center;
    min-width: 140px;
}

.wedge3-score-badge.elite { background: linear-gradient(135deg, #047857, #059669); }
.wedge3-score-badge.good { background: linear-gradient(135deg, #059669, #10B981); }
.wedge3-score-badge.needs-work { background: linear-gradient(135deg, #DC2626, #EF4444); }

.wedge3-score-value {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
}

.wedge3-score-label {
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: 4px;
}

.wedge3-score-date {
    font-size: 0.75rem;
    opacity: 0.85;
    margin-top: 4px;
}

.wedge3-hero-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
}

.wedge3-metric-pill {
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.wedge3-metric-pill .pill-label {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--color-gray-500);
    margin-bottom: 2px;
}

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

.wedge3-report-chart-card {
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-4);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.wedge3-report-attempts-detail {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wedge3-report-attempt-row {
    display: grid;
    grid-template-columns: 48px 56px 1fr auto;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--color-white);
    border-radius: var(--border-radius-md);
    border-left: 4px solid #e5e7eb;
}

.wedge3-report-attempt-row.success {
    border-left-color: #16A34A;
    background: #F0FDF4;
}

.wedge3-report-attempt-row.failed {
    border-left-color: #FCA5A5;
}

.wedge3-report-attempt-row .row-num {
    font-weight: 700;
    color: var(--color-gray-500);
}

.wedge3-report-attempt-row .row-score {
    font-weight: 800;
    font-size: 1.1rem;
}

.wedge3-report-attempt-row .row-holes {
    font-size: 0.85rem;
    color: var(--color-gray-600);
}

.wedge3-report-attempt-row .row-status {
    font-weight: 600;
    color: #059669;
}

.wedge3-table-scroll {
    overflow-x: auto;
}

.wedge3-report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.wedge3-report-table th,
.wedge3-report-table td {
    padding: var(--spacing-3);
    text-align: left;
    border-bottom: 1px solid var(--color-gray-200);
}

.wedge3-report-table th {
    background: #f3f4f6;
    font-weight: 600;
}

@media (min-width: 769px) {
    .wedge3-test.test-container {
        max-width: 480px;
        margin: 0 auto;
    }

    .wedge3-actions-bar {
        max-width: 520px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
    }
}

@media (max-width: 768px) {
    .wedge3-test.test-container {
        padding: var(--spacing-3);
        padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px));
    }

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

    .wedge3-attempts-track {
        gap: 4px;
    }

    .wedge3-attempt-chip {
        min-width: 32px;
        min-height: 38px;
    }

    .wedge3-report-attempt-row {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }

    .wedge3-report-hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* ==========================================================================
   Putting aléatoire 30 putts 1-2-3 m
   ========================================================================== */

.putting30-body {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    overflow-x: hidden;
    max-width: 100vw;
}

.putting30-test.test-container {
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
}

.putting30-test-content {
    gap: var(--spacing-4);
}

.putting30-interactive-section {
    border: 2px solid #059669;
    background: linear-gradient(180deg, #F0FDF4 0%, #FFFFFF 100%);
}

.putting30-header-compact h1 {
    font-size: 1.35rem;
}

.putting30-back .btn {
    min-height: 44px;
}

.putting30-info-box ol {
    margin: 0;
    padding-left: 1.25rem;
}

.putting30-info-box li + li {
    margin-top: var(--spacing-2);
}

.putting30-date-compact {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: 0;
}

.putting30-date-compact .form-input {
    flex: 1;
    min-height: 44px;
}

.putting30-status-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.putting30-status-bar .status-item {
    text-align: center;
    min-width: 0;
}

.putting30-status-bar .status-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-gray-500);
    margin-bottom: 2px;
}

.putting30-status-bar .status-item strong {
    font-size: 1rem;
    color: var(--color-gray-900);
}

.putting30-status-bar .status-item strong small {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-gray-500);
}

.putting30-status-bar .status-remaining strong {
    font-size: 0.72rem;
    line-height: 1.2;
}

.putting30-position-hint {
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: #047857;
    margin-bottom: var(--spacing-2);
}

.putting30-progress-track {
    height: 6px;
    background: var(--color-gray-200);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: var(--spacing-3);
}

.putting30-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #059669, #10B981);
    border-radius: 999px;
    transition: width 0.35s ease;
}

.putting30-progress-fill.is-complete {
    background: linear-gradient(90deg, #16A34A, #059669);
}

.putting30-distances-track {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: var(--spacing-3);
}

.putting30-distance-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 56px;
    padding: 6px 10px;
    border-radius: 10px;
    background: #f3f4f6;
    border: 2px solid #e5e7eb;
    font-size: 0.75rem;
}

.putting30-distance-chip small {
    font-size: 0.65rem;
    color: var(--color-gray-500);
}

.putting30-distance-chip strong {
    font-weight: 800;
}

.putting30-distance-chip.done {
    background: #166534;
    color: #fff;
    border-color: #14532d;
}

.putting30-distance-chip.done small {
    color: rgba(255, 255, 255, 0.85);
}

.putting30-touch-hint {
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-3);
}

.putting30-touch-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.putting30-touch-buttons.zones-hidden {
    opacity: 0.35;
    transform: scale(0.98);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.putting30-touch-buttons.zones-reveal {
    animation: putting30ZonesReveal 0.4s ease forwards;
}

@keyframes putting30ZonesReveal {
    from { opacity: 0.5; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.putting30-touch-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    width: 100%;
    min-height: 72px;
    padding: var(--spacing-4);
    border: 2px solid transparent;
    border-radius: 16px;
    cursor: pointer;
    text-align: left;
    position: relative;
    overflow: hidden;
    font-family: inherit;
    font-size: inherit;
    line-height: 1.2;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    color: #fff;
    transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.25s ease, filter 0.15s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}

.putting30-touch-btn:active:not(:disabled),
.putting30-touch-btn.zone-pressed {
    transform: scale(0.97);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18) inset;
    filter: brightness(0.95);
}

.putting30-touch-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.putting30-touch-btn.zone-flash {
    animation: putting30TouchPop 0.48s cubic-bezier(0.34, 1.45, 0.64, 1);
}

@keyframes putting30TouchPop {
    0% { transform: scale(1); }
    35% { transform: scale(0.96); filter: brightness(0.92); }
    65% { transform: scale(1.02); filter: brightness(1.08); }
    100% { transform: scale(1); filter: brightness(1); }
}

.putting30-touch-btn.zone-made {
    background-color: #16a34a;
    background-image: linear-gradient(135deg, #14532d 0%, #16a34a 100%);
    border-color: rgba(255, 255, 255, 0.25);
}

.putting30-touch-btn.zone-missed {
    background-color: #dc2626;
    background-image: linear-gradient(135deg, #991b1b 0%, #dc2626 100%);
    border-color: rgba(255, 255, 255, 0.25);
}

.putting30-touch-btn .touch-icon {
    flex-shrink: 0;
    font-size: 1.5rem;
}

.putting30-touch-btn .touch-text {
    flex: 1;
}

.putting30-touch-btn .touch-label {
    display: block;
    font-weight: 700;
    font-size: 1rem;
}

.putting30-touch-btn .touch-sub {
    display: block;
    font-size: 0.78rem;
    opacity: 0.9;
    margin-top: 2px;
}

.putting30-touch-btn .touch-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    pointer-events: none;
    animation: putting30Ripple 0.55s ease-out forwards;
}

@keyframes putting30Ripple {
    from { transform: scale(0); opacity: 0.6; }
    to { transform: scale(1); opacity: 0; }
}

.putting30-toast {
    min-height: 0;
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-top: var(--spacing-2);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.putting30-toast.visible {
    opacity: 1;
}

.putting30-toast .toast-title {
    display: block;
    font-weight: 700;
}

.putting30-toast .toast-sub {
    display: block;
    font-size: 0.8rem;
    color: var(--color-gray-500);
    margin-top: 2px;
}

.putting30-putts-track h4 {
    font-size: 0.85rem;
    margin-bottom: var(--spacing-2);
    color: var(--color-gray-600);
}

.putting30-putts-scroll {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.putting30-empty-putts {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

.putting30-putt-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 44px;
    padding: 6px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    color: #fff;
    font-weight: 700;
}

.putting30-putt-chip small {
    font-size: 0.6rem;
    opacity: 0.85;
}

.putting30-putt-chip.zone-made { background: #16A34A; }
.putting30-putt-chip.zone-missed { background: #DC2626; }

.putting30-actions-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    padding-bottom: calc(var(--spacing-3) + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid var(--color-gray-200);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
    z-index: 100;
}

.putting30-actions-bar .btn {
    flex: 1;
    min-height: 48px;
}

.putting30-body.putting30-saving .putting30-interactive-section {
    opacity: 0.65;
    pointer-events: none;
}

.putting30-touch-panel.is-complete {
    opacity: 0.85;
}

/* Rapport */
.putting30-report-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

.putting30-stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--spacing-3);
}

.putting30-score-badge {
    padding: var(--spacing-4) var(--spacing-5);
    border-radius: var(--border-radius-lg);
    color: #fff;
    text-align: center;
    min-width: 140px;
}

.putting30-score-badge.elite { background: linear-gradient(135deg, #047857, #059669); }
.putting30-score-badge.good { background: linear-gradient(135deg, #059669, #10B981); }
.putting30-score-badge.average { background: linear-gradient(135deg, #D97706, #F59E0B); }
.putting30-score-badge.needs-work { background: linear-gradient(135deg, #DC2626, #EF4444); }

.putting30-score-value {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
}

.putting30-score-value small {
    font-size: 1.25rem;
    font-weight: 700;
}

.putting30-score-label {
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: 4px;
}

.putting30-score-date {
    font-size: 0.75rem;
    opacity: 0.85;
    margin-top: 4px;
}

.putting30-hero-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
}

.putting30-metric-pill {
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.putting30-metric-pill .pill-label {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--color-gray-500);
    margin-bottom: 2px;
}

.putting30-benchmarks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
}

.putting30-benchmark-card {
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-4);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.putting30-benchmark-card.perfect { border-left: 4px solid #059669; }
.putting30-benchmark-card.tour { border-left: 4px solid #2563eb; }
.putting30-benchmark-card.good { border-left: 4px solid #f59e0b; }

.putting30-benchmark-card h4 {
    margin-bottom: var(--spacing-2);
}

.putting30-benchmark-card p {
    font-size: 0.85rem;
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-2);
}

.putting30-benchmark-card .bench-status {
    font-weight: 700;
    color: #059669;
}

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

.putting30-report-chart-card {
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-4);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.putting30-report-putts-detail {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.putting30-report-putt-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 40px;
    padding: 4px 6px;
    border-radius: 8px;
    font-size: 0.7rem;
    color: #fff;
    font-weight: 700;
}

.putting30-report-putt-chip small {
    font-size: 0.58rem;
    opacity: 0.85;
}

.putting30-report-putt-chip.made { background: #16A34A; }
.putting30-report-putt-chip.missed { background: #DC2626; }

.putting30-table-scroll {
    overflow-x: auto;
}

.putting30-report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.putting30-report-table th,
.putting30-report-table td {
    padding: var(--spacing-3);
    text-align: left;
    border-bottom: 1px solid var(--color-gray-200);
}

.putting30-report-table th {
    background: #f3f4f6;
    font-weight: 600;
}

@media (min-width: 769px) {
    .putting30-test.test-container {
        max-width: 480px;
        margin: 0 auto;
    }

    .putting30-actions-bar {
        max-width: 520px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
    }
}

@media (max-width: 768px) {
    .putting30-test.test-container {
        padding: var(--spacing-3);
        padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px));
    }

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

    .putting30-report-hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* Bouton suppression dernière session — rapports performance */
.report-delete-last-session-bar {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 2px solid #fca5a5;
    border-radius: var(--border-radius-lg);
    margin: 0 0 var(--spacing-6) 0;
    padding: var(--spacing-4) var(--spacing-6);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.12);
}

.report-delete-last-session-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
    max-width: 1200px;
    margin: 0 auto;
}

.report-delete-back-btn {
    font-weight: 600;
    white-space: nowrap;
}

.btn-delete-last-session {
    font-size: var(--font-size-base);
    font-weight: 700;
    padding: 0.75rem 1.25rem;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
}

.btn-delete-last-session.loading {
    opacity: 0.85;
    cursor: wait;
}

.report-delete-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10050;
    background: #10b981;
    color: #fff;
    padding: 0.875rem 1.25rem;
    border-radius: var(--border-radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    transform: translateX(120%);
    transition: transform 0.3s ease;
    max-width: min(90vw, 360px);
}

.report-delete-toast.visible {
    transform: translateX(0);
}

.report-delete-toast-error {
    background: #ef4444;
}

@media (max-width: 768px) {
    .report-delete-last-session-inner {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .report-delete-back-btn,
    .btn-delete-last-session {
        width: 100%;
    }
}

/* The 3 in a Row Tour Drill */
.putting3row-credit {
    margin-top: 0.35rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted, #64748b);
}

.putting3row-info h3 {
    margin-top: var(--spacing-4);
    margin-bottom: var(--spacing-2);
}

.putting3row-info h3:first-of-type {
    margin-top: 0;
}

.putting3row-benchmarks-list {
    margin: 0;
    padding-left: 1.25rem;
}

.putting3row-benchmarks-list li + li {
    margin-top: 0.35rem;
}

.putting3row-video-link {
    margin-top: var(--spacing-4);
    margin-bottom: 0;
}

.putting3row-video-link a {
    color: #2563eb;
    font-weight: 600;
}

.putting50ft-distance-track {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.75rem 0 1rem;
    flex-wrap: wrap;
}

.putting50ft-distance-chip {
    min-width: 3.5rem;
}

.putting50ft-progress-fill {
    background: linear-gradient(90deg, #2563eb, #16a34a);
}

/* ===== Chipping Ladder Challenge ===== */
.ladder-body {
    background: var(--color-gray-50);
}

.ladder-test.test-container {
    max-width: 720px;
}

.ladder-author {
    font-size: 0.85rem;
    color: var(--color-gray-500);
    margin-top: 0.25rem;
}

.ladder-status-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.ladder-status-bar .status-item {
    background: white;
    border-radius: 12px;
    padding: 0.75rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.ladder-status-bar .status-label {
    display: block;
    font-size: 0.7rem;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ladder-cases-track {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}

.ladder-case-chip {
    min-width: 3.5rem;
    padding: 0.6rem 0.5rem;
    border-radius: 10px;
    background: var(--color-gray-100);
    text-align: center;
    font-weight: 700;
    font-size: 1.1rem;
    border: 2px solid transparent;
    transition: all 0.25s ease;
}

.ladder-case-chip small {
    display: block;
    font-size: 0.6rem;
    font-weight: 500;
    color: var(--color-gray-500);
}

.ladder-case-chip.current {
    border-color: #2563EB;
    background: #EFF6FF;
    transform: scale(1.08);
}

.ladder-case-chip.hit {
    background: #DCFCE7;
    border-color: #16A34A;
}

.ladder-case-chip.miss {
    background: #FEE2E2;
    border-color: #DC2626;
}

.ladder-touch-panel {
    background: white;
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: var(--shadow-md);
    margin-bottom: 1rem;
}

.ladder-touch-hint {
    text-align: center;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--color-gray-700);
}

.ladder-touch-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ladder-touch-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border: 2px solid var(--color-gray-200);
    border-radius: 14px;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 4.5rem;
}

.ladder-touch-btn.zone-hit { border-color: #86EFAC; }
.ladder-touch-btn.zone-miss { border-color: #FCA5A5; }

.ladder-touch-btn:active:not(:disabled),
.ladder-touch-btn.zone-pressed {
    transform: scale(0.98);
}

.ladder-touch-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ladder-touch-btn .touch-label {
    display: block;
    font-weight: 700;
    font-size: 1.05rem;
}

.ladder-touch-btn .touch-sub {
    font-size: 0.8rem;
    color: var(--color-gray-500);
}

.ladder-toast {
    margin-top: 1rem;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ladder-toast.visible { opacity: 1; }

.ladder-balls-scroll {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.ladder-ball-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    font-size: 1rem;
    background: var(--color-gray-100);
}

.ladder-ball-chip.ball-hit { background: #DCFCE7; }
.ladder-ball-chip.ball-miss { background: #FEE2E2; }

.ladder-ball-chip small {
    font-size: 0.65rem;
    color: var(--color-gray-600);
}

.ladder-hero-card {
    text-align: center;
    padding: 2rem;
    border-radius: 16px;
    background: linear-gradient(135deg, #EFF6FF, #F0FDF4);
    margin-bottom: 1.5rem;
}

.ladder-hero-score {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
}

.ladder-hero-label {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

.ladder-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.5rem;
}

.ladder-detail-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
    border-radius: 8px;
    background: var(--color-gray-50);
    font-size: 0.85rem;
}

.ladder-detail-item.hit { background: #DCFCE7; }
.ladder-detail-item.miss { background: #FEE2E2; }

@media (max-width: 480px) {
    .ladder-status-bar {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== Le Défi du Boîté ===== */
.boite-body {
    background: var(--color-gray-50);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.boite-test.test-container { max-width: 720px; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.boite-author { font-size: 0.85rem; color: var(--color-gray-500); margin-top: 0.25rem; }
.boite-info-box ol { padding-left: 1.25rem; margin: 0.5rem 0 0; }

.boite-status-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.boite-status-bar .status-item {
    background: white;
    border-radius: 12px;
    padding: 0.75rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.boite-status-bar .status-label {
    display: block;
    font-size: 0.7rem;
    color: var(--color-gray-500);
    text-transform: uppercase;
}

.boite-positions-track {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}

.boite-position-chip {
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    background: var(--color-gray-100);
    text-align: center;
    font-weight: 600;
    font-size: 0.85rem;
    border: 2px solid transparent;
}

.boite-position-chip small { display: block; font-size: 0.65rem; font-weight: 500; color: var(--color-gray-600); }
.boite-position-chip.current { border-color: #2563EB; background: #EFF6FF; }
.boite-position-chip.holed { background: #DCFCE7; border-color: #16A34A; }
.boite-position-chip.failed { background: #FEE2E2; border-color: #DC2626; }

.boite-touch-panel {
    background: white;
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: var(--shadow-md);
    margin-bottom: 1rem;
}

.boite-touch-panel.is-transitioning { pointer-events: none; }

.boite-touch-hint {
    text-align: center;
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-3);
    line-height: 1.35;
}

.boite-touch-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.boite-touch-buttons.zones-hidden,
.boite-touch-stack.zones-hidden {
    opacity: 0.35;
    transform: scale(0.98);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.boite-touch-buttons.zones-reveal,
.boite-touch-stack.zones-reveal {
    animation: putting456ZonesReveal 0.4s ease forwards;
}

.boite-touch-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    width: 100%;
    min-height: 72px;
    padding: var(--spacing-4);
    border: none;
    border-radius: 16px;
    cursor: pointer;
    text-align: left;
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    color: #fff;
    transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1),
                box-shadow 0.25s ease,
                filter 0.15s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
}

.boite-touch-btn:active:not(:disabled),
.boite-touch-btn.zone-pressed {
    transform: scale(0.97);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) inset;
    filter: brightness(0.95);
}

.boite-touch-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.boite-touch-btn.zone-flash {
    animation: putting456TouchPop 0.48s cubic-bezier(0.34, 1.45, 0.64, 1);
}

.boite-touch-btn.zone-made {
    min-height: 80px;
    background: linear-gradient(135deg, #14532d 0%, #15803d 100%);
    border: 2px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 16px rgba(20, 83, 45, 0.38);
}

.boite-touch-btn.zone-missed {
    min-height: 80px;
    background: linear-gradient(135deg, #991b1b 0%, #dc2626 100%);
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 16px rgba(153, 27, 27, 0.35);
}

.boite-touch-btn .touch-text { flex: 1; min-width: 0; }

.boite-touch-btn .touch-label {
    display: block;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.2;
}

.boite-touch-btn .touch-sub {
    display: block;
    font-size: 0.85rem;
    opacity: 0.92;
    margin-top: 4px;
}

.boite-touch-btn .touch-badge {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.18);
    border: 2px solid rgba(255, 255, 255, 0.35);
}

.boite-touch-btn .touch-badge-ok { color: #fef08a; }
.boite-touch-btn .touch-badge-miss { color: #fecaca; font-size: 1.35rem; }

.boite-toast {
    margin-top: var(--spacing-3);
    padding: var(--spacing-3);
    border-radius: var(--border-radius-lg);
    text-align: center;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.25s ease, max-height 0.25s ease, padding 0.25s ease, margin 0.25s ease;
}

.boite-toast.visible { opacity: 1; max-height: 88px; }
.boite-toast.toast-made { background: #ecfdf5; border: 1px solid #6ee7b7; }
.boite-toast.toast-missed { background: #fef2f2; border: 1px solid #fca5a5; }
.boite-toast .toast-title { display: block; font-weight: 700; }
.boite-toast.toast-made .toast-title { color: #065f46; }
.boite-toast.toast-missed .toast-title { color: #991b1b; }
.boite-toast .toast-sub { display: block; font-size: var(--font-size-sm); margin-top: 2px; }
.boite-toast.toast-made .toast-sub { color: #047857; }
.boite-toast.toast-missed .toast-sub { color: #b91c1c; }

.boite-balls-track h4 { font-size: 0.9rem; color: var(--color-gray-600); margin-bottom: 0.5rem; }
.boite-balls-scroll { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.boite-ball-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    background: var(--color-gray-100);
}
.boite-ball-chip.ball-made { background: #DCFCE7; }
.boite-ball-chip.ball-miss { background: #FEE2E2; }

.boite-hero-card {
    text-align: center;
    padding: 2rem;
    border-radius: 16px;
    background: linear-gradient(135deg, #F0FDF4, #EFF6FF);
    margin-bottom: 1.5rem;
}

.boite-hero-score { font-size: 3rem; font-weight: 800; }
.boite-detail-row {
    display: flex;
    flex-direction: column;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: 8px;
    background: var(--color-gray-50);
}

.boite-detail-row.pos-easy { border-left: 4px solid #22C55E; }
.boite-detail-row.pos-normal { border-left: 4px solid #EAB308; }
.boite-detail-row.pos-hard { border-left: 4px solid #EF4444; }

@media (max-width: 480px) {
    .boite-status-bar { grid-template-columns: repeat(2, 1fr); }
    .boite-touch-btn { min-height: 84px; padding: 1rem 1.1rem; }
    .boite-touch-btn .touch-label { font-size: 1.2rem; }
    .boite-touch-btn .touch-sub { font-size: 0.9rem; }
    .boite-touch-btn .touch-badge { width: 48px; height: 48px; font-size: 1.6rem; }
    .touch-visual-hole,
    .touch-visual-miss { width: 52px; height: 52px; }
}

/* ===== The Break Putt Drill ===== */
.breakputt-body {
    background: var(--color-gray-50);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.breakputt-test.test-container {
    max-width: 720px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

.breakputt-author { font-size: 0.85rem; color: var(--color-gray-500); margin-top: 0.25rem; }
.breakputt-header-compact h1 { margin-bottom: 0.25rem; }
.breakputt-info-box ol { padding-left: 1.25rem; margin: 0.5rem 0 0; }
.breakputt-date-compact { margin-bottom: 1rem; }

.breakputt-status-bar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.breakputt-status-bar .status-item {
    background: white;
    border-radius: 12px;
    padding: 0.75rem 0.5rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.breakputt-status-bar .status-label {
    display: block;
    font-size: 0.65rem;
    color: var(--color-gray-500);
    text-transform: uppercase;
}

.breakputt-stations-track {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
    margin-bottom: 1rem;
}

.breakputt-station-chip {
    padding: 0.45rem 0.55rem;
    border-radius: 10px;
    background: var(--color-gray-100);
    text-align: center;
    font-weight: 600;
    font-size: 0.75rem;
    border: 2px solid transparent;
    min-width: 3.2rem;
}

.breakputt-station-chip small { display: block; font-size: 0.6rem; font-weight: 500; color: var(--color-gray-600); }
.breakputt-station-chip.current { border-color: #2563EB; background: #EFF6FF; }
.breakputt-station-chip.good { background: #DCFCE7; border-color: #16A34A; }
.breakputt-station-chip.ok { background: #FEF9C3; border-color: #EAB308; }
.breakputt-station-chip.weak { background: #FEE2E2; border-color: #DC2626; }

.breakputt-touch-panel {
    background: white;
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: var(--shadow-md);
    margin-bottom: 1rem;
}

.breakputt-touch-panel.is-transitioning {
    pointer-events: none;
}

.breakputt-touch-hint {
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-3);
    line-height: 1.35;
}

.breakputt-touch-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.breakputt-touch-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    width: 100%;
    min-height: 72px;
    padding: var(--spacing-4);
    border: none;
    border-radius: 16px;
    cursor: pointer;
    text-align: left;
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    color: #fff;
    transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1),
                box-shadow 0.25s ease,
                filter 0.15s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
}

.breakputt-touch-btn:active:not(:disabled),
.breakputt-touch-btn.zone-pressed {
    transform: scale(0.97);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) inset;
    filter: brightness(0.95);
}

.breakputt-touch-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.breakputt-touch-btn.zone-flash {
    animation: putting456TouchPop 0.48s cubic-bezier(0.34, 1.45, 0.64, 1);
}

.breakputt-touch-btn.zone-made {
    min-height: 80px;
    background: linear-gradient(135deg, #14532d 0%, #15803d 100%);
    border: 2px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 16px rgba(20, 83, 45, 0.38);
}

.breakputt-touch-btn.zone-missed {
    min-height: 80px;
    background: linear-gradient(135deg, #991b1b 0%, #dc2626 100%);
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 16px rgba(153, 27, 27, 0.35);
}

.breakputt-touch-btn .touch-text {
    flex: 1;
    min-width: 0;
}

.breakputt-touch-btn .touch-label {
    display: block;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.2;
}

.breakputt-touch-btn .touch-sub {
    display: block;
    font-size: 0.85rem;
    opacity: 0.92;
    margin-top: 4px;
}

.breakputt-touch-btn .touch-badge {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.18);
    border: 2px solid rgba(255, 255, 255, 0.35);
}

.breakputt-touch-btn .touch-badge-ok { color: #fef08a; }
.breakputt-touch-btn .touch-badge-miss { color: #fecaca; font-size: 1.35rem; }

/* Visuel balle ratée (trou + balle décalée) */
.touch-visual-miss {
    position: relative;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.touch-visual-miss .cup {
    position: absolute;
    bottom: 2px;
    right: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #0c0a09;
    border: 3px solid rgba(255, 255, 255, 0.35);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
}

.touch-visual-miss .ball {
    position: absolute;
    top: 2px;
    left: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff, #9ca3af);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}

.breakputt-toast {
    margin-top: var(--spacing-3);
    padding: var(--spacing-3);
    border-radius: var(--border-radius-lg);
    text-align: center;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.25s ease, max-height 0.25s ease, padding 0.25s ease, margin 0.25s ease;
}

.breakputt-toast.visible {
    opacity: 1;
    max-height: 88px;
}

.breakputt-toast.toast-made {
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
}

.breakputt-toast.toast-missed {
    background: #fef2f2;
    border: 1px solid #fca5a5;
}

.breakputt-toast .toast-title {
    display: block;
    font-weight: 700;
    font-size: var(--font-size-base);
}

.breakputt-toast.toast-made .toast-title { color: #065f46; }
.breakputt-toast.toast-missed .toast-title { color: #991b1b; }

.breakputt-toast .toast-sub {
    display: block;
    font-size: var(--font-size-sm);
    margin-top: 2px;
}

.breakputt-toast.toast-made .toast-sub { color: #047857; }
.breakputt-toast.toast-missed .toast-sub { color: #b91c1c; }

.breakputt-putts-track h4 {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    color: var(--color-gray-600);
}

.breakputt-putts-scroll { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.breakputt-putt-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    background: var(--color-gray-100);
    font-size: 0.75rem;
}
.breakputt-putt-chip.made { background: #166534; color: #fff; }
.breakputt-putt-chip.missed { background: #991b1b; color: #fff; }
.breakputt-empty { color: var(--color-gray-500); font-size: 0.85rem; }

.breakputt-actions-bar { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* Report */
.breakputt-report-body { background: var(--color-gray-50); }
.breakputt-report-hero { margin-bottom: 1.5rem; }
.breakputt-hero-card {
    text-align: center;
    padding: 2rem;
    border-radius: 16px;
    background: linear-gradient(135deg, #EFF6FF, #F0FDF4);
}
.breakputt-hero-card.elite { background: linear-gradient(135deg, #FEF3C7, #DCFCE7); }
.breakputt-hero-card.good { background: linear-gradient(135deg, #EFF6FF, #DBEAFE); }
.breakputt-hero-card.average { background: linear-gradient(135deg, #F3F4F6, #E5E7EB); }
.breakputt-hero-card.needs-work { background: linear-gradient(135deg, #FEE2E2, #FEF2F2); }
.breakputt-hero-score { font-size: 3rem; font-weight: 800; }
.breakputt-hero-score small { font-size: 1.25rem; font-weight: 600; color: var(--color-gray-500); }

.breakputt-stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
}

.breakputt-benchmarks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.breakputt-report-charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.breakputt-report-chart-card {
    background: white;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: var(--shadow-sm);
}

.breakputt-detail-row {
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: 8px;
    background: var(--color-gray-50);
    border-left: 4px solid #2563EB;
}

.breakputt-table-scroll { overflow-x: auto; }
.breakputt-report-table { width: 100%; border-collapse: collapse; }
.breakputt-report-table th,
.breakputt-report-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--color-gray-200);
}

@media (max-width: 640px) {
    .breakputt-status-bar { grid-template-columns: repeat(2, 1fr); }
    .breakputt-test.test-container { max-width: 100%; }
    .breakputt-touch-btn { min-height: 84px; padding: 1rem 1.1rem; }
    .breakputt-touch-btn .touch-label { font-size: 1.2rem; }
    .breakputt-touch-btn .touch-sub { font-size: 0.9rem; }
    .breakputt-touch-btn .touch-badge { width: 48px; height: 48px; font-size: 1.6rem; }
    .touch-visual-hole,
    .touch-visual-miss { width: 52px; height: 52px; }
}

@media (min-width: 769px) {
    .breakputt-test.test-container {
        max-width: 440px;
        margin: 0 auto;
    }
}

/* ===== Lag Putt Test (Practice Round) ===== */
.lagputt-body {
    background: var(--color-gray-50);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.lagputt-test.test-container {
    max-width: 720px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

.lagputt-author { font-size: 0.85rem; color: var(--color-gray-500); margin-top: 0.25rem; }
.lagputt-info-box ol { padding-left: 1.25rem; margin: 0.5rem 0 0; }
.lagputt-date-compact { margin-bottom: 1rem; }

.lagputt-status-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.lagputt-status-bar .status-item {
    background: white;
    border-radius: 12px;
    padding: 0.75rem 0.5rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.lagputt-status-bar .status-label {
    display: block;
    font-size: 0.65rem;
    color: var(--color-gray-500);
    text-transform: uppercase;
}

.lagputt-status-bar .status-distance {
    background: linear-gradient(135deg, #1e3a8a, #2563eb);
    color: #fff;
}

.lagputt-status-bar .status-distance .status-label,
.lagputt-status-bar .status-distance strong,
.lagputt-status-bar .status-distance strong small { color: #fff; }

.lagputt-distance-badge.pulse-distance {
    animation: putting456DistancePulse 0.5s ease;
}

.lagputt-holes-track {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: center;
    margin-bottom: 1rem;
}

.lagputt-hole-chip {
    padding: 0.4rem 0.55rem;
    border-radius: 10px;
    background: var(--color-gray-100);
    font-weight: 700;
    font-size: 0.75rem;
    border: 2px solid transparent;
    min-width: 2.5rem;
    text-align: center;
}

.lagputt-hole-chip small { display: block; font-size: 0.6rem; font-weight: 600; }
.lagputt-hole-chip.current { border-color: #2563EB; background: #EFF6FF; }
.lagputt-hole-chip.great { background: #14532d; color: #fff; }
.lagputt-hole-chip.good { background: #DCFCE7; border-color: #16A34A; }
.lagputt-hole-chip.ok { background: #FEF9C3; border-color: #EAB308; }
.lagputt-hole-chip.weak { background: #FEE2E2; border-color: #DC2626; }

.lagputt-touch-panel {
    background: white;
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: var(--shadow-md);
    margin-bottom: 1rem;
}

.lagputt-touch-panel.is-transitioning { pointer-events: none; }

.lagputt-touch-hint {
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-3);
    line-height: 1.35;
}

.lagputt-touch-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 62vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 2px;
}

.lagputt-touch-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    width: 100%;
    min-height: 58px;
    padding: var(--spacing-3) var(--spacing-4);
    border: none;
    border-radius: 14px;
    cursor: pointer;
    text-align: left;
    position: relative;
    overflow: hidden;
    color: #fff;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14);
    transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1), filter 0.15s ease;
}

.lagputt-touch-btn:active:not(:disabled),
.lagputt-touch-btn.zone-pressed {
    transform: scale(0.97);
    filter: brightness(0.95);
}

.lagputt-touch-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.lagputt-touch-btn.zone-flash { animation: putting456TouchPop 0.48s cubic-bezier(0.34, 1.45, 0.64, 1); }

.lagputt-touch-btn.zone-triple { background: linear-gradient(135deg, #7f1d1d, #dc2626); }
.lagputt-touch-btn.zone-double { background: linear-gradient(135deg, #c2410c, #ea580c); }
.lagputt-touch-btn.zone-bogey { background: linear-gradient(135deg, #a16207, #ca8a04); color: #1f2937; }
.lagputt-touch-btn.zone-bogey .touch-sub { color: #422006; opacity: 0.85; }
.lagputt-touch-btn.zone-par { background: linear-gradient(135deg, #1d4ed8, #3b82f6); }
.lagputt-touch-btn.zone-birdie { background: linear-gradient(135deg, #15803d, #22c55e); }
.lagputt-touch-btn.zone-eagle {
    min-height: 68px;
    background: linear-gradient(135deg, #14532d, #15803d);
    border: 2px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 14px rgba(20, 83, 45, 0.35);
}

.lagputt-touch-btn .touch-icon { font-size: 1.4rem; flex-shrink: 0; width: 36px; text-align: center; }
.lagputt-touch-btn .touch-text { flex: 1; min-width: 0; }
.lagputt-touch-btn .touch-label { display: block; font-size: 0.95rem; font-weight: 700; line-height: 1.2; }
.lagputt-touch-btn .touch-sub { display: block; font-size: 0.72rem; opacity: 0.9; margin-top: 2px; }
.lagputt-touch-btn .touch-pts {
    font-size: 1.15rem;
    font-weight: 800;
    flex-shrink: 0;
    min-width: 36px;
    text-align: center;
}
.lagputt-touch-btn .pts-plus { color: #fecaca; }
.lagputt-touch-btn .pts-minus { color: #fef08a; }
.lagputt-touch-btn .pts-zero { color: #e0e7ff; }
.lagputt-touch-btn.zone-bogey .pts-plus { color: #422006; }

.lagputt-toast {
    margin-top: var(--spacing-3);
    padding: var(--spacing-3);
    background: #eff6ff;
    border: 1px solid #93c5fd;
    border-radius: var(--border-radius-lg);
    text-align: center;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.25s ease, max-height 0.25s ease;
}

.lagputt-toast.visible { opacity: 1; max-height: 80px; }
.lagputt-toast .toast-title { display: block; font-weight: 700; color: #1e3a8a; }
.lagputt-toast .toast-sub { display: block; font-size: var(--font-size-sm); color: #2563eb; margin-top: 2px; }

.lagputt-putts-track h4 { font-size: 0.9rem; margin-bottom: 0.5rem; color: var(--color-gray-600); }
.lagputt-putts-scroll { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.lagputt-putt-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    background: var(--color-gray-100);
    font-size: 0.75rem;
    color: #fff;
    min-width: 3rem;
}
.lagputt-putt-chip.zone-eagle { background: #14532d; }
.lagputt-putt-chip.zone-birdie { background: #16a34a; }
.lagputt-putt-chip.zone-par { background: #2563eb; }
.lagputt-putt-chip.zone-bogey { background: #ca8a04; color: #1f2937; }
.lagputt-putt-chip.zone-double { background: #ea580c; }
.lagputt-putt-chip.zone-triple { background: #dc2626; }
.lagputt-putt-chip strong { font-size: 0.7rem; margin-top: 2px; }
.lagputt-empty { color: var(--color-gray-500); font-size: 0.85rem; }
.lagputt-actions-bar { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* Report */
.lagputt-report-body { background: var(--color-gray-50); }
.lagputt-report-hero { margin-bottom: 1.5rem; }
.lagputt-hero-card {
    text-align: center;
    padding: 2rem;
    border-radius: 16px;
    background: linear-gradient(135deg, #EFF6FF, #F0FDF4);
}
.lagputt-hero-card.elite { background: linear-gradient(135deg, #FEF3C7, #DCFCE7); }
.lagputt-hero-card.good { background: linear-gradient(135deg, #EFF6FF, #DBEAFE); }
.lagputt-hero-card.average { background: linear-gradient(135deg, #F3F4F6, #E5E7EB); }
.lagputt-hero-card.needs-work { background: linear-gradient(135deg, #FEE2E2, #FEF2F2); }
.lagputt-hero-score { font-size: 3rem; font-weight: 800; }

.lagputt-stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
}

.lagputt-benchmarks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.lagputt-report-charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.lagputt-report-chart-card {
    background: white;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: var(--shadow-sm);
}

.lagputt-detail-row {
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.4rem;
    border-radius: 8px;
    background: var(--color-gray-50);
    font-size: 0.85rem;
    border-left: 4px solid #2563EB;
}
.lagputt-detail-row.outcome-eagle { border-left-color: #14532d; }
.lagputt-detail-row.outcome-birdie { border-left-color: #16a34a; }
.lagputt-detail-row.outcome-par { border-left-color: #2563eb; }
.lagputt-detail-row.outcome-bogey { border-left-color: #ca8a04; }
.lagputt-detail-row.outcome-double_bogey { border-left-color: #ea580c; }
.lagputt-detail-row.outcome-triple_bogey { border-left-color: #dc2626; }

.lagputt-table-scroll { overflow-x: auto; }
.lagputt-report-table { width: 100%; border-collapse: collapse; }
.lagputt-report-table th,
.lagputt-report-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--color-gray-200);
}

@media (max-width: 640px) {
    .lagputt-status-bar { grid-template-columns: repeat(2, 1fr); }
    .lagputt-touch-btn { min-height: 62px; }
    .lagputt-touch-btn.zone-eagle { min-height: 72px; }
    .lagputt-touch-btn .touch-label { font-size: 1rem; }
}

@media (min-width: 769px) {
    .lagputt-test.test-container { max-width: 440px; margin: 0 auto; }
}

/* ===== 6-8-10 M Up/Down Drill ===== */
.updown6810-body {
    background: var(--color-gray-50);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.updown6810-test.test-container {
    max-width: 720px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

.updown6810-author { font-size: 0.85rem; color: var(--color-gray-500); margin-top: 0.25rem; }
.updown6810-info-box ol { padding-left: 1.25rem; margin: 0.5rem 0 0; }
.updown6810-date-compact { margin-bottom: 1rem; }

.updown6810-setup-diagram {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: white;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-gray-600);
}

.updown6810-setup-diagram .setup-hole {
    font-size: 1.1rem;
    padding: 0 0.35rem;
    color: #15803d;
}

.updown6810-setup-diagram .setup-marker {
    padding: 0.25rem 0.4rem;
    background: var(--color-gray-100);
    border-radius: 6px;
}

.updown6810-status-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.updown6810-status-bar .status-item {
    background: white;
    border-radius: 12px;
    padding: 0.75rem 0.5rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.updown6810-status-bar .status-label {
    display: block;
    font-size: 0.65rem;
    color: var(--color-gray-500);
    text-transform: uppercase;
}

.updown6810-stations-track {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
    margin-bottom: 1rem;
}

.updown6810-station-chip {
    padding: 0.45rem 0.55rem;
    border-radius: 10px;
    background: var(--color-gray-100);
    font-weight: 700;
    font-size: 0.75rem;
    border: 2px solid transparent;
    text-align: center;
}

.updown6810-station-chip small { display: block; font-size: 0.6rem; }
.updown6810-station-chip.current { border-color: #2563EB; background: #EFF6FF; }
.updown6810-station-chip.great { background: #14532d; color: #fff; }
.updown6810-station-chip.good { background: #DCFCE7; border-color: #16A34A; }
.updown6810-station-chip.ok { background: #FEF9C3; border-color: #EAB308; }
.updown6810-station-chip.weak { background: #FEE2E2; border-color: #DC2626; }

.updown6810-touch-panel {
    background: white;
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: var(--shadow-md);
    margin-bottom: 1rem;
}

.updown6810-touch-panel.is-transitioning { pointer-events: none; }

.updown6810-touch-hint {
    text-align: center;
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-3);
    line-height: 1.35;
}

.updown6810-touch-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.updown6810-touch-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    width: 100%;
    min-height: 68px;
    padding: var(--spacing-3) var(--spacing-4);
    border: none;
    border-radius: 14px;
    cursor: pointer;
    color: #fff;
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14);
    transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1), filter 0.15s ease;
}

.updown6810-touch-btn:active:not(:disabled),
.updown6810-touch-btn.zone-pressed {
    transform: scale(0.97);
    filter: brightness(0.95);
}

.updown6810-touch-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.updown6810-touch-btn.zone-flash { animation: putting456TouchPop 0.48s cubic-bezier(0.34, 1.45, 0.64, 1); }

.updown6810-touch-btn.zone-bogey {
    background: linear-gradient(135deg, #a16207, #ca8a04);
    color: #1f2937;
}
.updown6810-touch-btn.zone-bogey .touch-sub { color: #422006; opacity: 0.85; }
.updown6810-touch-btn.zone-bogey .pts-plus { color: #422006; }

.updown6810-touch-btn.zone-par {
    background: linear-gradient(135deg, #1d4ed8, #3b82f6);
}

.updown6810-touch-btn.zone-birdie {
    min-height: 76px;
    background: linear-gradient(135deg, #14532d, #15803d);
    border: 2px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 14px rgba(20, 83, 45, 0.35);
}

.updown6810-touch-btn .touch-icon { font-size: 1.35rem; flex-shrink: 0; width: 36px; text-align: center; }
.updown6810-touch-btn .touch-text { flex: 1; min-width: 0; }
.updown6810-touch-btn .touch-label { display: block; font-size: 1rem; font-weight: 700; line-height: 1.2; }
.updown6810-touch-btn .touch-sub { display: block; font-size: 0.75rem; opacity: 0.9; margin-top: 2px; }
.updown6810-touch-btn .touch-pts {
    font-size: 1.15rem;
    font-weight: 800;
    flex-shrink: 0;
    min-width: 36px;
    text-align: center;
}
.updown6810-touch-btn .pts-plus { color: #fecaca; }
.updown6810-touch-btn .pts-minus { color: #fef08a; }
.updown6810-touch-btn .pts-zero { color: #e0e7ff; }

.updown6810-toast {
    margin-top: var(--spacing-3);
    padding: var(--spacing-3);
    background: #eff6ff;
    border: 1px solid #93c5fd;
    border-radius: var(--border-radius-lg);
    text-align: center;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.25s ease, max-height 0.25s ease;
}

.updown6810-toast.visible { opacity: 1; max-height: 80px; }
.updown6810-toast .toast-title { display: block; font-weight: 700; color: #1e3a8a; }
.updown6810-toast .toast-sub { display: block; font-size: var(--font-size-sm); color: #2563eb; margin-top: 2px; }

.updown6810-putts-track h4 { font-size: 0.9rem; margin-bottom: 0.5rem; color: var(--color-gray-600); }
.updown6810-putts-scroll { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.updown6810-putt-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    font-size: 0.75rem;
    color: #fff;
    min-width: 2.8rem;
}
.updown6810-putt-chip.zone-birdie { background: #14532d; }
.updown6810-putt-chip.zone-par { background: #2563eb; }
.updown6810-putt-chip.zone-bogey { background: #ca8a04; color: #1f2937; }
.updown6810-putt-chip strong { font-size: 0.7rem; margin-top: 2px; }
.updown6810-empty { color: var(--color-gray-500); font-size: 0.85rem; }
.updown6810-actions-bar { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* Report */
.updown6810-report-body { background: var(--color-gray-50); }
.updown6810-report-hero { margin-bottom: 1.5rem; }
.updown6810-hero-card {
    text-align: center;
    padding: 2rem;
    border-radius: 16px;
    background: linear-gradient(135deg, #EFF6FF, #F0FDF4);
}
.updown6810-hero-card.elite { background: linear-gradient(135deg, #FEF3C7, #DCFCE7); }
.updown6810-hero-card.good { background: linear-gradient(135deg, #EFF6FF, #DBEAFE); }
.updown6810-hero-card.average { background: linear-gradient(135deg, #F3F4F6, #E5E7EB); }
.updown6810-hero-card.needs-work { background: linear-gradient(135deg, #FEE2E2, #FEF2F2); }
.updown6810-hero-score { font-size: 3rem; font-weight: 800; }

.updown6810-stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
}

.updown6810-benchmarks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.updown6810-report-charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.updown6810-report-chart-card {
    background: white;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: var(--shadow-sm);
}

.updown6810-detail-row {
    padding: 0.65rem 0.75rem;
    margin-bottom: 0.4rem;
    border-radius: 8px;
    background: var(--color-gray-50);
    font-size: 0.85rem;
    border-left: 4px solid #2563EB;
}

.updown6810-table-scroll { overflow-x: auto; }
.updown6810-report-table { width: 100%; border-collapse: collapse; }
.updown6810-report-table th,
.updown6810-report-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--color-gray-200);
}

@media (max-width: 640px) {
    .updown6810-status-bar { grid-template-columns: repeat(2, 1fr); }
    .updown6810-touch-btn { min-height: 72px; }
    .updown6810-touch-btn.zone-birdie { min-height: 80px; }
    .updown6810-touch-btn .touch-label { font-size: 1.05rem; }
}

@media (min-width: 769px) {
    .updown6810-test.test-container { max-width: 440px; margin: 0 auto; }
}

/* ===== Hell Drill (Xtra Pressure) ===== */
.helldrill-body {
    background: var(--color-gray-50);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.helldrill-test.test-container {
    max-width: 720px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

.helldrill-author { font-size: 0.85rem; color: var(--color-gray-500); margin-top: 0.25rem; }
.helldrill-info-box ol { padding-left: 1.25rem; margin: 0.5rem 0 0; }
.helldrill-date-compact { margin-bottom: 1rem; }

.helldrill-status-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.helldrill-status-bar .status-item {
    background: white;
    border-radius: 12px;
    padding: 0.75rem 0.5rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.helldrill-status-bar .status-label {
    display: block;
    font-size: 0.65rem;
    color: var(--color-gray-500);
    text-transform: uppercase;
}

.helldrill-status-bar .status-current strong { color: #d97706; }
.helldrill-status-bar .status-win strong { color: #059669; }

.helldrill-green-visual {
    position: relative;
    width: 220px;
    height: 220px;
    margin: 0 auto 1.25rem;
}

.helldrill-hole {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    z-index: 2;
}

.helldrill-markers-ring {
    position: absolute;
    inset: 0;
}

.helldrill-marker-chip {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 52px;
    margin-left: -26px;
    margin-top: -20px;
    padding: 0.35rem 0.25rem;
    border-radius: 10px;
    background: #e5e7eb;
    text-align: center;
    font-weight: 700;
    font-size: 0.7rem;
    border: 2px solid #d1d5db;
    color: var(--color-gray-800);
    transform: rotate(calc(var(--i) * 72deg)) translateY(-90px) rotate(calc(var(--i) * -72deg));
}

.helldrill-marker-chip small { display: block; font-size: 0.6rem; font-weight: 600; color: var(--color-gray-600); }
.helldrill-marker-chip.current {
    border-color: #2563EB;
    background: #dbeafe;
    color: #1e40af;
    box-shadow: 0 0 12px rgba(37, 99, 235, 0.35);
    transform: rotate(calc(var(--i) * 72deg)) translateY(-90px) rotate(calc(var(--i) * -72deg)) scale(1.06);
}
.helldrill-marker-chip.safe { background: #166534; color: #fff; border-color: #16a34a; }
.helldrill-marker-chip.safe small { color: rgba(255, 255, 255, 0.85); }
.helldrill-marker-chip.danger { background: #991b1b; color: #fff; border-color: #dc2626; animation: helldrillPulse 1.2s ease infinite; }
.helldrill-marker-chip.danger small { color: rgba(255, 255, 255, 0.9); }
.helldrill-marker-chip.pickup-zone { background: #dbeafe; color: #1e40af; border-color: #3b82f6; }
.helldrill-marker-chip.removed { background: #166534; color: #fff; border-color: #16a34a; opacity: 0.9; }
.helldrill-marker-chip.removed small { color: rgba(255, 255, 255, 0.85); }

@keyframes helldrillPulse {
    0%, 100% { box-shadow: 0 0 0 rgba(220, 38, 38, 0); }
    50% { box-shadow: 0 0 14px rgba(220, 38, 38, 0.45); }
}

.helldrill-touch-panel {
    background: white;
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: var(--shadow-md);
    margin-bottom: 1rem;
}

.helldrill-touch-panel.is-transitioning { pointer-events: none; }

.helldrill-touch-hint {
    text-align: center;
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-3);
}

.helldrill-touch-stack { display: flex; flex-direction: column; gap: 12px; }

.helldrill-touch-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    width: 100%;
    min-height: 80px;
    padding: var(--spacing-4);
    border: none;
    border-radius: 16px;
    cursor: pointer;
    color: #fff;
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
    transition: transform 0.25s ease, filter 0.15s ease;
}

.helldrill-touch-btn:active:not(:disabled),
.helldrill-touch-btn.zone-pressed { transform: scale(0.97); filter: brightness(0.95); }
.helldrill-touch-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.helldrill-touch-btn.zone-flash { animation: putting456TouchPop 0.48s cubic-bezier(0.34, 1.45, 0.64, 1); }

.helldrill-touch-btn.zone-missed {
    background: linear-gradient(135deg, #991b1b, #dc2626);
}

.helldrill-touch-btn.zone-made {
    min-height: 88px;
    background: linear-gradient(135deg, #14532d, #15803d);
    border: 2px solid rgba(255, 255, 255, 0.25);
}

.helldrill-touch-btn .touch-text { flex: 1; min-width: 0; }
.helldrill-touch-btn .touch-label { display: block; font-size: 1.1rem; font-weight: 800; }
.helldrill-touch-btn .touch-sub { display: block; font-size: 0.8rem; opacity: 0.9; margin-top: 4px; }
.helldrill-touch-btn .touch-badge {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 800;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.18);
    border: 2px solid rgba(255, 255, 255, 0.35);
}
.helldrill-touch-btn .touch-badge-ok { color: #fef08a; }
.helldrill-touch-btn .touch-badge-miss { color: #fecaca; }

.helldrill-toast {
    margin-top: var(--spacing-3);
    padding: var(--spacing-3);
    border-radius: var(--border-radius-lg);
    text-align: center;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.25s ease, max-height 0.25s ease;
}

.helldrill-toast.visible { opacity: 1; max-height: 80px; }
.helldrill-toast.toast-made { background: #ecfdf5; border: 1px solid #6ee7b7; }
.helldrill-toast.toast-missed { background: #fef2f2; border: 1px solid #fca5a5; }
.helldrill-toast .toast-title { display: block; font-weight: 700; }
.helldrill-toast.toast-made .toast-title { color: #065f46; }
.helldrill-toast.toast-missed .toast-title { color: #991b1b; }
.helldrill-toast .toast-sub { display: block; font-size: var(--font-size-sm); margin-top: 2px; color: var(--color-gray-600); }

.helldrill-putts-track h4 { font-size: 0.9rem; color: var(--color-gray-600); margin-bottom: 0.5rem; }
.helldrill-putts-scroll { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.helldrill-putt-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    font-size: 0.75rem;
    min-width: 2.5rem;
}
.helldrill-putt-chip.made { background: #166534; color: #fff; }
.helldrill-putt-chip.missed { background: #991b1b; color: #fff; }
.helldrill-empty { color: var(--color-gray-500); font-size: 0.85rem; }
.helldrill-actions-bar { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* Report */
.helldrill-report-body { background: var(--color-gray-50); }
.helldrill-report-hero { margin-bottom: 1.5rem; }
.helldrill-hero-card {
    text-align: center;
    padding: 2rem;
    border-radius: 16px;
    background: linear-gradient(135deg, #1a1a1a, #450a0a);
    color: #fff;
}
.helldrill-hero-card.elite { background: linear-gradient(135deg, #14532d, #052e16); }
.helldrill-hero-card.good { background: linear-gradient(135deg, #422006, #713f12); }
.helldrill-hero-card.average { background: linear-gradient(135deg, #374151, #1f2937); }
.helldrill-hero-score { font-size: 3rem; font-weight: 800; color: #fef08a; }

.helldrill-stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
}

.helldrill-benchmarks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.helldrill-report-charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.helldrill-report-chart-card {
    background: white;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: var(--shadow-sm);
}

.helldrill-detail-row {
    padding: 0.55rem 0.75rem;
    margin-bottom: 0.35rem;
    border-radius: 8px;
    background: var(--color-gray-50);
    font-size: 0.82rem;
    border-left: 4px solid #737373;
}
.helldrill-detail-row.made { border-left-color: #16a34a; }
.helldrill-detail-row.missed { border-left-color: #dc2626; }

.helldrill-table-scroll { overflow-x: auto; }
.helldrill-report-table { width: 100%; border-collapse: collapse; }
.helldrill-report-table th,
.helldrill-report-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--color-gray-200);
}

@media (max-width: 640px) {
    .helldrill-status-bar { grid-template-columns: repeat(2, 1fr); }
    .helldrill-touch-btn { min-height: 84px; }
    .helldrill-touch-btn.zone-made { min-height: 92px; }
    .helldrill-green-visual { width: 200px; height: 200px; }
    .helldrill-marker-chip { transform: rotate(calc(var(--i) * 72deg)) translateY(-80px) rotate(calc(var(--i) * -72deg)); }
}

@media (min-width: 769px) {
    .helldrill-test.test-container { max-width: 440px; margin: 0 auto; }
}

/* ===== Technical Circle Drill ===== */
.techcircle-body {
    background: var(--color-gray-50);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.techcircle-test.test-container {
    max-width: 720px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

.techcircle-author { font-size: 0.85rem; color: var(--color-gray-500); margin-top: 0.25rem; }
.techcircle-info-box ol { padding-left: 1.25rem; margin: 0.5rem 0 0; }
.techcircle-date-compact { margin-bottom: 1rem; }

.techcircle-round-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 1rem;
}

.techcircle-round-legend .legend-chip {
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.techcircle-round-legend .type-classic { background: #dbeafe; color: #1e40af; }
.techcircle-round-legend .type-technical { background: #ede9fe; color: #5b21b6; }
.techcircle-round-legend .type-aim { background: #d1fae5; color: #065f46; }

.techcircle-status-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.techcircle-status-bar .status-item {
    background: white;
    border-radius: 12px;
    padding: 0.75rem 0.5rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.techcircle-status-bar .status-label {
    display: block;
    font-size: 0.65rem;
    color: var(--color-gray-500);
    text-transform: uppercase;
}

.techcircle-clock-visual {
    position: relative;
    width: 220px;
    height: 220px;
    margin: 0 auto 1.25rem;
}

.techcircle-hole {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    z-index: 2;
}

.techcircle-positions-ring {
    position: absolute;
    inset: 0;
}

.techcircle-position-chip {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    margin-left: -24px;
    margin-top: -18px;
    padding: 0.3rem 0.2rem;
    border-radius: 10px;
    background: #e5e7eb;
    text-align: center;
    font-weight: 700;
    font-size: 0.85rem;
    border: 2px solid #d1d5db;
    transform: rotate(calc(var(--i) * 45deg)) translateY(-92px) rotate(calc(var(--i) * -45deg));
}

.techcircle-position-chip small { display: block; font-size: 0.6rem; font-weight: 600; }
.techcircle-position-chip.type-classic { background: #dbeafe; border-color: #93c5fd; }
.techcircle-position-chip.type-technical { background: #ede9fe; border-color: #c4b5fd; }
.techcircle-position-chip.type-aim { background: #d1fae5; border-color: #6ee7b7; }
.techcircle-position-chip.current { border-color: #2563EB; box-shadow: 0 0 12px rgba(37, 99, 235, 0.45); transform: rotate(calc(var(--i) * 45deg)) translateY(-92px) rotate(calc(var(--i) * -45deg)) scale(1.08); }
.techcircle-position-chip.made { background: #166534; color: #fff; border-color: #16a34a; }
.techcircle-position-chip.missed { background: #991b1b; color: #fff; border-color: #dc2626; }

.techcircle-touch-panel {
    background: white;
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: var(--shadow-md);
    margin-bottom: 1rem;
}

.techcircle-touch-panel.is-transitioning { pointer-events: none; }
.techcircle-touch-hint { text-align: center; font-weight: 600; font-size: var(--font-size-sm); color: var(--color-gray-600); margin-bottom: var(--spacing-3); }
.techcircle-touch-stack { display: flex; flex-direction: column; gap: 12px; }

.techcircle-touch-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    width: 100%;
    min-height: 80px;
    padding: var(--spacing-4);
    border: none;
    border-radius: 16px;
    cursor: pointer;
    color: #fff;
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
    transition: transform 0.25s ease, filter 0.15s ease;
}

.techcircle-touch-btn:active:not(:disabled),
.techcircle-touch-btn.zone-pressed { transform: scale(0.97); filter: brightness(0.95); }
.techcircle-touch-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.techcircle-touch-btn.zone-flash { animation: putting456TouchPop 0.48s cubic-bezier(0.34, 1.45, 0.64, 1); }
.techcircle-touch-btn.zone-missed { background: linear-gradient(135deg, #991b1b, #dc2626); }
.techcircle-touch-btn.zone-made {
    min-height: 88px;
    background: linear-gradient(135deg, #14532d, #15803d);
    border: 2px solid rgba(255, 255, 255, 0.25);
}

.techcircle-touch-btn .touch-text { flex: 1; min-width: 0; }
.techcircle-touch-btn .touch-label { display: block; font-size: 1.1rem; font-weight: 800; }
.techcircle-touch-btn .touch-sub { display: block; font-size: 0.8rem; opacity: 0.9; margin-top: 4px; }
.techcircle-touch-btn .touch-badge {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; font-weight: 800;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.18);
    border: 2px solid rgba(255, 255, 255, 0.35);
}
.techcircle-touch-btn .touch-badge-ok { color: #fef08a; }
.techcircle-touch-btn .touch-badge-miss { color: #fecaca; }

.techcircle-toast {
    margin-top: var(--spacing-3);
    padding: var(--spacing-3);
    border-radius: var(--border-radius-lg);
    text-align: center;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.25s ease, max-height 0.25s ease;
}
.techcircle-toast.visible { opacity: 1; max-height: 80px; }
.techcircle-toast.toast-made { background: #ecfdf5; border: 1px solid #6ee7b7; }
.techcircle-toast.toast-missed { background: #fef2f2; border: 1px solid #fca5a5; }
.techcircle-toast .toast-title { display: block; font-weight: 700; }
.techcircle-toast.toast-made .toast-title { color: #065f46; }
.techcircle-toast.toast-missed .toast-title { color: #991b1b; }
.techcircle-toast .toast-sub { display: block; font-size: var(--font-size-sm); margin-top: 2px; }

.techcircle-putts-track h4 { font-size: 0.9rem; color: var(--color-gray-600); margin-bottom: 0.5rem; }
.techcircle-putts-scroll { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.techcircle-putt-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    font-size: 0.75rem;
    min-width: 2.5rem;
}
.techcircle-putt-chip.made { background: #166534; color: #fff; }
.techcircle-putt-chip.missed { background: #991b1b; color: #fff; }
.techcircle-empty { color: var(--color-gray-500); font-size: 0.85rem; }
.techcircle-actions-bar { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* Report */
.techcircle-report-body { background: var(--color-gray-50); }
.techcircle-report-hero { margin-bottom: 1.5rem; }
.techcircle-hero-card {
    text-align: center;
    padding: 2rem;
    border-radius: 16px;
    background: linear-gradient(135deg, #EFF6FF, #F0FDF4);
}
.techcircle-hero-card.elite { background: linear-gradient(135deg, #FEF3C7, #DCFCE7); }
.techcircle-hero-card.good { background: linear-gradient(135deg, #EFF6FF, #DBEAFE); }
.techcircle-hero-card.average { background: linear-gradient(135deg, #F3F4F6, #E5E7EB); }
.techcircle-hero-card.needs-work { background: linear-gradient(135deg, #FEE2E2, #FEF2F2); }
.techcircle-hero-score { font-size: 3rem; font-weight: 800; }
.techcircle-hero-score small { font-size: 1.25rem; font-weight: 600; color: var(--color-gray-500); }

.techcircle-stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
}

.techcircle-benchmarks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.techcircle-report-charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.techcircle-report-chart-card {
    background: white;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: var(--shadow-sm);
}

.techcircle-detail-row {
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.4rem;
    border-radius: 8px;
    background: var(--color-gray-50);
    border-left: 4px solid #2563EB;
}

.techcircle-table-scroll { overflow-x: auto; }
.techcircle-report-table { width: 100%; border-collapse: collapse; }
.techcircle-report-table th,
.techcircle-report-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--color-gray-200);
}

@media (max-width: 640px) {
    .techcircle-status-bar { grid-template-columns: repeat(2, 1fr); }
    .techcircle-touch-btn { min-height: 84px; }
    .techcircle-touch-btn.zone-made { min-height: 92px; }
    .techcircle-clock-visual { width: 200px; height: 200px; }
    .techcircle-position-chip { transform: rotate(calc(var(--i) * 45deg)) translateY(-82px) rotate(calc(var(--i) * -45deg)); }
}

@media (min-width: 769px) {
    .techcircle-test.test-container { max-width: 440px; margin: 0 auto; }
}

/* ==========================================================================
   Rapport Wedging FlightScope — refonte mobile / niveau 3
   ========================================================================== */

.wedging-report-body {
    background: #f3f4f6;
}

.wedging-report-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 1rem;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0));
    overflow-x: hidden;
}

.wedging-report-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-gray-200);
}

.wedging-report-title-block h1 {
    margin: 0;
    font-size: clamp(1.25rem, 4.5vw, 1.75rem);
    line-height: 1.25;
    color: var(--color-gray-900);
}

.wedging-report-title-block .report-metadata {
    margin-top: 0.35rem;
    font-size: 0.85rem;
    color: var(--color-gray-600);
    word-break: break-word;
}

.wedging-sticky-nav {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    gap: 0.35rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0.5rem 0 0.75rem;
    margin-bottom: 0.5rem;
    background: rgba(243, 244, 246, 0.95);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--color-gray-200);
}

.wedging-sticky-nav::-webkit-scrollbar { display: none; }

.wedging-nav-btn {
    flex: 0 0 auto;
    border: 1px solid var(--color-gray-300);
    background: #fff;
    color: var(--color-gray-700);
    border-radius: 999px;
    padding: 0.45rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.wedging-nav-btn.active {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

.wedging-report-main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.wedging-report-section {
    background: #fff;
    border-radius: 14px;
    padding: 1rem 1.1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.wedging-report-section > h2,
.wedging-report-section > summary h2 {
    margin: 0 0 0.75rem;
    font-size: clamp(1.05rem, 3.5vw, 1.35rem);
    color: var(--color-gray-900);
}

.wedging-section-desc {
    margin: -0.35rem 0 1rem;
    color: var(--color-gray-600);
    font-size: 0.88rem;
    line-height: 1.45;
}

.wedging-hero {
    display: grid;
    gap: 0.75rem;
}

.wedging-verdict {
    border-radius: 12px;
    padding: 1rem 1.1rem;
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

.wedging-verdict.is-good { background: linear-gradient(135deg, #059669, #047857); }
.wedging-verdict.is-warn { background: linear-gradient(135deg, #d97706, #b45309); }
.wedging-verdict.is-bad { background: linear-gradient(135deg, #dc2626, #b91c1c); }

.wedging-verdict-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.9;
}

.wedging-verdict-title {
    margin: 0.25rem 0 0;
    font-size: clamp(1.1rem, 4vw, 1.45rem);
    font-weight: 700;
}

.wedging-verdict-sub {
    margin: 0.35rem 0 0;
    font-size: 0.88rem;
    opacity: 0.95;
}

.wedging-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.wedging-stat-card {
    background: var(--color-gray-50);
    border-radius: 10px;
    padding: 0.85rem 0.75rem;
    text-align: center;
    border-left: 4px solid #3b82f6;
    min-width: 0;
}

.wedging-stat-card.success { border-left-color: #10b981; }
.wedging-stat-card.warning { border-left-color: #f59e0b; }
.wedging-stat-card.danger { border-left-color: #ef4444; }

.wedging-stat-value {
    font-size: clamp(1.25rem, 5vw, 1.75rem);
    font-weight: 700;
    color: var(--color-gray-900);
    line-height: 1.1;
}

.wedging-stat-label {
    margin-top: 0.25rem;
    font-size: 0.72rem;
    color: var(--color-gray-600);
    line-height: 1.3;
}

.wedging-chart-card {
    background: var(--color-gray-50);
    border-radius: 12px;
    padding: 0.85rem;
    overflow: hidden;
}

.wedging-chart-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
}

.wedging-chart-toolbar-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 1 1 auto;
}

.wedging-chart-toolbar-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-gray-800);
}

.wedging-chart-toolbar-count {
    font-size: 0.8rem;
    font-weight: 600;
    color: #2563eb;
}

.wedging-chart-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.wedging-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--color-gray-600);
    white-space: nowrap;
}

.wedging-scope-select {
    font-size: 0.78rem;
    padding: 0.15rem 0.35rem;
    border-radius: 6px;
    border: 1px solid var(--color-gray-300);
    background: #fff;
    color: var(--color-gray-700);
    max-width: 7.5rem;
}

.wedging-time-scope-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.85rem;
    padding: 0.65rem 0.75rem;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid var(--color-gray-200);
}

.wedging-time-scope-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-gray-800);
}

.wedging-time-scope-select {
    max-width: 11rem;
}

.wedging-time-scope-count {
    font-size: 0.78rem;
    font-weight: 600;
    color: #2563eb;
    margin-left: auto;
}

.wedging-btn-icon {
    min-width: 2rem;
    padding: 0.35rem 0.5rem !important;
    font-size: 0.85rem !important;
}

.wedging-chart-wrapper {
    position: relative;
    width: 100%;
    height: clamp(260px, 58vw, 420px);
    overflow: hidden;
}

.wedging-chart-wrapper canvas {
    max-width: 100%;
}

.wedging-advanced-block {
    border: 1px solid var(--color-gray-200);
    border-radius: 12px;
    overflow: hidden;
}

.wedging-advanced-block summary {
    list-style: none;
    cursor: pointer;
    padding: 0.85rem 1rem;
    background: var(--color-gray-50);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.wedging-advanced-block summary::-webkit-details-marker { display: none; }

.wedging-advanced-block summary h2 {
    margin: 0;
    font-size: 1rem;
}

.wedging-advanced-block summary::after {
    content: '▼';
    font-size: 0.75rem;
    color: var(--color-gray-500);
    transition: transform 0.2s ease;
}

.wedging-advanced-block[open] summary::after {
    transform: rotate(180deg);
}

.wedging-advanced-inner {
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.wedging-distance-tabs {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.35rem;
    margin-bottom: 0.75rem;
}

.wedging-distance-tabs::-webkit-scrollbar { display: none; }

.wedging-distance-tab {
    flex: 0 0 auto;
    border: 1px solid var(--color-gray-300);
    background: #fff;
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--color-gray-700);
}

.wedging-distance-tab.active {
    background: #059669;
    border-color: #059669;
    color: #fff;
}

.wedging-distance-panel {
    display: none;
}

.wedging-distance-panel.active {
    display: block;
}

.wedging-distance-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.wedging-distance-kpi {
    background: #fff;
    border: 1px solid var(--color-gray-200);
    border-radius: 8px;
    padding: 0.55rem 0.4rem;
    text-align: center;
}

.wedging-distance-kpi strong {
    display: block;
    font-size: 0.95rem;
    color: var(--color-gray-900);
}

.wedging-distance-kpi span {
    font-size: 0.68rem;
    color: var(--color-gray-600);
    line-height: 1.2;
}

.wedging-swipe-hint {
    text-align: center;
    font-size: 0.75rem;
    color: var(--color-gray-500);
    margin-bottom: 0.5rem;
}

.wedging-trend-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.65rem;
    margin-bottom: 0.65rem;
    font-size: 0.85rem;
}

.wedging-trend-badge {
    font-weight: 700;
}

.wedging-reliability {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
}

.wedging-reliability.low { background: #fef3c7; color: #92400e; }
.wedging-reliability.mid { background: #dbeafe; color: #1e40af; }
.wedging-reliability.high { background: #d1fae5; color: #065f46; }

.wedging-trend-details {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: var(--color-gray-50);
    border-radius: 10px;
    border-left: 4px solid #3b82f6;
    font-size: 0.85rem;
    overflow: hidden;
}

.wedging-trend-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.65rem;
}

.wedging-trend-metric {
    background: #fff;
    border-radius: 8px;
    padding: 0.5rem 0.6rem;
    font-size: 0.8rem;
}

.wedging-guide-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.wedging-guide-box {
    background: #fff;
    border-radius: 8px;
    padding: 0.65rem 0.75rem;
    font-size: 0.82rem;
    color: var(--color-gray-600);
}

.wedging-guide-box h5 {
    margin: 0 0 0.35rem;
    font-size: 0.85rem;
    color: var(--color-gray-800);
}

.wedging-rec-summary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    text-align: center;
}

.wedging-rec-summary h3 {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
}

.wedging-rec-summary p {
    margin: 0;
    font-size: 0.88rem;
    opacity: 0.92;
}

.wedging-rec-card {
    border-radius: 10px;
    padding: 0.85rem;
    margin-bottom: 0.65rem;
}

.wedging-rec-card h3 {
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
}

.wedging-rec-card p,
.wedging-rec-card li {
    font-size: 0.85rem;
    line-height: 1.45;
}

.wedging-report-footer {
    margin-top: 1.5rem;
    padding-top: 1rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--color-gray-500);
    border-top: 1px solid var(--color-gray-200);
}

@media (min-width: 769px) {
    .wedging-report-container { padding: 1.5rem; }
    .wedging-stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .wedging-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wedging-trend-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ferring-report-body .wedging-rec-summary,
.ferring-report-body .ferring-rec-summary {
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
}

.ferring-report-body .wedging-distance-tab.active {
    background: #7c3aed;
    border-color: #7c3aed;
}

.ferring-report-body .wedging-verdict {
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
}

.ferring-report-body .wedging-verdict.is-good { background: linear-gradient(135deg, #059669, #047857); }
.ferring-report-body .wedging-verdict.is-warn { background: linear-gradient(135deg, #d97706, #b45309); }
.ferring-report-body .wedging-verdict.is-bad { background: linear-gradient(135deg, #dc2626, #b91c1c); }

@media (max-width: 480px) {
    .wedging-distance-kpis { grid-template-columns: 1fr; }
    .wedging-stat-label { font-size: 0.68rem; }
}
/* ========================================
   DRILL PUTTING 4-5-6 M — Test interactif
   ======================================== */

.putting456-scoring-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    justify-content: center;
}

.putting456-scoring-legend .legend-item {
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--border-radius-lg);
    font-size: var(--font-size-sm);
    font-weight: 500;
    border: 2px solid transparent;
}

.putting456-scoring-legend .legend-item span {
    display: block;
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: var(--spacing-1);
}

.putting456-scoring-legend .legend-made {
    background: #DCFCE7;
    color: #166534;
    border-color: #BBF7D0;
}

.putting456-scoring-legend .legend-lag {
    background: #DCFCE7;
    color: #166534;
    border-color: #BBF7D0;
}

.putting456-scoring-legend .legend-short {
    background: #FEE2E2;
    color: #991B1B;
    border-color: #FECACA;
}

.putting456-scoring-legend .legend-long-made {
    background: #FEF3C7;
    color: #92400E;
    border-color: #FDE68A;
}

.putting456-scoring-legend .legend-long-missed {
    background: #FEE2E2;
    color: #7F1D1D;
    border-color: #FCA5A5;
}

.putting456-interactive-section {
    border: 2px solid #059669;
    background: linear-gradient(180deg, #F0FDF4 0%, #FFFFFF 100%);
}

/* --- Mobile-first touch UI --- */

.putting456-body {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.putting456-test .test-container,
.putting456-test.test-container {
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}

.putting456-header-compact h1 {
    font-size: 1.35rem;
}

.putting456-back .btn {
    min-height: 44px;
}

.putting456-info-box {
    margin-bottom: var(--spacing-3);
}

.putting456-info-box h3 {
    font-size: 1rem;
    margin-bottom: var(--spacing-2);
}

.putting456-info-box ol {
    margin: 0;
    padding-left: 1.25rem;
}

.putting456-info-box li + li {
    margin-top: var(--spacing-2);
}

.putting456-scoring-section h3 {
    font-size: 1rem;
    margin-bottom: var(--spacing-3);
    text-align: center;
}

.putting456-scoring-section .putting456-scoring-legend {
    gap: var(--spacing-2);
}

.putting456-scoring-section .putting456-scoring-legend .legend-item {
    flex: 1 1 calc(50% - var(--spacing-2));
    min-width: 140px;
    text-align: center;
    padding: var(--spacing-2) var(--spacing-3);
}

.putting456-details {
    margin-bottom: var(--spacing-3);
    padding: var(--spacing-3);
    background: #f9fafb;
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-gray-200);
}

.putting456-details summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}

.putting456-details summary::-webkit-details-marker {
    display: none;
}

.putting456-date-compact {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
}

.putting456-date-compact label {
    font-weight: 600;
    white-space: nowrap;
}

.putting456-date-compact .form-input {
    flex: 1;
    min-height: 44px;
}

.putting456-status-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-gray-200);
}

.putting456-status-bar .status-item {
    text-align: center;
}

.putting456-status-bar .status-label {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-gray-500);
    margin-bottom: 2px;
}

.putting456-status-bar .status-item strong {
    font-size: 1.35rem;
    line-height: 1.1;
    color: var(--color-gray-900);
}

.putting456-status-bar .status-item strong small {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-gray-500);
}

.putting456-status-bar .status-distance {
    background: linear-gradient(135deg, #059669, #10B981);
    border-radius: var(--border-radius-lg);
    color: #fff;
    padding: var(--spacing-2) var(--spacing-1);
}

.putting456-status-bar .status-distance .status-label,
.putting456-status-bar .status-distance strong,
.putting456-status-bar .status-distance strong small {
    color: #fff;
}

.putting456-status-bar .status-distance.pulse-distance {
    animation: putting456DistancePulse 0.5s ease;
}

.putting456-status-bar .status-distance.is-complete {
    background: linear-gradient(135deg, #047857, #059669);
}

.putting456-status-bar .status-distance[data-distance="4"],
.putting456-status-bar .status-distance[data-distance="5"],
.putting456-status-bar .status-distance[data-distance="6"] {
    box-shadow: 0 2px 10px rgba(5, 150, 105, 0.35);
}

.putting456-points-track {
    position: relative;
    height: 10px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: var(--spacing-4);
}

.putting456-points-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #059669, #34D399);
    border-radius: 999px;
    transition: width 0.4s ease;
}

.putting456-points-fill.is-complete {
    background: linear-gradient(90deg, #047857, #10B981);
}

@keyframes putting456DistancePulse {
    0% { transform: scale(1); }
    35% { transform: scale(1.06); }
    100% { transform: scale(1); }
}

@keyframes putting456ZonesReveal {
    from { opacity: 0.35; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

.putting456-touch-panel {
    margin-bottom: var(--spacing-4);
}

.putting456-touch-panel.is-transitioning {
    pointer-events: none;
}

.putting456-touch-hint {
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-2);
}

.putting456-touch-ladder {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
    padding: 0 var(--spacing-1);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.putting456-touch-ladder .ladder-line {
    flex: 1;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #dc2626 0%, #ea580c 25%, #16a34a 50%, #166534 75%, #dc2626 100%);
    opacity: 0.45;
}

.putting456-touch-ladder .ladder-you {
    color: #64748b;
}

.putting456-touch-ladder .ladder-beyond {
    color: #64748b;
}

.putting456-touch-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.putting456-touch-buttons.zones-hidden,
.putting456-zones-stack.zones-hidden {
    opacity: 0.35;
    transform: scale(0.98);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.putting456-touch-buttons.zones-reveal,
.putting456-zones-stack.zones-reveal {
    animation: putting456ZonesReveal 0.4s ease forwards;
}

.putting456-touch-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    width: 100%;
    min-height: 62px;
    padding: var(--spacing-3) var(--spacing-4);
    padding-left: calc(var(--spacing-4) + 4px);
    border: none;
    border-radius: 14px;
    cursor: pointer;
    text-align: left;
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1),
                box-shadow 0.25s ease,
                filter 0.15s ease;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14);
}

.putting456-touch-btn:active:not(:disabled),
.putting456-touch-btn.zone-pressed {
    transform: scale(0.97);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18) inset;
    filter: brightness(0.95);
}

.putting456-touch-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.putting456-touch-btn.zone-flash {
    animation: putting456TouchPop 0.48s cubic-bezier(0.34, 1.45, 0.64, 1);
}

@keyframes putting456TouchPop {
    0% { transform: scale(1); }
    35% { transform: scale(0.96); filter: brightness(0.92); }
    65% { transform: scale(1.02); filter: brightness(1.08); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22); }
    100% { transform: scale(1); filter: brightness(1); }
}

.touch-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: scale(0);
    opacity: 0.85;
    animation: putting456Ripple 0.55s ease-out forwards;
    pointer-events: none;
}

@keyframes putting456Ripple {
    to {
        transform: scale(2.8);
        opacity: 0;
    }
}

.putting456-touch-btn .touch-step {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
}

.putting456-touch-btn.zone-hole {
    min-height: 72px;
    background: linear-gradient(135deg, #14532d 0%, #15803d 100%);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 14px rgba(20, 83, 45, 0.35);
}

.putting456-touch-btn.zone-lag {
    background: linear-gradient(135deg, #15803d 0%, #16a34a 100%);
    color: #fff;
}

.putting456-touch-btn.zone-short,
.putting456-touch-btn.zone-long-missed {
    background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
    color: #fff;
}

.putting456-touch-btn.zone-long-made {
    background: linear-gradient(135deg, #c2410c 0%, #ea580c 100%);
    color: #fff;
}

.putting456-touch-btn .touch-text {
    flex: 1;
    min-width: 0;
    margin-left: 22px;
}

.putting456-touch-btn .touch-dot,
.putting456-touch-btn .touch-visual-hole {
    margin-left: 22px;
}

.putting456-touch-btn.zone-hole .touch-text {
    margin-left: 0;
}

.putting456-touch-btn .touch-label {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

.putting456-touch-btn .touch-sub {
    display: block;
    font-size: 0.75rem;
    opacity: 0.9;
    margin-top: 2px;
}

.putting456-touch-btn .touch-pts {
    font-size: 1.2rem;
    font-weight: 800;
    flex-shrink: 0;
    min-width: 36px;
    text-align: center;
}

.putting456-touch-btn .pts-plus { color: #fef08a; }
.putting456-touch-btn .pts-minus { color: #fecaca; }
.putting456-touch-btn .pts-zero { color: #ffedd5; }

/* Visuel trou + balle */
.touch-visual-hole {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.touch-visual-hole .cup {
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: #0c0a09;
    border: 3px solid #052e16;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
}

.touch-visual-hole .ball {
    position: absolute;
    top: 6px;
    left: 50%;
    width: 22px;
    height: 22px;
    margin-left: -11px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff, #9ca3af);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.touch-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.6);
}

.touch-dot-green { background: #bbf7d0; }
.touch-dot-red { background: #fecaca; }
.touch-dot-orange { background: #fed7aa; }

.putting456-toast {
    margin-top: var(--spacing-3);
    padding: var(--spacing-3);
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
    border-radius: var(--border-radius-lg);
    text-align: center;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.25s ease, max-height 0.25s ease, padding 0.25s ease, margin 0.25s ease;
}

.putting456-toast.visible {
    opacity: 1;
    max-height: 80px;
}

.putting456-toast .toast-title {
    display: block;
    font-weight: 700;
    font-size: var(--font-size-base);
    color: #065f46;
}

.putting456-toast .toast-sub {
    display: block;
    font-size: var(--font-size-sm);
    color: #047857;
    margin-top: 2px;
}

.status-putt.pulse-next {
    animation: putting456PuttPulse 0.5s ease;
}

@keyframes putting456PuttPulse {
    0% { transform: scale(1); }
    35% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.status-putt.pulse-next #current-putt-num {
    color: #059669;
}

.putting456-putts-track h4 {
    margin-bottom: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}

.putting456-putts-scroll {
    display: flex;
    gap: var(--spacing-2);
    overflow-x: auto;
    padding-bottom: var(--spacing-2);
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
}

.putting456-putt-chip {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    min-height: 56px;
    padding: var(--spacing-2);
    border-radius: 12px;
    font-size: 0.7rem;
    color: #fff;
    scroll-snap-align: start;
}

.putting456-putt-chip.zone-hole { background: #166534; }
.putting456-putt-chip.zone-lag { background: #16a34a; }
.putting456-putt-chip.zone-short,
.putting456-putt-chip.zone-long-missed { background: #dc2626; }
.putting456-putt-chip.zone-long-made { background: #ea580c; color: #fff; }

.putting456-putt-chip.chip-next {
    background: #f3f4f6;
    color: var(--color-gray-600);
    border: 2px dashed #059669;
}

.putting456-putt-chip.last-played {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #059669;
    cursor: pointer;
}

.putting456-putt-chip .chip-num { font-weight: 700; }
.putting456-putt-chip .chip-pts { font-weight: 800; font-size: 0.85rem; }

.putting456-actions-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: grid;
    grid-template-columns: 1fr 1fr 1.4fr;
    gap: var(--spacing-2);
    padding: var(--spacing-3);
    padding-bottom: calc(var(--spacing-3) + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid var(--color-gray-200);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(8px);
}

.putting456-actions-bar .btn {
    min-height: 48px;
    font-size: 0.9rem;
    padding: var(--spacing-2) var(--spacing-3);
}

.putting456-actions-bar #save-btn.btn-ready {
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.35);
}

.putting456-stats-details {
    margin-top: var(--spacing-3);
}

.putting456-outcome-summary h4,
.putting456-putts-track h4 {
    margin-bottom: var(--spacing-3);
    font-size: var(--font-size-base);
    color: var(--color-gray-700);
}

.putting456-outcome-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
}

.putting456-outcome-stats .outcome-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-2);
    background: #f9fafb;
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
}

.putting456-outcome-stats .stat-icon {
    font-size: 1.25rem;
}

.putting456-outcome-stats .stat-label {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
}

.putting456-outcome-stats strong {
    font-size: var(--font-size-lg);
}

.putting456-outcome-bar {
    display: flex;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: #e5e7eb;
}

.putting456-outcome-bar > div {
    height: 100%;
    transition: width 0.35s ease;
    min-width: 0;
}

.outcome-bar-made { background: #22C55E; }
.outcome-bar-lag { background: #3B82F6; }
.outcome-bar-short { background: #EF4444; }
.outcome-bar-long-made { background: #F59E0B; }
.outcome-bar-long-missed { background: #991B1B; }

.putting456-putts-track {
    padding: var(--spacing-4);
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-gray-200);
}

.putting456-putts-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    min-height: 60px;
}

.putting456-putt-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 72px;
    border-radius: var(--border-radius-lg);
    border: 2px solid var(--color-gray-200);
    background: var(--color-white);
    font-size: var(--font-size-xs);
    transition: transform 0.15s ease;
}

.putting456-putt-dot.filled {
    cursor: pointer;
    border: none;
    color: #fff;
    font-weight: 600;
}

.putting456-putt-dot.filled:hover {
    transform: scale(1.08);
}

.putting456-putt-dot.filled.zone-hole { background: #16A34A; }
.putting456-putt-dot.filled.zone-lag { background: #2563EB; }
.putting456-putt-dot.filled.zone-short { background: #DC2626; }
.putting456-putt-dot.filled.zone-long-made { background: #F59E0B; color: #1f2937; }
.putting456-putt-dot.filled.zone-long-missed { background: #991B1B; }

.putting456-putt-dot.current {
    border: 2px dashed #059669;
    background: #ECFDF5;
    animation: putting456CurrentPulse 1.5s ease infinite;
}

@keyframes putting456CurrentPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.3); }
    50% { box-shadow: 0 0 0 6px rgba(5, 150, 105, 0); }
}

.putting456-putt-dot.last-played {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.8), 0 0 0 5px #059669;
}

.putting456-putt-dot .dot-num {
    font-weight: 700;
    font-size: var(--font-size-sm);
}

.putting456-putt-dot .dot-dist {
    opacity: 0.85;
}

.putting456-putt-dot .dot-points {
    font-weight: 800;
    font-size: var(--font-size-base);
}

.putting456-empty {
    color: #9ca3af;
    text-align: center;
    padding: var(--spacing-4);
    width: 100%;
}

/* Rapport Putting 4-5-6 m */

.putting456-report-hero {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: flex-start;
}

.putting456-score-badge {
    min-width: 160px;
    padding: 1.5rem;
    border-radius: 16px;
    text-align: center;
    color: #fff;
}

.putting456-score-badge.elite { background: linear-gradient(135deg, #047857, #059669); }
.putting456-score-badge.tour { background: linear-gradient(135deg, #059669, #10B981); }
.putting456-score-badge.average { background: linear-gradient(135deg, #D97706, #F59E0B); }
.putting456-score-badge.needs-work { background: linear-gradient(135deg, #DC2626, #EF4444); }

.putting456-score-value {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
}

.putting456-score-label {
    font-size: 0.95rem;
    opacity: 0.95;
    margin-top: 0.25rem;
}

.putting456-score-date {
    font-size: 0.85rem;
    opacity: 0.85;
    margin-top: 0.5rem;
}

.putting456-hero-metrics {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-content: flex-start;
}

.putting456-metric-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.6rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    min-width: 90px;
}

.putting456-metric-pill .pill-label {
    font-size: 0.8rem;
    color: #6b7280;
}

.putting456-tour-compare {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.95rem;
    margin-top: 0.5rem;
}

.putting456-tour-compare.above-tour {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #6ee7b7;
}

.putting456-tour-compare.below-tour {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fdba74;
}

.putting456-report-charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.putting456-report-chart-card {
    background: #f9fafb;
    border-radius: 12px;
    padding: 1rem;
    border: 1px solid #e5e7eb;
}

.putting456-report-putts-detail {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 360px;
    overflow-y: auto;
}

.putting456-report-putt-row {
    display: grid;
    grid-template-columns: 40px 60px 1fr 70px 70px;
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: #f9fafb;
    border-radius: 8px;
    font-size: 0.9rem;
}

.putting456-history-table .above-tour { color: #059669; font-weight: 600; }
.putting456-history-table .below-tour { color: #DC2626; }

@media (min-width: 769px) {
    .putting456-test.test-container {
        max-width: 420px;
        margin: 0 auto;
        padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
    }

    .putting456-actions-bar {
        max-width: 480px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
    }
}

@media (max-width: 768px) {
    .putting456-outcome-stats {
        grid-template-columns: repeat(3, 1fr);
    }

    .putting456-report-putt-row {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }

    .putting456-header-compact .test-subtitle {
        font-size: 0.85rem;
    }
}

/* ========================================
   UP & DOWN 9-HOLE CHALLENGE — Test + Rapport
   ======================================== */

.updown9-body {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    overflow-x: hidden;
    max-width: 100vw;
}

.updown9-test.test-container {
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
}

.updown9-test-content {
    gap: var(--spacing-4);
}

.updown9-test .test-header.updown9-header-compact {
    margin-bottom: var(--spacing-4);
    padding: var(--spacing-4);
}

.updown9-details {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-3) var(--spacing-4);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.updown9-details summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-gray-800);
    list-style: none;
}

.updown9-details summary::-webkit-details-marker {
    display: none;
}

.updown9-details[open] summary {
    margin-bottom: var(--spacing-3);
}

.updown9-info-details ol {
    margin: 0;
    padding-left: 1.25rem;
}

.updown9-info-details li + li {
    margin-top: var(--spacing-2);
}

.updown9-interactive-section {
    border: 2px solid #D97706;
    background: linear-gradient(180deg, #FFFBEB 0%, #FFFFFF 100%);
}

.updown9-header-compact h1 {
    font-size: 1.35rem;
}

.updown9-back .btn {
    min-height: 44px;
}

.updown9-info-box {
    margin-bottom: var(--spacing-3);
}

.updown9-info-box h3 {
    font-size: 1rem;
    margin-bottom: var(--spacing-2);
}

.updown9-info-box ol {
    margin: 0;
    padding-left: 1.25rem;
}

.updown9-info-box li + li {
    margin-top: var(--spacing-2);
}

.updown9-date-compact {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: 0;
    padding: var(--spacing-3);
    box-shadow: none;
}

.updown9-date-compact label {
    font-weight: 600;
    white-space: nowrap;
}

.updown9-date-compact .form-input {
    flex: 1;
    min-height: 44px;
}

.updown9-status-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.updown9-status-bar .status-item {
    text-align: center;
    min-width: 0;
}

.updown9-status-bar .status-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-gray-500);
    margin-bottom: 2px;
}

.updown9-status-bar .status-item strong {
    display: block;
    font-size: 1.15rem;
    color: var(--color-gray-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.updown9-status-bar .status-item strong small {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-gray-500);
}

.updown9-status-bar .score-under { color: #16A34A; }
.updown9-status-bar .score-even { color: #2563EB; }
.updown9-status-bar .score-over { color: #DC2626; }

.updown9-lie-badge {
    border-radius: 10px;
    transition: background 0.3s ease, color 0.3s ease;
}

.updown9-lie-badge.lie-fairway { background: #ecfdf5; color: #047857; }
.updown9-lie-badge.lie-bunker { background: #fffbeb; color: #b45309; }
.updown9-lie-badge.lie-rough { background: #fef2f2; color: #b91c1c; }
.updown9-lie-badge.lie-fringe { background: #ecfeff; color: #0e7490; }
.updown9-lie-badge.lie-short { background: #eff6ff; color: #1d4ed8; }
.updown9-lie-badge.lie-long { background: #f5f3ff; color: #6d28d9; }
.updown9-lie-badge.is-complete { background: #f3f4f6; color: #6b7280; }

.updown9-lie-badge.pulse-lie {
    animation: updown9LiePulse 0.55s ease;
}

@keyframes updown9LiePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

.updown9-status-bar .status-hole.pulse-hole {
    animation: updown9HolePulse 0.5s ease;
}

@keyframes updown9HolePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.updown9-progress-track {
    height: 6px;
    background: var(--color-gray-200);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: var(--spacing-4);
}

.updown9-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #D97706, #F59E0B);
    border-radius: 999px;
    transition: width 0.35s ease;
}

.updown9-progress-fill.is-complete {
    background: linear-gradient(90deg, #16A34A, #059669);
}

.updown9-strokes-hint {
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-3);
}

.updown9-touch-panel.is-complete {
    opacity: 0.85;
}

.updown9-touch-hint {
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-2);
}

.updown9-lie-hero {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    margin-bottom: var(--spacing-3);
    border-radius: 14px;
    border: 2px solid transparent;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.updown9-lie-hero.lie-switching {
    opacity: 0.4;
    transform: scale(0.98);
}

.updown9-lie-hero.lie-fairway { background: linear-gradient(135deg, #ecfdf5, #d1fae5); border-color: #6ee7b7; }
.updown9-lie-hero.lie-bunker { background: linear-gradient(135deg, #fffbeb, #fef3c7); border-color: #fcd34d; }
.updown9-lie-hero.lie-rough { background: linear-gradient(135deg, #fef2f2, #fee2e2); border-color: #fca5a5; }
.updown9-lie-hero.lie-fringe { background: linear-gradient(135deg, #ecfeff, #cffafe); border-color: #67e8f9; }
.updown9-lie-hero.lie-short { background: linear-gradient(135deg, #eff6ff, #dbeafe); border-color: #93c5fd; }
.updown9-lie-hero.lie-long { background: linear-gradient(135deg, #f5f3ff, #ede9fe); border-color: #c4b5fd; }
.updown9-lie-hero.is-complete { background: #f3f4f6; border-color: #e5e7eb; }

.updown9-lie-hero .lie-hero-icon {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
}

.updown9-lie-hero .lie-hero-text {
    flex: 1;
    min-width: 0;
}

.updown9-lie-hero .lie-hero-text strong {
    display: block;
    font-size: 1.05rem;
    color: #1f2937;
}

.updown9-lie-hero .lie-hero-text span {
    display: block;
    font-size: 0.8rem;
    color: #4b5563;
    margin-top: 2px;
    line-height: 1.3;
}

.updown9-lie-plan {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-bottom: var(--spacing-3);
}

.lie-plan-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0.45;
    border: 1px solid transparent;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.lie-plan-chip small {
    font-size: 0.6rem;
    opacity: 0.85;
}

.lie-plan-chip.lie-fairway { background: #ecfdf5; color: #047857; }
.lie-plan-chip.lie-bunker { background: #fffbeb; color: #b45309; }
.lie-plan-chip.lie-rough { background: #fef2f2; color: #b91c1c; }
.lie-plan-chip.lie-fringe { background: #ecfeff; color: #0e7490; }
.lie-plan-chip.lie-short { background: #eff6ff; color: #1d4ed8; }
.lie-plan-chip.lie-long { background: #f5f3ff; color: #6d28d9; }

.lie-plan-chip.played {
    opacity: 0.7;
}

.lie-plan-chip.current {
    opacity: 1;
    transform: scale(1.08);
    border-color: currentColor;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06);
}

.updown9-touch-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.updown9-touch-buttons.zones-hidden {
    opacity: 0.35;
    transform: scale(0.98);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.updown9-touch-buttons.zones-reveal {
    animation: updown9ZonesReveal 0.4s ease forwards;
}

@keyframes updown9ZonesReveal {
    from { opacity: 0.5; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.updown9-touch-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    width: 100%;
    min-height: 64px;
    padding: var(--spacing-3) var(--spacing-4);
    padding-left: calc(var(--spacing-4) + 4px);
    border: 2px solid transparent;
    border-radius: 14px;
    cursor: pointer;
    text-align: left;
    position: relative;
    overflow: hidden;
    font-family: inherit;
    font-size: inherit;
    line-height: 1.2;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.25s ease, filter 0.15s ease;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14);
    color: #fff;
}

.updown9-touch-btn:active:not(:disabled),
.updown9-touch-btn.zone-pressed {
    transform: scale(0.97);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18) inset;
    filter: brightness(0.95);
}

.updown9-touch-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.updown9-touch-btn.zone-flash {
    animation: updown9TouchPop 0.48s cubic-bezier(0.34, 1.45, 0.64, 1);
}

@keyframes updown9TouchPop {
    0% { transform: scale(1); }
    35% { transform: scale(0.96); filter: brightness(0.92); }
    65% { transform: scale(1.02); filter: brightness(1.08); }
    100% { transform: scale(1); filter: brightness(1); }
}

.updown9-touch-btn .touch-step {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
}

.updown9-touch-btn .touch-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: scale(0);
    opacity: 0.85;
    animation: updown9Ripple 0.55s ease-out forwards;
    pointer-events: none;
}

@keyframes updown9Ripple {
    to { transform: scale(2.8); opacity: 0; }
}

.updown9-touch-btn.zone-chip-in {
    background-color: #16a34a;
    background-image: linear-gradient(135deg, #14532d 0%, #16a34a 100%);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 4px 14px rgba(20, 83, 45, 0.35);
}

.updown9-touch-btn.zone-par {
    background-color: #2563eb;
    background-image: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 4px 14px rgba(29, 78, 216, 0.3);
}

.updown9-touch-btn.zone-bogey {
    background-color: #ea580c;
    background-image: linear-gradient(135deg, #c2410c 0%, #ea580c 100%);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 4px 14px rgba(194, 65, 12, 0.3);
}

.updown9-touch-btn.zone-double {
    background-color: #dc2626;
    background-image: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 4px 14px rgba(185, 28, 28, 0.3);
}

.updown9-touch-btn .touch-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 800;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    flex-shrink: 0;
    margin-left: 22px;
}

.updown9-touch-btn .touch-text {
    flex: 1;
    min-width: 0;
}

.updown9-touch-btn .touch-label {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

.updown9-touch-btn .touch-sub {
    display: block;
    font-size: 0.75rem;
    opacity: 0.9;
    margin-top: 2px;
}

.updown9-touch-btn .touch-pts {
    font-size: 1.15rem;
    font-weight: 800;
    flex-shrink: 0;
    min-width: 32px;
    text-align: center;
}

.updown9-touch-btn .pts-birdie { color: #fef08a; }
.updown9-touch-btn .pts-par { color: #dbeafe; }
.updown9-touch-btn .pts-bogey { color: #ffedd5; }
.updown9-touch-btn .pts-double { color: #fecaca; }

.updown9-toast {
    margin-top: var(--spacing-3);
    padding: var(--spacing-3);
    border-radius: var(--border-radius-lg);
    background: #fffbeb;
    border: 1px solid #fde68a;
    text-align: center;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.updown9-toast.visible {
    opacity: 1;
    transform: translateY(0);
}

.updown9-toast .toast-title {
    display: block;
    font-weight: 700;
    color: #92400e;
}

.updown9-toast .toast-sub {
    display: block;
    font-size: var(--font-size-sm);
    color: #b45309;
    margin-top: 2px;
}

.updown9-scorecard-details {
    margin-top: var(--spacing-3);
}

.updown9-scorecard-details summary {
    font-size: var(--font-size-sm);
}

.updown9-scorecard h4 {
    font-size: var(--font-size-sm);
    font-weight: 700;
    margin-bottom: var(--spacing-2);
    color: var(--color-gray-700);
}

.updown9-holes-scroll {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 6px;
    overflow-x: auto;
    padding-bottom: var(--spacing-1);
}

.updown9-hole-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 52px;
    padding: 4px;
    border-radius: 8px;
    background: var(--color-gray-100);
    border: 2px solid var(--color-gray-200);
    font-size: 0.7rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.updown9-hole-chip.lie-fairway:not(.filled) { background: #ecfdf5; border-color: #a7f3d0; }
.updown9-hole-chip.lie-bunker:not(.filled) { background: #fffbeb; border-color: #fde68a; }
.updown9-hole-chip.lie-rough:not(.filled) { background: #fef2f2; border-color: #fecaca; }
.updown9-hole-chip.lie-fringe:not(.filled) { background: #ecfeff; border-color: #a5f3fc; }
.updown9-hole-chip.lie-short:not(.filled) { background: #eff6ff; border-color: #bfdbfe; }
.updown9-hole-chip.lie-long:not(.filled) { background: #f5f3ff; border-color: #ddd6fe; }

.updown9-hole-chip .chip-lie {
    font-size: 0.55rem;
    font-weight: 800;
    opacity: 0.75;
    letter-spacing: 0.02em;
}

.updown9-hole-chip.filled.zone-chip-in { background: #166534; color: #fff; border-color: #14532d; }
.updown9-hole-chip.filled.zone-par { background: #2563eb; color: #fff; border-color: #1d4ed8; }
.updown9-hole-chip.filled.zone-bogey { background: #ea580c; color: #fff; border-color: #c2410c; }
.updown9-hole-chip.filled.zone-double { background: #dc2626; color: #fff; border-color: #b91c1c; }

.updown9-hole-chip.filled .chip-lie {
    opacity: 0.85;
    color: inherit;
}

.updown9-hole-chip.chip-next {
    border-color: #F59E0B;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.35);
    transform: scale(1.05);
}

.updown9-hole-chip.last-played {
    animation: updown9ChipFlash 0.5s ease;
}

@keyframes updown9ChipFlash {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.25); }
}

.updown9-hole-chip .chip-num {
    font-weight: 700;
    font-size: 0.65rem;
    opacity: 0.85;
}

.updown9-hole-chip .chip-score {
    font-weight: 800;
    font-size: 0.8rem;
}

.updown9-rate-hint {
    margin-top: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    text-align: center;
}

.updown9-actions-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: grid;
    grid-template-columns: 1fr 1fr 1.4fr;
    gap: var(--spacing-2);
    padding: var(--spacing-3);
    padding-bottom: calc(var(--spacing-3) + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.96);
    border: none;
    border-top: 1px solid var(--color-gray-200);
    border-radius: 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(8px);
}

.updown9-actions-bar-dual {
    grid-template-columns: 1fr 1fr;
}

.updown9-body.updown9-saving .updown9-interactive-section {
    opacity: 0.6;
    pointer-events: none;
}

.success-redirect-hint {
    margin-top: var(--spacing-3);
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

.updown9-actions-bar .btn {
    min-height: 48px;
    font-size: 0.9rem;
}

.updown9-actions-bar #save-btn.btn-ready {
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.35);
}

/* Rapport Up & Down 9-Hole */

.updown9-stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--spacing-4);
}

.updown9-stats-container .stat-card {
    background: #f9fafb;
    border-radius: 10px;
    padding: 1.25rem;
    text-align: center;
    border-left: 4px solid #3b82f6;
}

.updown9-stats-container .stat-card.success { border-left-color: #10b981; }
.updown9-stats-container .stat-card.warning { border-left-color: #f59e0b; }
.updown9-stats-container .stat-card.danger { border-left-color: #ef4444; }
.updown9-stats-container .stat-card.info { border-left-color: #3b82f6; }

.updown9-stats-container .stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1f2937;
}

.updown9-stats-container .stat-label {
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: 4px;
}

.updown9-report-hero {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: flex-start;
}

.updown9-score-badge {
    min-width: 160px;
    padding: 1.5rem;
    border-radius: 16px;
    text-align: center;
    color: #fff;
}

.updown9-score-badge.elite { background: linear-gradient(135deg, #047857, #059669); }
.updown9-score-badge.good { background: linear-gradient(135deg, #059669, #10B981); }
.updown9-score-badge.average { background: linear-gradient(135deg, #D97706, #F59E0B); }
.updown9-score-badge.needs-work { background: linear-gradient(135deg, #DC2626, #EF4444); }

.updown9-score-value {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
}

.updown9-score-label {
    font-size: 0.95rem;
    opacity: 0.95;
    margin-top: 0.25rem;
}

.updown9-score-date {
    font-size: 0.85rem;
    opacity: 0.85;
    margin-top: 0.5rem;
}

.updown9-hero-metrics {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-content: flex-start;
}

.updown9-metric-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.6rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    min-width: 90px;
}

.updown9-metric-pill .pill-label {
    font-size: 0.75rem;
    color: #6b7280;
}

.updown9-updown-compare {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
}

.updown9-updown-compare.above-bench {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

.updown9-updown-compare.below-bench {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fdba74;
}

.updown9-benchmarks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.updown9-benchmark-card {
    padding: 1rem 1.25rem;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
}

.updown9-benchmark-card h4 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
}

.updown9-benchmark-card p {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    color: #4b5563;
}

.updown9-benchmark-card .bench-status {
    font-size: 0.85rem;
    font-weight: 600;
    color: #059669;
}

.updown9-benchmark-card.tour { border-left: 4px solid #059669; }
.updown9-benchmark-card.good { border-left: 4px solid #2563eb; }
.updown9-benchmark-card.average { border-left: 4px solid #f59e0b; }

.updown9-report-charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.updown9-report-chart-card {
    background: #f9fafb;
    border-radius: 12px;
    padding: 1rem;
    border: 1px solid #e5e7eb;
}

.updown9-report-holes-detail {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 360px;
    overflow-y: auto;
}

.updown9-report-hole-row {
    display: grid;
    grid-template-columns: 36px 1fr 1.5fr 70px 50px;
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: #f9fafb;
    border-radius: 8px;
    font-size: 0.9rem;
}

.updown9-table-scroll {
    overflow-x: auto;
}

.updown9-report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.updown9-report-table th,
.updown9-report-table td {
    padding: 0.65rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

.updown9-report-table th {
    background: #f3f4f6;
    font-weight: 600;
    color: #374151;
}

.chart-wrapper-sm {
    height: 280px;
}

@media (min-width: 769px) {
    .updown9-test.test-container {
        max-width: 480px;
        margin: 0 auto;
        padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
    }

    .updown9-actions-bar {
        max-width: 520px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
    }
}

@media (max-width: 768px) {
    .updown9-test.test-container {
        padding: var(--spacing-3);
        padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px));
    }

    .updown9-test-content {
        gap: var(--spacing-3);
    }

    .updown9-test .test-content section.updown9-interactive-section {
        padding: var(--spacing-3);
    }

    .updown9-test .test-header.updown9-header-compact {
        margin-bottom: var(--spacing-3);
        padding: var(--spacing-3);
    }

    .updown9-header-compact h1 {
        font-size: 1.15rem;
    }

    .updown9-header-compact .test-subtitle {
        font-size: 0.85rem;
    }

    .updown9-status-bar {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-2);
        padding: var(--spacing-2);
    }

    .updown9-status-bar .status-item strong {
        font-size: 1rem;
    }

    .updown9-lie-hero {
        padding: var(--spacing-2) var(--spacing-3);
        gap: var(--spacing-2);
    }

    .updown9-lie-hero .lie-hero-icon {
        font-size: 1.6rem;
    }

    .updown9-lie-hero .lie-hero-text strong {
        font-size: 0.92rem;
        line-height: 1.25;
    }

    .updown9-lie-hero .lie-hero-text span {
        font-size: 0.72rem;
    }

    .updown9-holes-scroll {
        grid-template-columns: repeat(9, minmax(30px, 1fr));
    }

    .updown9-report-hole-row {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
    }

    .updown9-report-hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .updown9-status-bar .status-lie {
        display: none;
    }

    .updown9-status-bar {
        grid-template-columns: repeat(3, 1fr);
    }

    .updown9-strokes-hint {
        margin-bottom: var(--spacing-2);
        font-size: 0.8rem;
    }

    .updown9-date-compact {
        margin-bottom: var(--spacing-3);
    }
}

/* ========================================
   CHIP CIRCLE 90 CM — Test + Rapport
   ======================================== */

.chip90-body {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    overflow-x: hidden;
    max-width: 100vw;
}

.chip90-test.test-container {
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
}

.chip90-test-content {
    gap: var(--spacing-4);
}

.chip90-interactive-section {
    border: 2px solid #059669;
    background: linear-gradient(180deg, #F0FDF4 0%, #FFFFFF 100%);
}

.chip90-header-compact h1 {
    font-size: 1.35rem;
}

.chip90-back .btn {
    min-height: 44px;
}

.chip90-info-box ol {
    margin: 0;
    padding-left: 1.25rem;
}

.chip90-info-box li + li {
    margin-top: var(--spacing-2);
}

.chip90-date-compact {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: 0;
}

.chip90-date-compact .form-input {
    flex: 1;
    min-height: 44px;
}

.chip90-status-bar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.chip90-status-bar .status-item {
    text-align: center;
    min-width: 0;
}

.chip90-status-bar .status-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-gray-500);
    margin-bottom: 2px;
}

.chip90-status-bar .status-item strong {
    font-size: 1.15rem;
    color: var(--color-gray-900);
}

.chip90-status-bar .status-item strong small {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-gray-500);
}

.chip90-status-bar .status-position.pulse-position {
    animation: chip90PositionPulse 0.5s ease;
}

@keyframes chip90PositionPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.chip90-progress-track {
    height: 6px;
    background: var(--color-gray-200);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: var(--spacing-3);
}

.chip90-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #059669, #10B981);
    border-radius: 999px;
    transition: width 0.35s ease;
}

.chip90-progress-fill.is-complete {
    background: linear-gradient(90deg, #16A34A, #059669);
}

.chip90-positions-track {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: var(--spacing-3);
}

.chip90-position-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    background: #f3f4f6;
    color: #6b7280;
    border: 2px solid #e5e7eb;
    transition: all 0.2s ease;
}

.chip90-position-chip.current {
    background: #ecfdf5;
    color: #047857;
    border-color: #6ee7b7;
    transform: scale(1.06);
}

.chip90-position-chip.done {
    background: #166534;
    color: #fff;
    border-color: #14532d;
}

.chip90-position-chip.failed {
    background: #991b1b;
    color: #fff;
    border-color: #7f1d1d;
}

.chip90-streak-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-3);
}

.chip90-streak-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.chip90-streak-dots {
    display: flex;
    gap: 6px;
}

.chip90-streak-dots .streak-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #e5e7eb;
    border: 2px solid #d1d5db;
    transition: all 0.25s ease;
}

.chip90-streak-dots .streak-dot.filled {
    background: #16A34A;
    border-color: #15803d;
    box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.25);
}

.chip90-touch-hint {
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-3);
}

.chip90-touch-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chip90-touch-buttons.zones-hidden {
    opacity: 0.35;
    transform: scale(0.98);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.chip90-touch-buttons.zones-reveal {
    animation: chip90ZonesReveal 0.4s ease forwards;
}

@keyframes chip90ZonesReveal {
    from { opacity: 0.5; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.chip90-touch-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    width: 100%;
    min-height: 72px;
    padding: var(--spacing-4);
    border: 2px solid transparent;
    border-radius: 16px;
    cursor: pointer;
    text-align: left;
    position: relative;
    overflow: hidden;
    font-family: inherit;
    font-size: inherit;
    line-height: 1.2;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.25s ease, filter 0.15s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
    color: #fff;
}

.chip90-touch-btn:active:not(:disabled),
.chip90-touch-btn.zone-pressed {
    transform: scale(0.97);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18) inset;
    filter: brightness(0.95);
}

.chip90-touch-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.chip90-touch-btn.zone-flash {
    animation: chip90TouchPop 0.48s cubic-bezier(0.34, 1.45, 0.64, 1);
}

@keyframes chip90TouchPop {
    0% { transform: scale(1); }
    35% { transform: scale(0.96); filter: brightness(0.92); }
    65% { transform: scale(1.02); filter: brightness(1.08); }
    100% { transform: scale(1); filter: brightness(1); }
}

.chip90-touch-btn.zone-in {
    background-color: #16a34a;
    background-image: linear-gradient(135deg, #14532d 0%, #16a34a 100%);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 16px rgba(20, 83, 45, 0.35);
}

.chip90-touch-btn.zone-out {
    background-color: #dc2626;
    background-image: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 16px rgba(185, 28, 28, 0.35);
}

.chip90-touch-btn .touch-icon {
    font-size: 1.75rem;
    line-height: 1;
    flex-shrink: 0;
    width: 44px;
    text-align: center;
}

.chip90-touch-btn .touch-text {
    flex: 1;
    min-width: 0;
}

.chip90-touch-btn .touch-label {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
}

.chip90-touch-btn .touch-sub {
    display: block;
    font-size: 0.8rem;
    opacity: 0.9;
    margin-top: 4px;
}

.chip90-touch-btn .touch-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: scale(0);
    opacity: 0.85;
    animation: chip90Ripple 0.55s ease-out forwards;
    pointer-events: none;
}

@keyframes chip90Ripple {
    to { transform: scale(2.8); opacity: 0; }
}

.chip90-toast {
    margin-top: var(--spacing-3);
    padding: var(--spacing-3);
    border-radius: var(--border-radius-lg);
    background: #fffbeb;
    border: 1px solid #fde68a;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

.chip90-toast.visible {
    opacity: 1;
    transform: translateY(0);
}

.chip90-toast .toast-title {
    display: block;
    font-weight: 700;
    color: #92400e;
}

.chip90-toast .toast-sub {
    display: block;
    font-size: 0.85rem;
    color: #b45309;
    margin-top: 2px;
}

.chip90-balls-track h4 {
    font-size: var(--font-size-sm);
    font-weight: 700;
    margin: var(--spacing-4) 0 var(--spacing-2);
    color: var(--color-gray-700);
}

.chip90-balls-scroll {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 36px;
}

.chip90-empty-balls {
    font-size: 0.85rem;
    color: var(--color-gray-500);
}

.chip90-ball-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 40px;
    padding: 4px;
    border-radius: 8px;
    font-size: 0.9rem;
    border: 2px solid transparent;
}

.chip90-ball-chip small {
    font-size: 0.55rem;
    font-weight: 700;
    opacity: 0.85;
}

.chip90-ball-chip.ball-in {
    background: #ecfdf5;
    border-color: #6ee7b7;
}

.chip90-ball-chip.ball-out {
    background: #fef2f2;
    border-color: #fca5a5;
}

.chip90-actions-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2);
    padding: var(--spacing-3);
    padding-bottom: calc(var(--spacing-3) + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.96);
    border: none;
    border-top: 1px solid var(--color-gray-200);
    border-radius: 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(8px);
}

.chip90-actions-bar .btn {
    min-height: 48px;
    font-size: 0.9rem;
}

.chip90-body.chip90-saving .chip90-interactive-section {
    opacity: 0.6;
    pointer-events: none;
}

.chip90-touch-panel.is-complete {
    opacity: 0.85;
}

/* Rapport Chip Circle 90 */

.chip90-stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--spacing-4);
}

.chip90-stats-container .stat-card {
    background: #f9fafb;
    border-radius: 10px;
    padding: 1.25rem;
    text-align: center;
    border-left: 4px solid #3b82f6;
}

.chip90-stats-container .stat-card.elite { border-left-color: #059669; }
.chip90-stats-container .stat-card.good { border-left-color: #2563eb; }
.chip90-stats-container .stat-card.average { border-left-color: #f59e0b; }
.chip90-stats-container .stat-card.needs-work { border-left-color: #ef4444; }

.chip90-report-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

.chip90-score-badge {
    background: linear-gradient(135deg, #2563EB, #3B82F6);
    color: #fff;
    border-radius: 16px;
    padding: var(--spacing-4) var(--spacing-6);
    text-align: center;
    min-width: 140px;
}

.chip90-score-badge.elite { background: linear-gradient(135deg, #047857, #059669); }
.chip90-score-badge.good { background: linear-gradient(135deg, #059669, #10B981); }
.chip90-score-badge.average { background: linear-gradient(135deg, #D97706, #F59E0B); }
.chip90-score-badge.needs-work { background: linear-gradient(135deg, #DC2626, #EF4444); }

.chip90-score-value {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
}

.chip90-score-label {
    font-size: 0.9rem;
    margin-top: 4px;
    opacity: 0.95;
}

.chip90-score-date {
    font-size: 0.75rem;
    margin-top: 6px;
    opacity: 0.8;
}

.chip90-hero-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
}

.chip90-metric-pill {
    background: #f3f4f6;
    border-radius: 999px;
    padding: 8px 16px;
    text-align: center;
}

.chip90-metric-pill .pill-label {
    display: block;
    font-size: 0.65rem;
    color: #6b7280;
    text-transform: uppercase;
}

.chip90-benchmarks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--spacing-4);
}

.chip90-benchmark-card {
    background: #f9fafb;
    border-radius: 12px;
    padding: var(--spacing-4);
    border: 1px solid #e5e7eb;
}

.chip90-benchmark-card.perfect { border-left: 4px solid #059669; }
.chip90-benchmark-card.tour { border-left: 4px solid #2563eb; }
.chip90-benchmark-card.good { border-left: 4px solid #f59e0b; }

.chip90-benchmark-card h4 {
    margin-bottom: var(--spacing-2);
    font-size: 0.95rem;
}

.chip90-benchmark-card p {
    font-size: 0.85rem;
    color: #6b7280;
    margin-bottom: var(--spacing-2);
}

.chip90-benchmark-card .bench-status {
    font-size: 0.8rem;
    font-weight: 600;
    color: #059669;
}

.chip90-report-charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.chip90-report-chart-card {
    background: #f9fafb;
    border-radius: 12px;
    padding: 1rem;
    border: 1px solid #e5e7eb;
}

.chip90-report-positions-detail {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.chip90-report-position-row {
    display: grid;
    grid-template-columns: 48px 1fr 80px 80px 90px;
    gap: 0.5rem;
    align-items: center;
    padding: 0.6rem 0.75rem;
    background: #f9fafb;
    border-radius: 8px;
    font-size: 0.9rem;
}

.chip90-table-scroll {
    overflow-x: auto;
}

.chip90-report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.chip90-report-table th,
.chip90-report-table td {
    padding: 0.6rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

.chip90-report-table th {
    background: #f3f4f6;
    font-weight: 600;
}

.chip90-report-table .elite { color: #059669; font-weight: 600; }
.chip90-report-table .good { color: #2563eb; font-weight: 600; }
.chip90-report-table .average { color: #D97706; font-weight: 600; }
.chip90-report-table .needs-work { color: #DC2626; font-weight: 600; }

@media (min-width: 769px) {
    .chip90-test.test-container {
        max-width: 480px;
        margin: 0 auto;
    }

    .chip90-actions-bar {
        max-width: 520px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
    }
}

@media (max-width: 768px) {
    .chip90-test.test-container {
        padding: var(--spacing-3);
        padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px));
    }

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

    .chip90-report-position-row {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
    }

    .chip90-report-hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* ==========================================================================
   Wedging 3 trous compacts (-3)
   ========================================================================== */

.wedge3-body {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    overflow-x: hidden;
    max-width: 100vw;
}

.wedge3-test.test-container {
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
}

.wedge3-test-content {
    gap: var(--spacing-4);
}

.wedge3-interactive-section {
    border: 2px solid #2563EB;
    background: linear-gradient(180deg, #EFF6FF 0%, #FFFFFF 100%);
}

.wedge3-header-compact h1 {
    font-size: 1.35rem;
}

.wedge3-back .btn {
    min-height: 44px;
}

.wedge3-info-box ol {
    margin: 0;
    padding-left: 1.25rem;
}

.wedge3-info-box li + li {
    margin-top: var(--spacing-2);
}

.wedge3-date-compact {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: 0;
}

.wedge3-date-compact .form-input {
    flex: 1;
    min-height: 44px;
}

.wedge3-status-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.wedge3-status-bar .status-item {
    text-align: center;
    min-width: 0;
}

.wedge3-status-bar .status-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-gray-500);
    margin-bottom: 2px;
}

.wedge3-status-bar .status-item strong {
    font-size: 1.15rem;
    color: var(--color-gray-900);
}

.wedge3-status-bar .status-item strong small {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-gray-500);
}

.wedge3-status-bar .score-target { color: #059669; }
.wedge3-status-bar .score-under { color: #16A34A; }
.wedge3-status-bar .score-even { color: var(--color-gray-700); }
.wedge3-status-bar .score-over { color: #DC2626; }

.wedge3-target-hint {
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-2);
}

.wedge3-progress-track {
    height: 6px;
    background: var(--color-gray-200);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: var(--spacing-3);
}

.wedge3-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #2563EB, #3B82F6);
    border-radius: 999px;
    transition: width 0.35s ease;
}

.wedge3-progress-fill.is-complete {
    background: linear-gradient(90deg, #16A34A, #059669);
}

.wedge3-progress-fill.is-failed {
    background: linear-gradient(90deg, #DC2626, #EF4444);
}

.wedge3-attempts-track {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-bottom: var(--spacing-3);
}

.wedge3-attempt-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 42px;
    padding: 4px 6px;
    border-radius: 10px;
    font-size: 0.7rem;
    background: #f3f4f6;
    color: #6b7280;
    border: 2px solid #e5e7eb;
    transition: all 0.2s ease;
}

.wedge3-attempt-chip small {
    font-size: 0.6rem;
    font-weight: 600;
    opacity: 0.8;
}

.wedge3-attempt-chip strong {
    font-size: 0.75rem;
    font-weight: 800;
}

.wedge3-attempt-chip.current {
    background: #DBEAFE;
    color: #1D4ED8;
    border-color: #93C5FD;
    transform: scale(1.06);
}

.wedge3-attempt-chip.success {
    background: #166534;
    color: #fff;
    border-color: #14532d;
}

.wedge3-attempt-chip.failed {
    background: #FEE2E2;
    color: #991B1B;
    border-color: #FCA5A5;
}

.wedge3-touch-hint {
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-3);
}

.wedge3-touch-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wedge3-touch-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    width: 100%;
    min-height: 64px;
    padding: var(--spacing-3) var(--spacing-4);
    border: 2px solid transparent;
    border-radius: 14px;
    cursor: pointer;
    text-align: left;
    position: relative;
    overflow: hidden;
    font-family: inherit;
    font-size: inherit;
    line-height: 1.2;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    color: #fff;
    transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.25s ease, filter 0.15s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}

.wedge3-touch-btn:active:not(:disabled),
.wedge3-touch-btn.zone-pressed {
    transform: scale(0.97);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18) inset;
    filter: brightness(0.95);
}

.wedge3-touch-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.wedge3-touch-btn.zone-flash {
    animation: wedge3TouchPop 0.48s cubic-bezier(0.34, 1.45, 0.64, 1);
}

@keyframes wedge3TouchPop {
    0% { transform: scale(1); }
    35% { transform: scale(0.96); filter: brightness(0.92); }
    65% { transform: scale(1.02); filter: brightness(1.08); }
    100% { transform: scale(1); filter: brightness(1); }
}

.wedge3-touch-btn.zone-eagle {
    background-color: #7C3AED;
    background-image: linear-gradient(135deg, #5B21B6 0%, #7C3AED 100%);
    border-color: rgba(255, 255, 255, 0.25);
}

.wedge3-touch-btn.zone-birdie {
    background-color: #16A34A;
    background-image: linear-gradient(135deg, #14532D 0%, #16A34A 100%);
    border-color: rgba(255, 255, 255, 0.25);
}

.wedge3-touch-btn.zone-par {
    background-color: #2563EB;
    background-image: linear-gradient(135deg, #1D4ED8 0%, #2563EB 100%);
    border-color: rgba(255, 255, 255, 0.25);
}

.wedge3-touch-btn.zone-bogey {
    background-color: #D97706;
    background-image: linear-gradient(135deg, #B45309 0%, #D97706 100%);
    border-color: rgba(255, 255, 255, 0.25);
}

.wedge3-touch-btn.zone-double {
    background-color: #DC2626;
    background-image: linear-gradient(135deg, #991B1B 0%, #DC2626 100%);
    border-color: rgba(255, 255, 255, 0.25);
}

.wedge3-touch-btn .touch-icon {
    flex-shrink: 0;
    width: 36px;
    text-align: center;
    font-size: 1.25rem;
}

.wedge3-touch-btn .touch-text {
    flex: 1;
    min-width: 0;
}

.wedge3-touch-btn .touch-label {
    display: block;
    font-weight: 700;
    font-size: 0.95rem;
}

.wedge3-touch-btn .touch-sub {
    display: block;
    font-size: 0.72rem;
    opacity: 0.9;
    margin-top: 2px;
}

.wedge3-touch-btn .touch-pts {
    flex-shrink: 0;
    font-weight: 800;
    font-size: 1rem;
    min-width: 28px;
    text-align: center;
}

.wedge3-touch-btn .touch-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    pointer-events: none;
    animation: wedge3Ripple 0.55s ease-out forwards;
}

@keyframes wedge3Ripple {
    from { transform: scale(0); opacity: 0.6; }
    to { transform: scale(1); opacity: 0; }
}

.wedge3-toast {
    min-height: 0;
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-700);
    margin-top: var(--spacing-2);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.wedge3-toast.visible {
    opacity: 1;
}

.wedge3-toast .toast-title {
    font-weight: 700;
}

.wedge3-toast .toast-sub {
    font-size: 0.8rem;
    color: var(--color-gray-500);
}

.wedge3-current-attempt h4 {
    font-size: 0.85rem;
    margin-bottom: var(--spacing-2);
    color: var(--color-gray-600);
}

.wedge3-holes-scroll {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wedge3-empty-holes {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

.wedge3-hole-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 44px;
    padding: 6px 10px;
    border-radius: 10px;
    font-size: 0.75rem;
    color: #fff;
    font-weight: 700;
}

.wedge3-hole-chip small {
    font-size: 0.6rem;
    opacity: 0.85;
}

.wedge3-hole-chip.zone-eagle { background: #7C3AED; }
.wedge3-hole-chip.zone-birdie { background: #16A34A; }
.wedge3-hole-chip.zone-par { background: #2563EB; }
.wedge3-hole-chip.zone-bogey { background: #D97706; }
.wedge3-hole-chip.zone-double { background: #DC2626; }

.wedge3-actions-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    padding-bottom: calc(var(--spacing-3) + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid var(--color-gray-200);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
    z-index: 100;
}

.wedge3-actions-bar .btn {
    flex: 1;
    min-height: 48px;
}

.wedge3-body.wedge3-saving .wedge3-interactive-section {
    opacity: 0.65;
    pointer-events: none;
}

.wedge3-touch-panel.is-complete {
    opacity: 0.85;
}

/* Rapport */
.wedge3-report-body .wedge3-stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--spacing-3);
}

.wedge3-report-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

.wedge3-score-badge {
    padding: var(--spacing-4) var(--spacing-5);
    border-radius: var(--border-radius-lg);
    color: #fff;
    text-align: center;
    min-width: 140px;
}

.wedge3-score-badge.elite { background: linear-gradient(135deg, #047857, #059669); }
.wedge3-score-badge.good { background: linear-gradient(135deg, #059669, #10B981); }
.wedge3-score-badge.needs-work { background: linear-gradient(135deg, #DC2626, #EF4444); }

.wedge3-score-value {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
}

.wedge3-score-label {
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: 4px;
}

.wedge3-score-date {
    font-size: 0.75rem;
    opacity: 0.85;
    margin-top: 4px;
}

.wedge3-hero-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
}

.wedge3-metric-pill {
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.wedge3-metric-pill .pill-label {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--color-gray-500);
    margin-bottom: 2px;
}

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

.wedge3-report-chart-card {
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-4);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.wedge3-report-attempts-detail {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wedge3-report-attempt-row {
    display: grid;
    grid-template-columns: 48px 56px 1fr auto;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--color-white);
    border-radius: var(--border-radius-md);
    border-left: 4px solid #e5e7eb;
}

.wedge3-report-attempt-row.success {
    border-left-color: #16A34A;
    background: #F0FDF4;
}

.wedge3-report-attempt-row.failed {
    border-left-color: #FCA5A5;
}

.wedge3-report-attempt-row .row-num {
    font-weight: 700;
    color: var(--color-gray-500);
}

.wedge3-report-attempt-row .row-score {
    font-weight: 800;
    font-size: 1.1rem;
}

.wedge3-report-attempt-row .row-holes {
    font-size: 0.85rem;
    color: var(--color-gray-600);
}

.wedge3-report-attempt-row .row-status {
    font-weight: 600;
    color: #059669;
}

.wedge3-table-scroll {
    overflow-x: auto;
}

.wedge3-report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.wedge3-report-table th,
.wedge3-report-table td {
    padding: var(--spacing-3);
    text-align: left;
    border-bottom: 1px solid var(--color-gray-200);
}

.wedge3-report-table th {
    background: #f3f4f6;
    font-weight: 600;
}

@media (min-width: 769px) {
    .wedge3-test.test-container {
        max-width: 480px;
        margin: 0 auto;
    }

    .wedge3-actions-bar {
        max-width: 520px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
    }
}

@media (max-width: 768px) {
    .wedge3-test.test-container {
        padding: var(--spacing-3);
        padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px));
    }

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

    .wedge3-attempts-track {
        gap: 4px;
    }

    .wedge3-attempt-chip {
        min-width: 32px;
        min-height: 38px;
    }

    .wedge3-report-attempt-row {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }

    .wedge3-report-hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* ==========================================================================
   Putting aléatoire 30 putts 1-2-3 m
   ========================================================================== */

.putting30-body {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    overflow-x: hidden;
    max-width: 100vw;
}

.putting30-test.test-container {
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
}

.putting30-test-content {
    gap: var(--spacing-4);
}

.putting30-interactive-section {
    border: 2px solid #059669;
    background: linear-gradient(180deg, #F0FDF4 0%, #FFFFFF 100%);
}

.putting30-header-compact h1 {
    font-size: 1.35rem;
}

.putting30-back .btn {
    min-height: 44px;
}

.putting30-info-box ol {
    margin: 0;
    padding-left: 1.25rem;
}

.putting30-info-box li + li {
    margin-top: var(--spacing-2);
}

.putting30-date-compact {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: 0;
}

.putting30-date-compact .form-input {
    flex: 1;
    min-height: 44px;
}

.putting30-status-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.putting30-status-bar .status-item {
    text-align: center;
    min-width: 0;
}

.putting30-status-bar .status-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-gray-500);
    margin-bottom: 2px;
}

.putting30-status-bar .status-item strong {
    font-size: 1rem;
    color: var(--color-gray-900);
}

.putting30-status-bar .status-item strong small {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-gray-500);
}

.putting30-status-bar .status-remaining strong {
    font-size: 0.72rem;
    line-height: 1.2;
}

.putting30-position-hint {
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: #047857;
    margin-bottom: var(--spacing-2);
}

.putting30-progress-track {
    height: 6px;
    background: var(--color-gray-200);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: var(--spacing-3);
}

.putting30-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #059669, #10B981);
    border-radius: 999px;
    transition: width 0.35s ease;
}

.putting30-progress-fill.is-complete {
    background: linear-gradient(90deg, #16A34A, #059669);
}

.putting30-distances-track {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: var(--spacing-3);
}

.putting30-distance-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 56px;
    padding: 6px 10px;
    border-radius: 10px;
    background: #f3f4f6;
    border: 2px solid #e5e7eb;
    font-size: 0.75rem;
}

.putting30-distance-chip small {
    font-size: 0.65rem;
    color: var(--color-gray-500);
}

.putting30-distance-chip strong {
    font-weight: 800;
}

.putting30-distance-chip.done {
    background: #166534;
    color: #fff;
    border-color: #14532d;
}

.putting30-distance-chip.done small {
    color: rgba(255, 255, 255, 0.85);
}

.putting30-touch-hint {
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-3);
}

.putting30-touch-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.putting30-touch-buttons.zones-hidden {
    opacity: 0.35;
    transform: scale(0.98);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.putting30-touch-buttons.zones-reveal {
    animation: putting30ZonesReveal 0.4s ease forwards;
}

@keyframes putting30ZonesReveal {
    from { opacity: 0.5; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.putting30-touch-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    width: 100%;
    min-height: 72px;
    padding: var(--spacing-4);
    border: 2px solid transparent;
    border-radius: 16px;
    cursor: pointer;
    text-align: left;
    position: relative;
    overflow: hidden;
    font-family: inherit;
    font-size: inherit;
    line-height: 1.2;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    color: #fff;
    transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.25s ease, filter 0.15s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}

.putting30-touch-btn:active:not(:disabled),
.putting30-touch-btn.zone-pressed {
    transform: scale(0.97);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18) inset;
    filter: brightness(0.95);
}

.putting30-touch-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.putting30-touch-btn.zone-flash {
    animation: putting30TouchPop 0.48s cubic-bezier(0.34, 1.45, 0.64, 1);
}

@keyframes putting30TouchPop {
    0% { transform: scale(1); }
    35% { transform: scale(0.96); filter: brightness(0.92); }
    65% { transform: scale(1.02); filter: brightness(1.08); }
    100% { transform: scale(1); filter: brightness(1); }
}

.putting30-touch-btn.zone-made {
    background-color: #16a34a;
    background-image: linear-gradient(135deg, #14532d 0%, #16a34a 100%);
    border-color: rgba(255, 255, 255, 0.25);
}

.putting30-touch-btn.zone-missed {
    background-color: #dc2626;
    background-image: linear-gradient(135deg, #991b1b 0%, #dc2626 100%);
    border-color: rgba(255, 255, 255, 0.25);
}

.putting30-touch-btn .touch-icon {
    flex-shrink: 0;
    font-size: 1.5rem;
}

.putting30-touch-btn .touch-text {
    flex: 1;
}

.putting30-touch-btn .touch-label {
    display: block;
    font-weight: 700;
    font-size: 1rem;
}

.putting30-touch-btn .touch-sub {
    display: block;
    font-size: 0.78rem;
    opacity: 0.9;
    margin-top: 2px;
}

.putting30-touch-btn .touch-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    pointer-events: none;
    animation: putting30Ripple 0.55s ease-out forwards;
}

@keyframes putting30Ripple {
    from { transform: scale(0); opacity: 0.6; }
    to { transform: scale(1); opacity: 0; }
}

.putting30-toast {
    min-height: 0;
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-top: var(--spacing-2);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.putting30-toast.visible {
    opacity: 1;
}

.putting30-toast .toast-title {
    display: block;
    font-weight: 700;
}

.putting30-toast .toast-sub {
    display: block;
    font-size: 0.8rem;
    color: var(--color-gray-500);
    margin-top: 2px;
}

.putting30-putts-track h4 {
    font-size: 0.85rem;
    margin-bottom: var(--spacing-2);
    color: var(--color-gray-600);
}

.putting30-putts-scroll {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.putting30-empty-putts {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

.putting30-putt-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 44px;
    padding: 6px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    color: #fff;
    font-weight: 700;
}

.putting30-putt-chip small {
    font-size: 0.6rem;
    opacity: 0.85;
}

.putting30-putt-chip.zone-made { background: #16A34A; }
.putting30-putt-chip.zone-missed { background: #DC2626; }

.putting30-actions-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    padding-bottom: calc(var(--spacing-3) + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid var(--color-gray-200);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
    z-index: 100;
}

.putting30-actions-bar .btn {
    flex: 1;
    min-height: 48px;
}

.putting30-body.putting30-saving .putting30-interactive-section {
    opacity: 0.65;
    pointer-events: none;
}

.putting30-touch-panel.is-complete {
    opacity: 0.85;
}

/* Rapport */
.putting30-report-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

.putting30-stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--spacing-3);
}

.putting30-score-badge {
    padding: var(--spacing-4) var(--spacing-5);
    border-radius: var(--border-radius-lg);
    color: #fff;
    text-align: center;
    min-width: 140px;
}

.putting30-score-badge.elite { background: linear-gradient(135deg, #047857, #059669); }
.putting30-score-badge.good { background: linear-gradient(135deg, #059669, #10B981); }
.putting30-score-badge.average { background: linear-gradient(135deg, #D97706, #F59E0B); }
.putting30-score-badge.needs-work { background: linear-gradient(135deg, #DC2626, #EF4444); }

.putting30-score-value {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
}

.putting30-score-value small {
    font-size: 1.25rem;
    font-weight: 700;
}

.putting30-score-label {
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: 4px;
}

.putting30-score-date {
    font-size: 0.75rem;
    opacity: 0.85;
    margin-top: 4px;
}

.putting30-hero-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
}

.putting30-metric-pill {
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.putting30-metric-pill .pill-label {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--color-gray-500);
    margin-bottom: 2px;
}

.putting30-benchmarks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
}

.putting30-benchmark-card {
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-4);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.putting30-benchmark-card.perfect { border-left: 4px solid #059669; }
.putting30-benchmark-card.tour { border-left: 4px solid #2563eb; }
.putting30-benchmark-card.good { border-left: 4px solid #f59e0b; }

.putting30-benchmark-card h4 {
    margin-bottom: var(--spacing-2);
}

.putting30-benchmark-card p {
    font-size: 0.85rem;
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-2);
}

.putting30-benchmark-card .bench-status {
    font-weight: 700;
    color: #059669;
}

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

.putting30-report-chart-card {
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-4);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.putting30-report-putts-detail {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.putting30-report-putt-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 40px;
    padding: 4px 6px;
    border-radius: 8px;
    font-size: 0.7rem;
    color: #fff;
    font-weight: 700;
}

.putting30-report-putt-chip small {
    font-size: 0.58rem;
    opacity: 0.85;
}

.putting30-report-putt-chip.made { background: #16A34A; }
.putting30-report-putt-chip.missed { background: #DC2626; }

.putting30-table-scroll {
    overflow-x: auto;
}

.putting30-report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.putting30-report-table th,
.putting30-report-table td {
    padding: var(--spacing-3);
    text-align: left;
    border-bottom: 1px solid var(--color-gray-200);
}

.putting30-report-table th {
    background: #f3f4f6;
    font-weight: 600;
}

@media (min-width: 769px) {
    .putting30-test.test-container {
        max-width: 480px;
        margin: 0 auto;
    }

    .putting30-actions-bar {
        max-width: 520px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
    }
}

@media (max-width: 768px) {
    .putting30-test.test-container {
        padding: var(--spacing-3);
        padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px));
    }

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

    .putting30-report-hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* Bouton suppression dernière session — rapports performance */
.report-delete-last-session-bar {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 2px solid #fca5a5;
    border-radius: var(--border-radius-lg);
    margin: 0 0 var(--spacing-6) 0;
    padding: var(--spacing-4) var(--spacing-6);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.12);
}

.report-delete-last-session-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
    max-width: 1200px;
    margin: 0 auto;
}

.report-delete-back-btn {
    font-weight: 600;
    white-space: nowrap;
}

.btn-delete-last-session {
    font-size: var(--font-size-base);
    font-weight: 700;
    padding: 0.75rem 1.25rem;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
}

.btn-delete-last-session.loading {
    opacity: 0.85;
    cursor: wait;
}

.report-delete-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10050;
    background: #10b981;
    color: #fff;
    padding: 0.875rem 1.25rem;
    border-radius: var(--border-radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    transform: translateX(120%);
    transition: transform 0.3s ease;
    max-width: min(90vw, 360px);
}

.report-delete-toast.visible {
    transform: translateX(0);
}

.report-delete-toast-error {
    background: #ef4444;
}

@media (max-width: 768px) {
    .report-delete-last-session-inner {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .report-delete-back-btn,
    .btn-delete-last-session {
        width: 100%;
    }
}

/* The 3 in a Row Tour Drill */
.putting3row-credit {
    margin-top: 0.35rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted, #64748b);
}

.putting3row-info h3 {
    margin-top: var(--spacing-4);
    margin-bottom: var(--spacing-2);
}

.putting3row-info h3:first-of-type {
    margin-top: 0;
}

.putting3row-benchmarks-list {
    margin: 0;
    padding-left: 1.25rem;
}

.putting3row-benchmarks-list li + li {
    margin-top: 0.35rem;
}

.putting3row-video-link {
    margin-top: var(--spacing-4);
    margin-bottom: 0;
}

.putting3row-video-link a {
    color: #2563eb;
    font-weight: 600;
}

.putting50ft-distance-track {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.75rem 0 1rem;
    flex-wrap: wrap;
}

.putting50ft-distance-chip {
    min-width: 3.5rem;
}

.putting50ft-progress-fill {
    background: linear-gradient(90deg, #2563eb, #16a34a);
}

/* ===== Chipping Ladder Challenge ===== */
.ladder-body {
    background: var(--color-gray-50);
}

.ladder-test.test-container {
    max-width: 720px;
}

.ladder-author {
    font-size: 0.85rem;
    color: var(--color-gray-500);
    margin-top: 0.25rem;
}

.ladder-status-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.ladder-status-bar .status-item {
    background: white;
    border-radius: 12px;
    padding: 0.75rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.ladder-status-bar .status-label {
    display: block;
    font-size: 0.7rem;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ladder-cases-track {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}

.ladder-case-chip {
    min-width: 3.5rem;
    padding: 0.6rem 0.5rem;
    border-radius: 10px;
    background: var(--color-gray-100);
    text-align: center;
    font-weight: 700;
    font-size: 1.1rem;
    border: 2px solid transparent;
    transition: all 0.25s ease;
}

.ladder-case-chip small {
    display: block;
    font-size: 0.6rem;
    font-weight: 500;
    color: var(--color-gray-500);
}

.ladder-case-chip.current {
    border-color: #2563EB;
    background: #EFF6FF;
    transform: scale(1.08);
}

.ladder-case-chip.hit {
    background: #DCFCE7;
    border-color: #16A34A;
}

.ladder-case-chip.miss {
    background: #FEE2E2;
    border-color: #DC2626;
}

.ladder-touch-panel {
    background: white;
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: var(--shadow-md);
    margin-bottom: 1rem;
}

.ladder-touch-hint {
    text-align: center;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--color-gray-700);
}

.ladder-touch-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ladder-touch-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border: 2px solid var(--color-gray-200);
    border-radius: 14px;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 4.5rem;
}

.ladder-touch-btn.zone-hit { border-color: #86EFAC; }
.ladder-touch-btn.zone-miss { border-color: #FCA5A5; }

.ladder-touch-btn:active:not(:disabled),
.ladder-touch-btn.zone-pressed {
    transform: scale(0.98);
}

.ladder-touch-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ladder-touch-btn .touch-label {
    display: block;
    font-weight: 700;
    font-size: 1.05rem;
}

.ladder-touch-btn .touch-sub {
    font-size: 0.8rem;
    color: var(--color-gray-500);
}

.ladder-toast {
    margin-top: 1rem;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ladder-toast.visible { opacity: 1; }

.ladder-balls-scroll {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.ladder-ball-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    font-size: 1rem;
    background: var(--color-gray-100);
}

.ladder-ball-chip.ball-hit { background: #DCFCE7; }
.ladder-ball-chip.ball-miss { background: #FEE2E2; }

.ladder-ball-chip small {
    font-size: 0.65rem;
    color: var(--color-gray-600);
}

.ladder-hero-card {
    text-align: center;
    padding: 2rem;
    border-radius: 16px;
    background: linear-gradient(135deg, #EFF6FF, #F0FDF4);
    margin-bottom: 1.5rem;
}

.ladder-hero-score {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
}

.ladder-hero-label {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

.ladder-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.5rem;
}

.ladder-detail-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
    border-radius: 8px;
    background: var(--color-gray-50);
    font-size: 0.85rem;
}

.ladder-detail-item.hit { background: #DCFCE7; }
.ladder-detail-item.miss { background: #FEE2E2; }

@media (max-width: 480px) {
    .ladder-status-bar {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== Le Défi du Boîté ===== */
.boite-body { background: var(--color-gray-50); }
.boite-test.test-container { max-width: 720px; }
.boite-author { font-size: 0.85rem; color: var(--color-gray-500); margin-top: 0.25rem; }

.boite-status-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.boite-status-bar .status-item {
    background: white;
    border-radius: 12px;
    padding: 0.75rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.boite-status-bar .status-label {
    display: block;
    font-size: 0.7rem;
    color: var(--color-gray-500);
    text-transform: uppercase;
}

.boite-positions-track {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}

.boite-position-chip {
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    background: var(--color-gray-100);
    text-align: center;
    font-weight: 600;
    font-size: 0.85rem;
    border: 2px solid transparent;
}

.boite-position-chip small { display: block; font-size: 0.65rem; font-weight: 500; color: var(--color-gray-600); }
.boite-position-chip.current { border-color: #2563EB; background: #EFF6FF; }
.boite-position-chip.holed { background: #DCFCE7; border-color: #16A34A; }
.boite-position-chip.failed { background: #FEE2E2; border-color: #DC2626; }

.boite-touch-panel {
    background: white;
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: var(--shadow-md);
    margin-bottom: 1rem;
}

.boite-touch-hint { text-align: center; font-weight: 600; margin-bottom: 1rem; }
.boite-touch-buttons { display: flex; flex-direction: column; gap: 0.75rem; }

.boite-touch-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border: 2px solid var(--color-gray-200);
    border-radius: 14px;
    background: white;
    cursor: pointer;
    min-height: 4.5rem;
}

.boite-touch-btn.zone-made { border-color: #86EFAC; }
.boite-touch-btn.zone-miss { border-color: #FCA5A5; }
.boite-touch-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.boite-touch-btn .touch-label { display: block; font-weight: 700; font-size: 1.05rem; }
.boite-touch-btn .touch-sub { font-size: 0.8rem; color: var(--color-gray-500); }

.boite-toast { margin-top: 1rem; text-align: center; opacity: 0; transition: opacity 0.3s; }
.boite-toast.visible { opacity: 1; }

.boite-balls-scroll { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.boite-ball-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    background: var(--color-gray-100);
}
.boite-ball-chip.ball-made { background: #DCFCE7; }
.boite-ball-chip.ball-miss { background: #FEE2E2; }

.boite-hero-card {
    text-align: center;
    padding: 2rem;
    border-radius: 16px;
    background: linear-gradient(135deg, #F0FDF4, #EFF6FF);
    margin-bottom: 1.5rem;
}

.boite-hero-score { font-size: 3rem; font-weight: 800; }
.boite-detail-row {
    display: flex;
    flex-direction: column;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: 8px;
    background: var(--color-gray-50);
}

.boite-detail-row.pos-easy { border-left: 4px solid #22C55E; }
.boite-detail-row.pos-normal { border-left: 4px solid #EAB308; }
.boite-detail-row.pos-hard { border-left: 4px solid #EF4444; }

@media (max-width: 480px) {
    .boite-status-bar { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   The 3-Point Drill — Cameron McCormick
   ========================================================================== */

.threepoint-body {
    background: var(--color-gray-50);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.threepoint-test.test-container {
    max-width: 720px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

.threepoint-author {
    font-size: 0.85rem;
    color: var(--color-gray-500);
    margin-top: 0.25rem;
}

.threepoint-header-compact h1 { margin-bottom: 0.25rem; }
.threepoint-info-box ol { padding-left: 1.25rem; margin: 0.5rem 0 0; }
.threepoint-info-box ul { margin: 0.35rem 0 0.35rem 1rem; }
.threepoint-date-compact { margin-bottom: 1rem; }

.threepoint-status-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.threepoint-status-bar .status-item {
    background: white;
    border-radius: 12px;
    padding: 0.75rem 0.5rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.threepoint-status-bar .status-label {
    display: block;
    font-size: 0.65rem;
    color: var(--color-gray-500);
    text-transform: uppercase;
}

.threepoint-balls-track {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.threepoint-ball-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 4rem;
    padding: 0.5rem 0.75rem;
    border-radius: 12px;
    background: var(--color-gray-100);
    border: 2px solid transparent;
    font-weight: 700;
}

.threepoint-ball-chip small {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-gray-600);
    margin-top: 2px;
}

.threepoint-ball-chip.current {
    border-color: #2563EB;
    background: #EFF6FF;
}

.threepoint-ball-chip.done {
    background: #DCFCE7;
    border-color: #16A34A;
}

.threepoint-ball-chip.perfect {
    background: #166534;
    color: #fff;
    border-color: #14532d;
}

.threepoint-ball-chip.perfect small { color: rgba(255,255,255,0.85); }
.threepoint-ball-chip.good { background: #BBF7D0; border-color: #22C55E; }
.threepoint-ball-chip.empty { background: #FEE2E2; border-color: #FCA5A5; }

.threepoint-progress-track {
    height: 8px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.threepoint-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #2563EB, #16A34A);
    border-radius: 999px;
    transition: width 0.35s ease;
}

.threepoint-progress-fill.is-complete {
    background: linear-gradient(90deg, #16A34A, #059669);
}

.threepoint-touch-panel {
    background: white;
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: var(--shadow-md);
    margin-bottom: 1rem;
}

.threepoint-touch-hint {
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-600);
    margin-bottom: 1rem;
}

.threepoint-criteria-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 1rem;
}

.threepoint-criterion-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 68px;
    padding: 0.85rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.threepoint-criterion-btn.selected {
    border-color: #2563EB;
    background: #EFF6FF;
    box-shadow: 0 0 0 1px #2563EB inset;
}

.threepoint-criterion-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.threepoint-criterion-btn .criterion-icon { font-size: 1.4rem; }
.threepoint-criterion-btn .criterion-text { flex: 1; }
.threepoint-criterion-btn .criterion-label {
    display: block;
    font-weight: 700;
    color: #1f2937;
}

.threepoint-criterion-btn .criterion-sub {
    display: block;
    font-size: 0.78rem;
    color: var(--color-gray-500);
    margin-top: 2px;
}

.threepoint-criterion-btn .criterion-pts {
    font-weight: 800;
    color: #2563EB;
    font-size: 1rem;
}

.threepoint-criterion-btn.selected .criterion-pts { color: #16A34A; }

.threepoint-confirm-btn {
    width: 100%;
    min-height: 48px;
    font-weight: 700;
}

.threepoint-toast {
    margin-top: 0.75rem;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.threepoint-toast.visible { opacity: 1; }
.threepoint-toast .toast-title { display: block; font-weight: 700; color: #1f2937; }
.threepoint-toast .toast-sub { display: block; font-size: 0.85rem; color: var(--color-gray-500); margin-top: 4px; }

.threepoint-balls-summary h4 {
    font-size: 0.85rem;
    color: var(--color-gray-600);
    margin-bottom: 0.5rem;
}

.threepoint-balls-scroll { display: flex; flex-direction: column; gap: 0.5rem; }
.threepoint-empty-balls { color: var(--color-gray-500); font-size: 0.85rem; }

.threepoint-ball-row {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 0.5rem 0.75rem;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: white;
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    font-size: 0.85rem;
}

.threepoint-ball-row .ball-row-points { font-weight: 700; color: #2563EB; }
.threepoint-ball-row .ball-row-criteria { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.mini-criterion {
    font-size: 0.72rem;
    padding: 2px 6px;
    border-radius: 6px;
    background: #f3f4f6;
    color: #9ca3af;
}

.mini-criterion.on {
    background: #DCFCE7;
    color: #166534;
    font-weight: 600;
}

.threepoint-actions-bar {
    display: flex;
    gap: 0.75rem;
}

.threepoint-body.threepoint-saving .threepoint-interactive-section {
    opacity: 0.7;
    pointer-events: none;
}

.threepoint-hero-card {
    text-align: center;
    padding: 2rem;
    border-radius: 16px;
    background: linear-gradient(135deg, #EFF6FF, #F0FDF4);
}

.threepoint-hero-card.perfect { background: linear-gradient(135deg, #059669, #16A34A); color: #fff; }
.threepoint-hero-card.elite { background: linear-gradient(135deg, #2563EB, #16A34A); color: #fff; }
.threepoint-hero-card.good { background: linear-gradient(135deg, #DBEAFE, #EFF6FF); }
.threepoint-hero-card.average { background: linear-gradient(135deg, #FEF3C7, #FFFBEB); }

.threepoint-hero-score {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
}

.threepoint-hero-score small { font-size: 1.5rem; opacity: 0.8; }
.threepoint-hero-label { font-size: 1.1rem; font-weight: 700; margin-top: 0.5rem; }
.threepoint-hero-date { font-size: 0.85rem; opacity: 0.8; margin-top: 0.35rem; }
.threepoint-hero-breakdown { font-size: 0.9rem; margin-top: 0.75rem; }

.threepoint-report-balls { display: flex; flex-direction: column; gap: 0.75rem; }

.threepoint-report-ball-row {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #f9fafb;
    border-radius: 10px;
}

.threepoint-criteria-chip {
    display: inline-block;
    font-size: 0.78rem;
    padding: 3px 8px;
    border-radius: 6px;
    margin-right: 4px;
    background: #f3f4f6;
    color: #9ca3af;
}

.threepoint-criteria-chip.on {
    background: #DCFCE7;
    color: #166534;
    font-weight: 600;
}

.threepoint-report-charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.threepoint-report-chart-card {
    background: #f9fafb;
    border-radius: 12px;
    padding: 1rem;
}

@media (max-width: 480px) {
    .threepoint-ball-row {
        grid-template-columns: 1fr;
    }

    .threepoint-report-ball-row {
        grid-template-columns: 1fr;
    }
}

.bunker-impact-guide p {
    margin: 0.5rem 0;
}

.bunker-impact-guide p:first-child {
    margin-top: 0;
}

/* ===== Bunker — Drill des 3 Zones de Distance ===== */
.bunker3zones-body {
    background: var(--color-gray-50);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.bunker3zones-test.test-container {
    max-width: 720px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

.bunker3zones-header-compact h1 { margin-bottom: 0.25rem; }
.bunker3zones-tag { font-size: 0.85rem; color: #c2410c; margin-top: 0.25rem; font-weight: 600; }
.bunker3zones-info-box ol { padding-left: 1.25rem; margin: 0.5rem 0 0; }
.bunker3zones-date-compact { margin-bottom: 1rem; }

.bunker3zones-status-bar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.bunker3zones-status-bar .status-item {
    background: white;
    border-radius: 12px;
    padding: 0.75rem 0.5rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.bunker3zones-status-bar .status-label {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--color-gray-500);
    margin-bottom: 0.25rem;
}

.bunker3zones-zone-badge.pulse-zone {
    animation: bunker3zonesPulse 0.45s ease;
}

@keyframes bunker3zonesPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.25); }
}

.bunker3zones-zones-track {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.bunker3zones-zone-chip {
    flex: 1;
    min-width: 90px;
    text-align: center;
    padding: 0.5rem 0.35rem;
    border-radius: 10px;
    background: white;
    border: 2px solid var(--color-gray-200);
    font-size: 0.75rem;
    font-weight: 700;
}

.bunker3zones-zone-chip small {
    display: block;
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--color-gray-600);
    margin-top: 2px;
}

.bunker3zones-zone-chip.current { border-color: #ea580c; background: #fff7ed; }
.bunker3zones-zone-chip.great { background: #dcfce7; border-color: #16a34a; }
.bunker3zones-zone-chip.good { background: #dbeafe; border-color: #2563eb; }
.bunker3zones-zone-chip.ok { background: #fef9c3; border-color: #ca8a04; }
.bunker3zones-zone-chip.weak { background: #fee2e2; border-color: #dc2626; }

.bunker3zones-touch-panel {
    background: white;
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: var(--shadow-md);
    margin-bottom: 1rem;
}

.bunker3zones-touch-panel.is-transitioning { pointer-events: none; }

.bunker3zones-touch-hint {
    text-align: center;
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-3);
    line-height: 1.35;
}

.bunker3zones-touch-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bunker3zones-touch-buttons.zones-hidden,
.bunker3zones-touch-stack.zones-hidden {
    opacity: 0.35;
    transform: scale(0.98);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.bunker3zones-touch-buttons.zones-reveal,
.bunker3zones-touch-stack.zones-reveal {
    animation: putting456ZonesReveal 0.4s ease forwards;
}

.bunker3zones-touch-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    width: 100%;
    min-height: 62px;
    padding: var(--spacing-3) var(--spacing-4);
    border: none;
    border-radius: 14px;
    cursor: pointer;
    text-align: left;
    position: relative;
    overflow: hidden;
    color: #fff;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.25s ease;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14);
}

.bunker3zones-touch-btn:active:not(:disabled),
.bunker3zones-touch-btn.zone-pressed {
    transform: scale(0.97);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18) inset;
}

.bunker3zones-touch-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.bunker3zones-touch-btn.zone-flash { animation: putting456TouchPop 0.48s cubic-bezier(0.34, 1.45, 0.64, 1); }

.bunker3zones-touch-btn.zone-holed { background: linear-gradient(135deg, #14532d, #22c55e); }
.bunker3zones-touch-btn.zone-close { background: linear-gradient(135deg, #1d4ed8, #3b82f6); }
.bunker3zones-touch-btn.zone-far { background: linear-gradient(135deg, #a16207, #eab308); color: #1f2937; }
.bunker3zones-touch-btn.zone-far .touch-sub { color: #422006; opacity: 0.85; }
.bunker3zones-touch-btn.zone-fail { background: linear-gradient(135deg, #7f1d1d, #dc2626); }

.bunker3zones-touch-btn .touch-text { flex: 1; min-width: 0; }
.bunker3zones-touch-btn .touch-label { display: block; font-weight: 700; font-size: 1.05rem; }
.bunker3zones-touch-btn .touch-sub { display: block; font-size: 0.8rem; opacity: 0.9; }
.bunker3zones-touch-btn .touch-icon { font-size: 1.5rem; flex-shrink: 0; }

.bunker3zones-touch-btn .touch-pts {
    font-weight: 800;
    font-size: 1.15rem;
    min-width: 2rem;
    text-align: center;
}

.bunker3zones-touch-btn.zone-far .touch-pts { color: #422006; }

.bunker3zones-toast {
    margin-top: 1rem;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.bunker3zones-toast.visible { opacity: 1; }
.bunker3zones-toast .toast-title { display: block; font-weight: 700; }
.bunker3zones-toast .toast-sub { display: block; font-size: var(--font-size-sm); margin-top: 2px; color: var(--color-gray-600); }

.bunker3zones-balls-track h4 { font-size: 0.9rem; color: var(--color-gray-600); margin-bottom: 0.5rem; }
.bunker3zones-balls-scroll { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.bunker3zones-empty { color: var(--color-gray-500); font-size: 0.85rem; }

.bunker3zones-ball-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    background: var(--color-gray-100);
    min-width: 44px;
}

.bunker3zones-ball-chip.zone-holed { background: #DCFCE7; }
.bunker3zones-ball-chip.zone-close { background: #DBEAFE; }
.bunker3zones-ball-chip.zone-far { background: #FEF9C3; }
.bunker3zones-ball-chip.zone-fail { background: #FEE2E2; }

.bunker3zones-ball-chip small { font-size: 0.6rem; color: var(--color-gray-600); }
.bunker3zones-ball-chip strong { font-size: 0.75rem; }

.bunker3zones-report-body .bunker3zones-hero-card {
    text-align: center;
    padding: 2rem;
    border-radius: 16px;
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    margin-bottom: 1.5rem;
}

.bunker3zones-hero-score { font-size: 3rem; font-weight: 800; color: #c2410c; }
.bunker3zones-hero-score small { font-size: 1.25rem; color: var(--color-gray-500); }

.bunker3zones-benchmarks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}

.bunker3zones-report-charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.bunker3zones-report-chart-card {
    background: #f9fafb;
    border-radius: 12px;
    padding: 1rem;
}

.bunker3zones-detail-row {
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.35rem;
    border-radius: 8px;
    background: var(--color-gray-50);
    font-size: 0.9rem;
}

.bunker3zones-detail-row.outcome-holed { border-left: 4px solid #16a34a; }
.bunker3zones-detail-row.outcome-close { border-left: 4px solid #2563eb; }
.bunker3zones-detail-row.outcome-far { border-left: 4px solid #ca8a04; }
.bunker3zones-detail-row.outcome-fail { border-left: 4px solid #dc2626; }

.bunker3zones-zone-row {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    border-radius: 10px;
    background: white;
    box-shadow: var(--shadow-sm);
}

.bunker3zones-zone-row.zone-short { border-left: 4px solid #92400e; }
.bunker3zones-zone-row.zone-medium { border-left: 4px solid #ea580c; }
.bunker3zones-zone-row.zone-long { border-left: 4px solid #dc2626; }

.bunker3zones-table-scroll { overflow-x: auto; }
.bunker3zones-report-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.bunker3zones-report-table th,
.bunker3zones-report-table td { padding: 0.5rem; border-bottom: 1px solid var(--color-gray-200); text-align: center; }
.bunker3zones-report-table th { background: #fff7ed; }

@media (max-width: 640px) {
    .bunker3zones-status-bar { grid-template-columns: repeat(2, 1fr); }
    .bunker3zones-status-bar .status-item.status-score { grid-column: span 2; }
    .bunker3zones-touch-btn { min-height: 56px; }
}

/* ===== Bunker — Par 2 Stroke Play ===== */
.bunkerpar2-body {
    background: var(--color-gray-50);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.bunkerpar2-test.test-container {
    max-width: 720px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

.bunkerpar2-header-compact h1 { margin-bottom: 0.25rem; }
.bunkerpar2-tag { font-size: 0.85rem; color: #7c2d12; margin-top: 0.25rem; font-weight: 600; }
.bunkerpar2-info-box ol { padding-left: 1.25rem; margin: 0.5rem 0 0; }
.bunkerpar2-info-box ul { margin: 0.35rem 0 0.35rem 1rem; }
.bunkerpar2-date-compact { margin-bottom: 1rem; }

.bunkerpar2-status-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.bunkerpar2-status-bar .status-item {
    background: white;
    border-radius: 12px;
    padding: 0.75rem 0.5rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.bunkerpar2-status-bar .status-label {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--color-gray-500);
    margin-bottom: 0.25rem;
}

.bunkerpar2-progress-track {
    height: 6px;
    background: var(--color-gray-200);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.bunkerpar2-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #ea580c, #7c2d12);
    transition: width 0.35s ease;
}

.bunkerpar2-strokes-hint {
    text-align: center;
    font-size: 0.85rem;
    color: var(--color-gray-600);
    margin-bottom: 0.75rem;
}

.bunkerpar2-hole-plan-track {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.bunkerpar2-hole-chip {
    flex: 1;
    min-width: 52px;
    text-align: center;
    padding: 0.4rem 0.3rem;
    border-radius: 8px;
    background: white;
    border: 2px solid var(--color-gray-200);
    font-size: 0.7rem;
    font-weight: 700;
}

.bunkerpar2-hole-chip small { display: block; font-size: 0.6rem; font-weight: 500; color: var(--color-gray-600); }
.bunkerpar2-hole-chip.current { border-color: #ea580c; background: #fff7ed; }
.bunkerpar2-hole-chip.great { background: #dcfce7; border-color: #16a34a; }
.bunkerpar2-hole-chip.good { background: #dbeafe; border-color: #2563eb; }
.bunkerpar2-hole-chip.ok { background: #fef9c3; border-color: #ca8a04; }
.bunkerpar2-hole-chip.weak { background: #fee2e2; border-color: #dc2626; }

.bunkerpar2-lie-badge.lie-clean { background: #fff7ed; color: #9a3412; }
.bunkerpar2-lie-badge.lie-difficult { background: #fef3c7; color: #b45309; }
.bunkerpar2-lie-badge.lie-tight { background: #fee2e2; color: #b91c1c; }
.bunkerpar2-lie-badge.is-complete { background: #f3f4f6; color: var(--color-gray-600); }

.bunkerpar2-touch-panel {
    background: white;
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: var(--shadow-md);
    margin-bottom: 1rem;
}

.bunkerpar2-touch-panel.is-transitioning { pointer-events: none; }

.bunkerpar2-touch-hint {
    text-align: center;
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin-bottom: 0.75rem;
}

.bunkerpar2-lie-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    margin-bottom: 1rem;
    font-weight: 700;
}

.bunkerpar2-lie-hero.lie-clean { background: linear-gradient(135deg, #fff7ed, #ffedd5); border: 2px solid #fdba74; }
.bunkerpar2-lie-hero.lie-difficult { background: linear-gradient(135deg, #fffbeb, #fef3c7); border: 2px solid #fcd34d; }
.bunkerpar2-lie-hero.lie-tight { background: linear-gradient(135deg, #fef2f2, #fee2e2); border: 2px solid #fca5a5; }
.bunkerpar2-lie-hero.is-complete { background: #f9fafb; border-color: var(--color-gray-200); }

.lie-hero-icon { font-size: 1.75rem; }

.bunkerpar2-touch-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bunkerpar2-touch-buttons.zones-hidden,
.bunkerpar2-touch-stack.zones-hidden {
    opacity: 0.35;
    transform: scale(0.98);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.bunkerpar2-touch-buttons.zones-reveal,
.bunkerpar2-touch-stack.zones-reveal {
    animation: putting456ZonesReveal 0.4s ease forwards;
}

.bunkerpar2-touch-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    width: 100%;
    min-height: 62px;
    padding: var(--spacing-3) var(--spacing-4);
    border: none;
    border-radius: 14px;
    cursor: pointer;
    text-align: left;
    position: relative;
    overflow: hidden;
    color: #fff;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14);
    transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.bunkerpar2-touch-btn:active:not(:disabled),
.bunkerpar2-touch-btn.zone-pressed { transform: scale(0.97); }
.bunkerpar2-touch-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.bunkerpar2-touch-btn.zone-flash { animation: putting456TouchPop 0.48s cubic-bezier(0.34, 1.45, 0.64, 1); }

.bunkerpar2-touch-btn.zone-holed { background: linear-gradient(135deg, #14532d, #22c55e); }
.bunkerpar2-touch-btn.zone-par { background: linear-gradient(135deg, #1e3a8a, #3b82f6); }
.bunkerpar2-touch-btn.zone-bogey { background: linear-gradient(135deg, #a16207, #eab308); color: #1f2937; }
.bunkerpar2-touch-btn.zone-bogey .touch-sub { color: #422006; opacity: 0.85; }
.bunkerpar2-touch-btn.zone-double { background: linear-gradient(135deg, #7f1d1d, #dc2626); }

.bunkerpar2-touch-btn .touch-text { flex: 1; min-width: 0; }
.bunkerpar2-touch-btn .touch-label { display: block; font-weight: 700; font-size: 1.05rem; }
.bunkerpar2-touch-btn .touch-sub { display: block; font-size: 0.8rem; opacity: 0.9; }
.bunkerpar2-touch-btn .touch-icon { font-size: 1.5rem; flex-shrink: 0; }
.bunkerpar2-touch-btn .touch-strokes { font-weight: 800; font-size: 1.1rem; min-width: 2rem; text-align: center; }
.bunkerpar2-touch-btn.zone-bogey .touch-strokes { color: #422006; }

.bunkerpar2-toast { margin-top: 1rem; text-align: center; opacity: 0; transition: opacity 0.3s; }
.bunkerpar2-toast.visible { opacity: 1; }
.bunkerpar2-toast .toast-title { display: block; font-weight: 700; }
.bunkerpar2-toast .toast-sub { display: block; font-size: var(--font-size-sm); margin-top: 2px; color: var(--color-gray-600); }

.bunkerpar2-holes-track h4 { font-size: 0.9rem; color: var(--color-gray-600); margin-bottom: 0.5rem; }
.bunkerpar2-holes-scroll { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.bunkerpar2-empty { color: var(--color-gray-500); font-size: 0.85rem; }

.bunkerpar2-hole-result {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    background: var(--color-gray-100);
    font-size: 0.7rem;
    min-width: 48px;
}

.bunkerpar2-hole-result.zone-holed { background: #DCFCE7; }
.bunkerpar2-hole-result.zone-par { background: #DBEAFE; }
.bunkerpar2-hole-result.zone-bogey { background: #FEF9C3; }
.bunkerpar2-hole-result.zone-double { background: #FEE2E2; }
.bunkerpar2-hole-result strong { font-size: 0.85rem; }

.bunkerpar2-report-body .bunkerpar2-hero-card {
    text-align: center;
    padding: 2rem;
    border-radius: 16px;
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    margin-bottom: 1.5rem;
}

.bunkerpar2-hero-score { font-size: 3rem; font-weight: 800; color: #7c2d12; }
.bunkerpar2-hero-score small { font-size: 1.25rem; color: var(--color-gray-500); }
.bunkerpar2-hero-sub { margin-top: 0.5rem; color: var(--color-gray-600); }

.bunkerpar2-benchmarks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
}

.bunkerpar2-report-charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.bunkerpar2-report-chart-card {
    background: #f9fafb;
    border-radius: 12px;
    padding: 1rem;
}

.bunkerpar2-detail-row {
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.35rem;
    border-radius: 8px;
    background: var(--color-gray-50);
    font-size: 0.9rem;
}

.bunkerpar2-detail-row.outcome-holed { border-left: 4px solid #16a34a; }
.bunkerpar2-detail-row.outcome-up_down { border-left: 4px solid #2563eb; }
.bunkerpar2-detail-row.outcome-bogey { border-left: 4px solid #ca8a04; }
.bunkerpar2-detail-row.outcome-double_plus { border-left: 4px solid #dc2626; }

.bunkerpar2-table-scroll { overflow-x: auto; }
.bunkerpar2-report-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.bunkerpar2-report-table th,
.bunkerpar2-report-table td { padding: 0.5rem; border-bottom: 1px solid var(--color-gray-200); text-align: center; }
.bunkerpar2-report-table th { background: #fff7ed; }

@media (max-width: 640px) {
    .bunkerpar2-status-bar { grid-template-columns: repeat(2, 1fr); }
    .bunkerpar2-touch-btn { min-height: 56px; }
}

/* ===== Chipping — Mission Impossible (Cameron McCormick) ===== */
.mi-body { background: var(--color-gray-50); }
.mi-test.test-container { max-width: 720px; }
.mi-author { font-size: 0.85rem; color: var(--color-gray-500); margin-top: 0.25rem; }
.mi-info-box h3 { margin-bottom: 0.5rem; }
.mi-info-box .mi-info-subtitle { margin-top: 1.25rem; }
.mi-info-box p { margin: 0.5rem 0 0.75rem; line-height: 1.5; }
.mi-info-box ul { margin: 0 0 0.5rem; padding-left: 1.25rem; line-height: 1.55; }
.mi-info-box li + li { margin-top: 0.35rem; }
.mi-status-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.mi-status-bar .status-item {
    background: white;
    border-radius: 12px;
    padding: 0.75rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
}
.mi-status-bar .status-label {
    display: block;
    font-size: 0.7rem;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.mi-status-bar #current-lie-label { font-size: 0.78rem; line-height: 1.2; }
.mi-status-bar #live-total-feet,
.mi-status-bar #live-average-feet { font-size: 0.78rem; line-height: 1.2; }
.mi-shots-track {
    display: flex;
    justify-content: center;
    gap: 0.35rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}
.mi-shot-chip {
    min-width: 2.6rem;
    padding: 0.45rem 0.35rem;
    border-radius: 10px;
    background: var(--color-gray-100);
    text-align: center;
    font-size: 1.1rem;
    border: 2px solid transparent;
    transition: all 0.25s ease;
}
.mi-shot-chip small {
    display: block;
    font-size: 0.55rem;
    font-weight: 600;
    color: var(--color-gray-500);
}
.mi-shot-chip.current { border-color: #2563EB; background: #EFF6FF; transform: scale(1.08); }
.mi-shot-chip.holed { background: #DCFCE7; border-color: #16A34A; }
.mi-shot-chip.missed { background: #FEE2E2; border-color: #DC2626; }
.mi-shot-chip.distance { background: #DBEAFE; border-color: #2563EB; }
.mi-touch-panel {
    background: white;
    border-radius: 16px;
    padding: 1rem;
    box-shadow: var(--shadow-md);
    margin-bottom: 1rem;
}
.mi-touch-hint {
    text-align: center;
    font-weight: 600;
    color: var(--color-gray-700);
    margin-bottom: 0.75rem;
}
.mi-touch-buttons { display: flex; flex-direction: column; gap: 0.65rem; }
.mi-touch-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 64px;
    padding: 0.85rem 1rem;
    border: 2px solid var(--color-gray-200);
    border-radius: 14px;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
}
.mi-touch-btn:active, .mi-touch-btn.zone-pressed { transform: scale(0.98); }
.mi-touch-btn.zone-holed { border-color: #16A34A; background: #F0FDF4; }
.mi-touch-btn.zone-distance { border-color: #2563EB; background: #EFF6FF; }
.mi-touch-btn.zone-missed { border-color: #DC2626; background: #FEF2F2; }
.mi-touch-btn .touch-icon { font-size: 1.6rem; }
.mi-touch-btn .touch-label { display: block; font-weight: 700; text-align: left; }
.mi-touch-btn .touch-sub { display: block; font-size: 0.8rem; color: var(--color-gray-500); text-align: left; }
.mi-distance-panel { margin-top: 0.5rem; }
.mi-distance-title { text-align: center; font-weight: 600; margin-bottom: 0.75rem; color: var(--color-gray-700); }
.mi-distance-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.45rem;
    margin-bottom: 0.75rem;
}
.mi-distance-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    min-height: 44px;
    padding: 0.35rem 0.25rem;
    border-radius: 10px;
    border: 2px solid #BFDBFE;
    background: #EFF6FF;
    font-weight: 700;
    color: #1D4ED8;
    cursor: pointer;
    line-height: 1.1;
}
.mi-distance-btn .mi-distance-m {
    font-size: 0.62rem;
    font-weight: 600;
    color: #3B82F6;
}
.mi-distance-btn:active { transform: scale(0.96); background: #DBEAFE; }
.mi-distance-back { width: 100%; }
.mi-toast {
    margin-top: 0.75rem;
    padding: 0.75rem;
    border-radius: 10px;
    background: var(--color-gray-100);
    text-align: center;
    opacity: 0;
    transform: translateY(6px);
    transition: all 0.25s ease;
}
.mi-toast.visible { opacity: 1; transform: translateY(0); }
.mi-toast .toast-title { display: block; font-weight: 700; }
.mi-toast .toast-sub { display: block; font-size: 0.85rem; color: var(--color-gray-600); }
.mi-balls-scroll {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}
.mi-shot-detail, .mi-empty-shots {
    flex-shrink: 0;
    padding: 0.45rem 0.55rem;
    border-radius: 10px;
    background: var(--color-gray-100);
    font-size: 0.85rem;
    text-align: center;
}
.mi-shot-detail small { display: block; font-size: 0.65rem; color: var(--color-gray-600); }
.mi-shot-detail.shot-holed { background: #DCFCE7; }
.mi-shot-detail.shot-missed { background: #FEE2E2; }
.mi-shot-detail.shot-distance { background: #DBEAFE; }
.mi-touch-panel.is-complete { opacity: 0.85; }
body.mi-saving .mi-touch-panel { pointer-events: none; opacity: 0.7; }
.mi-report-body { background: var(--color-gray-50); }
.mi-hero-card {
    text-align: center;
    padding: 1.5rem;
    border-radius: 16px;
    background: white;
    box-shadow: var(--shadow-md);
    margin-bottom: 1.5rem;
}
.mi-hero-card.elite { border-left: 4px solid #16A34A; }
.mi-hero-card.good { border-left: 4px solid #2563EB; }
.mi-hero-card.average { border-left: 4px solid #F59E0B; }
.mi-hero-card.needs-work { border-left: 4px solid #DC2626; }
.mi-hero-score { font-size: 2.5rem; font-weight: 800; color: var(--color-primary); }
.mi-hero-label { font-size: 1.1rem; font-weight: 600; margin: 0.25rem 0; }
.mi-hero-meta { font-size: 0.85rem; color: var(--color-gray-600); }
.mi-stats-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; }
.mi-benchmarks-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.75rem; }
.mi-report-charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.mi-report-chart-card, .mi-report-chart-card .chart-wrapper-sm { min-height: 260px; }
.mi-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.5rem; }
.mi-detail-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 0.5rem;
    padding: 0.65rem;
    border-radius: 10px;
    background: white;
    border: 1px solid var(--color-gray-200);
    font-size: 0.85rem;
}
.mi-detail-item.holed { border-color: #86EFAC; background: #F0FDF4; }
.mi-detail-item.missed { border-color: #FCA5A5; background: #FEF2F2; }
.mi-detail-item.distance { border-color: #93C5FD; background: #EFF6FF; }
.mi-detail-item .detail-running { grid-column: 1 / -1; font-weight: 700; color: var(--color-primary); }
.mi-table-scroll { overflow-x: auto; }
.mi-report-table { width: 100%; border-collapse: collapse; background: white; border-radius: 12px; overflow: hidden; }
.mi-report-table th, .mi-report-table td { padding: 0.65rem; border-bottom: 1px solid var(--color-gray-200); text-align: left; font-size: 0.9rem; }
@media (max-width: 640px) {
    .mi-status-bar { grid-template-columns: repeat(2, 1fr); }
    .mi-distance-grid { grid-template-columns: repeat(4, 1fr); }
    .mi-touch-btn { min-height: 56px; }
}

/* ===== La Règle du Recentrage ===== */
.recentrage-body {
    background: var(--color-gray-50);
    touch-action: manipulation;
    padding-bottom: calc(9.5rem + env(safe-area-inset-bottom, 0px));
}
.recentrage-test.test-container {
    max-width: 720px;
}
.recentrage-main {
    padding-bottom: 0.5rem;
}
.recentrage-header-compact h1 {
    font-size: 1.45rem;
}
.recentrage-author {
    font-size: 0.85rem;
    color: var(--color-gray-500);
    margin: 0.25rem 0 0.35rem;
}
.recentrage-tag {
    display: inline-block;
    margin-top: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: rgba(13, 148, 136, 0.12);
    color: #0F766E;
    font-size: 0.8rem;
    font-weight: 600;
}
.recentrage-rules-collapsible {
    margin-bottom: 1rem;
    border-radius: 14px;
    background: white;
    border: 1px solid var(--color-gray-200);
    overflow: hidden;
}
.recentrage-rules-collapsible summary {
    padding: 0.85rem 1rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.recentrage-rules-collapsible summary::-webkit-details-marker { display: none; }
.recentrage-rules-body {
    padding: 0 1rem 1rem;
    font-size: 0.92rem;
    color: var(--color-gray-700);
}
.recentrage-rules-body ul {
    margin: 0.5rem 0 0;
    padding-left: 1.2rem;
}
.recentrage-date-compact {
    margin-bottom: 1rem;
}
.recentrage-date-compact .form-input {
    min-height: 48px;
    font-size: 1rem;
}
.recentrage-field-label {
    display: block;
    font-weight: 700;
    color: var(--color-gray-900);
    font-size: 1rem;
}
.recentrage-metric-hint {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--color-gray-500);
}
.recentrage-entry-section {
    display: grid;
    gap: 1rem;
}
.recentrage-metric-card {
    padding: 1rem;
    border-radius: 18px;
    background: white;
    border: 1px solid var(--color-gray-200);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}
.recentrage-metric-score {
    border-top: 4px solid #0D9488;
}
.recentrage-metric-recentrers {
    border-top: 4px solid #D97706;
}
.recentrage-metric-head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}
.recentrage-metric-icon {
    font-size: 1.6rem;
    line-height: 1;
    flex-shrink: 0;
}
.recentrage-stepper {
    display: grid;
    grid-template-columns: 64px 1fr 64px;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
}
.recentrage-step-display {
    text-align: center;
    padding: 0.35rem 0.25rem;
    border-radius: 14px;
    background: var(--color-gray-50);
}
.recentrage-metric-value {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    transition: transform 0.2s ease, color 0.2s ease;
}
.recentrage-metric-value.value-pulse {
    animation: recentrageValuePulse 0.32s ease;
}
@keyframes recentrageValuePulse {
    0% { transform: scale(1); }
    45% { transform: scale(1.12); }
    100% { transform: scale(1); }
}
.recentrage-metric-value.score-great { color: #15803D; }
.recentrage-metric-value.score-good { color: #0D9488; }
.recentrage-metric-value.score-neutral { color: var(--color-gray-800); }
.recentrage-metric-value.score-warn { color: #D97706; }
.recentrage-metric-value.score-bad { color: #DC2626; }
.recentrage-metric-caption {
    text-align: center;
    color: var(--color-gray-600);
    font-size: 0.88rem;
    margin: 0.35rem 0 0;
}
.recentrage-step-btn {
    position: relative;
    overflow: hidden;
    min-height: 64px;
    min-width: 64px;
    border: none;
    border-radius: 16px;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s ease, background 0.12s ease;
}
.recentrage-step-minus {
    background: #FEE2E2;
    color: #B91C1C;
}
.recentrage-step-plus {
    background: #D1FAE5;
    color: #047857;
}
.recentrage-step-btn.is-pressed {
    transform: scale(0.94);
}
.recentrage-metric-recentrers .recentrage-step-minus {
    background: #FFEDD5;
    color: #C2410C;
}
.recentrage-metric-recentrers .recentrage-step-plus {
    background: #FEF3C7;
    color: #B45309;
}
.recentrage-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    pointer-events: none;
    animation: recentrageRipple 0.45s ease-out forwards;
}
@keyframes recentrageRipple {
    from { transform: scale(0); opacity: 0.65; }
    to { transform: scale(1); opacity: 0; }
}
.recentrage-reset-chip {
    display: block;
    width: 100%;
    margin: 0 auto 0.85rem;
    min-height: 40px;
    border: 1px dashed var(--color-gray-300);
    border-radius: 999px;
    background: transparent;
    color: var(--color-gray-600);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}
.recentrage-pick-groups {
    display: grid;
    gap: 0.75rem;
}
.recentrage-pick-group {
    display: grid;
    gap: 0.4rem;
}
.recentrage-pick-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.recentrage-pick-label.under { color: #15803D; }
.recentrage-pick-label.even { color: #0F766E; }
.recentrage-pick-label.over { color: #C2410C; }
.recentrage-quick-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}
.recentrage-quick-btn {
    position: relative;
    overflow: hidden;
    flex: 0 0 3.25rem;
    width: 3.25rem;
    min-width: 3.25rem;
    max-width: 3.25rem;
    min-height: 48px;
    padding: 0;
    border: 1px solid var(--color-gray-200);
    border-radius: 12px;
    background: white;
    font-weight: 800;
    font-size: 1rem;
    color: var(--color-gray-800);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.recentrage-quick-btn.pick-under {
    background: #F0FDF4;
    border-color: #BBF7D0;
    color: #166534;
}
.recentrage-quick-btn.pick-even {
    background: #F0FDFA;
    border-color: #99F6E4;
    color: #0F766E;
}
.recentrage-quick-btn.pick-over {
    background: #FFF7ED;
    border-color: #FED7AA;
    color: #C2410C;
}
.recentrage-quick-btn.pick-recentrers {
    background: #FFFBEB;
    border-color: #FDE68A;
    color: #92400E;
}
.recentrage-quick-btn.is-active {
    border-color: #0D9488;
    box-shadow: inset 0 0 0 2px rgba(13, 148, 136, 0.35);
    transform: scale(0.97);
}
.recentrage-quick-btn.is-pressed {
    transform: scale(0.95);
}
.recentrage-body .back-button {
    display: flex;
    justify-content: center;
}

.recentrage-body .back-button .btn {
    width: 100%;
    max-width: none;
    min-width: 0;
}

.recentrage-sticky-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0.75rem 1rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid var(--color-gray-200);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(8px);
}
.recentrage-summary-bar {
    margin-bottom: 0.65rem;
    text-align: center;
}
.recentrage-summary-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gray-500);
}
.recentrage-summary-bar strong {
    display: block;
    margin-top: 0.15rem;
    font-size: 1.05rem;
    color: #0F766E;
}
.recentrage-save-btn {
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 52px;
    font-size: 1.05rem;
    font-weight: 700;
    box-sizing: border-box;
}
.recentrage-saving .recentrage-save-btn {
    opacity: 0.7;
}
.recentrage-report-body .recentrage-chart-wrapper {
    min-height: 320px;
    position: relative;
}
.recentrage-hero-card {
    padding: 1.25rem;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(13, 148, 136, 0.12), rgba(20, 184, 166, 0.06));
    border: 1px solid rgba(13, 148, 136, 0.2);
}
.recentrage-hero-card.empty {
    background: var(--color-gray-100);
    border-color: var(--color-gray-200);
}
.recentrage-hero-label {
    font-size: 0.85rem;
    color: var(--color-gray-600);
    margin-bottom: 0.75rem;
}
.recentrage-hero-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.recentrage-hero-metric .metric-label {
    display: block;
    font-size: 0.8rem;
    color: var(--color-gray-600);
}
.recentrage-hero-metric .metric-value {
    font-size: 2rem;
    color: #0F766E;
}
.recentrage-hero-date {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: var(--color-gray-600);
}
.recentrage-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}
.recentrage-stat-card {
    padding: 0.85rem;
    border-radius: 12px;
    background: white;
    border: 1px solid var(--color-gray-200);
    text-align: center;
}
.recentrage-stat-card span {
    display: block;
    font-size: 0.8rem;
    color: var(--color-gray-600);
}
.recentrage-stat-card strong {
    display: block;
    margin-top: 0.25rem;
    font-size: 1.35rem;
    color: #0F766E;
}
.recentrage-recommendations {
    padding: 1rem;
    border-radius: 12px;
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
}
.recentrage-report-table th,
.recentrage-report-table td {
    text-align: left;
}
@media (max-width: 640px) {
    .recentrage-stepper {
        grid-template-columns: 56px 1fr 56px;
    }
    .recentrage-step-btn {
        min-height: 56px;
        min-width: 56px;
        font-size: 1.75rem;
    }
    .recentrage-metric-value { font-size: 2.6rem; }
}

/* =====================================
   PAGE D'ACCUEIL (LANDING V2)
   ===================================== */

.landing-page {
    background: linear-gradient(135deg, #F8FAFC 0%, #E2E8F0 100%);
}

.landing-main {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.landing-language-switch {
    position: fixed;
    z-index: 1000;
    top: 18px;
    right: 20px;
    display: none;
    gap: 4px;
    padding: 4px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
    backdrop-filter: blur(14px);
}

.show-language-switch .landing-language-switch {
    display: inline-flex;
}

.landing-language-switch a {
    display: inline-flex;
    min-width: 54px;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    color: var(--color-gray-600);
    font-size: 0.72rem;
    text-decoration: none;
    transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.landing-language-switch a:hover {
    color: var(--color-primary);
    background: rgba(219, 234, 254, 0.6);
}

.landing-language-switch a.is-active {
    color: var(--color-white);
    background: var(--color-primary);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.25);
}

.landing-language-switch .landing-flag {
    position: relative;
    display: inline-block;
    width: 21px;
    height: 14px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.18);
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

.landing-flag-fr {
    background: linear-gradient(90deg, #002395 0 33.33%, #FFFFFF 33.33% 66.66%, #ED2939 66.66%);
}

.landing-flag-us {
    background: repeating-linear-gradient(
        180deg,
        #B22234 0 1.08px,
        #FFFFFF 1.08px 2.16px
    );
}

.landing-flag-us::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 8px;
    background: #3C3B6E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cdefs%3E%3Cpattern id='s' width='2' height='1.6' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='.5' cy='.4' r='.18' fill='white'/%3E%3Ccircle cx='1.5' cy='1.2' r='.18' fill='white'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='10' height='8' fill='%233C3B6E'/%3E%3Crect width='10' height='8' fill='url(%23s)'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.landing-language-switch a strong {
    font-size: inherit;
    letter-spacing: 0.03em;
}

.landing-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--spacing-6);
}

.landing-hero {
    padding: clamp(3rem, 7vw, 6.5rem) 0 var(--spacing-16);
    overflow: hidden;
}

.landing-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(360px, 0.96fr);
    align-items: center;
    gap: clamp(3rem, 7vw, 6.5rem);
}

.landing-hero-copy {
    text-align: left;
}

.landing-brand {
    display: inline-block;
    font-size: clamp(1.35rem, 2.8vw, 1.8rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: var(--spacing-4);
}

.landing-logo-dark {
    display: block;
    width: min(100%, 390px);
    height: auto;
    margin-bottom: var(--spacing-5);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
}

.landing-kicker {
    display: table;
    padding: 0.45rem 0.8rem;
    margin: 0 0 var(--spacing-5);
    border: 1px solid rgba(0, 122, 255, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 5px 18px rgba(15, 23, 42, 0.06);
}

.landing-title {
    font-size: clamp(2.35rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1.06;
    color: var(--color-gray-900);
    letter-spacing: -0.045em;
    margin: 0 0 var(--spacing-5);
    max-width: 13ch;
}

.landing-lead {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    color: var(--color-gray-600);
    line-height: 1.6;
    max-width: 35rem;
    margin: 0 0 var(--spacing-8);
}

.landing-cta {
    display: flex;
    gap: var(--spacing-4);
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
}

.landing-cta .btn {
    min-height: 48px;
    padding-left: var(--spacing-6);
    padding-right: var(--spacing-6);
}

.landing-btn-secondary {
    color: var(--color-gray-800);
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid var(--color-gray-300);
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.06);
}

.landing-btn-secondary:hover {
    color: var(--color-primary);
    background: var(--color-white);
    border-color: rgba(0, 122, 255, 0.45);
}

.landing-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3) var(--spacing-5);
    padding: 0;
    margin: var(--spacing-6) 0 0;
    list-style: none;
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.landing-benefits li::before {
    content: "✓";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    margin-right: 0.4rem;
    border-radius: 50%;
    color: #047857;
    background: #D1FAE5;
    font-size: 0.7rem;
    font-weight: 800;
}

/* Aperçu produit dans un téléphone */
.landing-product-visual {
    position: relative;
    display: flex;
    justify-content: center;
    min-height: 650px;
    isolation: isolate;
}

.landing-phone-glow {
    position: absolute;
    z-index: -1;
    top: 12%;
    left: 50%;
    width: 440px;
    height: 440px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 122, 255, 0.24), rgba(0, 122, 255, 0) 68%);
    transform: translateX(-50%);
    filter: blur(8px);
}

.landing-phone {
    position: relative;
    width: 326px;
    height: 654px;
    padding: 10px;
    border: 2px solid #334155;
    border-radius: 49px;
    background: linear-gradient(145deg, #263445, #090F19 70%);
    box-shadow:
        0 40px 80px rgba(15, 23, 42, 0.22),
        0 12px 28px rgba(15, 23, 42, 0.18),
        inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    transform: rotate(1.5deg);
}

.landing-phone::after {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 43px;
    pointer-events: none;
}

.landing-phone-buttons::before,
.landing-phone-buttons::after {
    content: "";
    position: absolute;
    left: -5px;
    width: 4px;
    border-radius: 4px 0 0 4px;
    background: #1E293B;
}

.landing-phone-buttons::before {
    top: 116px;
    height: 67px;
}

.landing-phone-buttons::after {
    top: 198px;
    height: 46px;
}

.landing-phone-screen {
    position: relative;
    height: 100%;
    overflow: hidden;
    border-radius: 38px;
    color: #172033;
    background: linear-gradient(155deg, #F8FAFC, #E8EEF7);
    font-family: var(--font-family-primary);
}

.landing-phone-screen--video {
    background: #05070A;
}

.landing-phone-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    background: #05070A;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

@media (prefers-reduced-motion: reduce) {
    .landing-phone-screen--video {
        background: #05070A url('/images/landing/capture-test.png') top center / cover no-repeat;
    }
}

.landing-phone-status {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 35px;
    padding: 0 20px;
    color: #0F172A;
    font-size: 0.58rem;
    font-weight: 700;
}

.landing-phone-island {
    position: absolute;
    top: 7px;
    left: 50%;
    width: 90px;
    height: 22px;
    border-radius: 999px;
    background: #05070A;
    transform: translateX(-50%);
}

.landing-app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 16px 12px;
    background: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid #E2E8F0;
}

.landing-app-header > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.landing-app-header strong {
    font-size: 0.9rem;
    letter-spacing: -0.02em;
}

.landing-app-overline {
    color: var(--color-primary);
    font-size: 0.47rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.landing-app-avatar {
    display: grid;
    width: 29px;
    height: 29px;
    place-items: center;
    border-radius: 50%;
    color: white;
    background: linear-gradient(135deg, #007AFF, #60A5FA);
    font-size: 0.6rem;
    font-weight: 800;
}

.landing-app-welcome {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 16px 16px 12px;
}

.landing-app-welcome span {
    color: #64748B;
    font-size: 0.58rem;
}

.landing-app-welcome strong {
    font-size: 0.8rem;
}

.landing-app-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0 16px 10px;
}

.landing-app-stats article,
.landing-app-week,
.landing-app-test {
    border: 1px solid rgba(203, 213, 225, 0.75);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 4px 13px rgba(15, 23, 42, 0.05);
}

.landing-app-stats article {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1px 7px;
    padding: 10px;
    border-radius: 12px;
}

.landing-app-stat-icon {
    grid-row: 1 / span 2;
    font-size: 1rem;
}

.landing-app-stats strong {
    font-size: 0.68rem;
}

.landing-app-stats small {
    color: #64748B;
    font-size: 0.46rem;
}

.landing-app-week {
    margin: 0 16px 12px;
    padding: 12px;
    border-radius: 14px;
}

.landing-app-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.landing-app-card-head div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.landing-app-card-head small {
    color: #64748B;
    font-size: 0.48rem;
}

.landing-app-card-head strong {
    font-size: 0.7rem;
}

.landing-app-card-head > span {
    padding: 3px 6px;
    border-radius: 999px;
    color: #047857;
    background: #D1FAE5;
    font-size: 0.48rem;
    font-weight: 800;
}

.landing-app-chart {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-items: end;
    gap: 7px;
    height: 67px;
    padding: 10px 3px 3px;
}

.landing-app-chart span {
    height: var(--bar);
    min-height: 8px;
    border-radius: 4px 4px 2px 2px;
    background: linear-gradient(180deg, #60A5FA, #007AFF);
}

.landing-app-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 7px;
    color: #94A3B8;
    font-size: 0.4rem;
    text-align: center;
}

.landing-app-section-title {
    display: flex;
    justify-content: space-between;
    padding: 0 17px 7px;
    font-size: 0.64rem;
}

.landing-app-section-title span {
    color: var(--color-primary);
    font-size: 0.5rem;
    font-weight: 600;
}

.landing-app-test {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 9px;
    margin: 0 16px 8px;
    padding: 10px;
    border-radius: 12px;
}

.landing-app-test-icon {
    display: grid;
    width: 29px;
    height: 29px;
    place-items: center;
    border-radius: 9px;
    background: #FEF3C7;
    font-size: 0.86rem;
}

.landing-app-test-icon-blue {
    background: #DBEAFE;
}

.landing-app-test div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.landing-app-test strong {
    overflow: hidden;
    font-size: 0.58rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.landing-app-test small {
    color: #64748B;
    font-size: 0.44rem;
}

.landing-app-test-arrow {
    color: #94A3B8;
    font-size: 1.1rem;
}

.landing-app-nav {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 9px 8px 13px;
    border-top: 1px solid #E2E8F0;
    background: rgba(255, 255, 255, 0.96);
}

.landing-app-nav span {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 2px;
    color: #94A3B8;
    font-size: 0.9rem;
}

.landing-app-nav small {
    font-size: 0.4rem;
}

.landing-app-nav .is-active {
    color: var(--color-primary);
}

.landing-product-badge {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 192px;
    padding: 10px 12px;
    border: 1px solid rgba(203, 213, 225, 0.75);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.13);
    backdrop-filter: blur(10px);
}

.landing-product-badge > span {
    font-size: 1.4rem;
}

.landing-product-badge div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.landing-product-badge strong {
    color: #0F172A;
    font-size: 0.68rem;
}

.landing-product-badge small {
    color: #64748B;
    font-size: 0.54rem;
}

.landing-product-badge-report {
    top: 24%;
    right: -2%;
}

.landing-product-badge-coach {
    bottom: 14%;
    left: -6%;
}

.landing-cta-logged {
    flex-direction: column;
}

.landing-welcome {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-gray-800);
    margin-bottom: var(--spacing-2);
}

.landing-section {
    padding: var(--spacing-12) 0;
}

.landing-section-title {
    text-align: center;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-8);
}

.landing-pillars {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-6);
}

.landing-pillar-card,
.landing-audience-card {
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-8);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--color-gray-200);
    text-align: center;
}

.landing-pillar-card h3,
.landing-audience-card h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-3);
}

.landing-pillar-card p,
.landing-audience-card p {
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

.landing-pillar-icon,
.landing-audience-icon {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-4);
}

/* Dans l'app — aperçus mobile (layout Health) */
.landing-shots {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 48%, #f8fafc 100%);
    overflow: hidden;
}

.landing-shots-lead {
    width: min(100%, 42rem);
    margin: 0 auto var(--spacing-10);
    padding: 0 var(--spacing-4);
    text-align: center;
    color: var(--color-gray-600);
    font-size: var(--font-size-base);
    line-height: 1.65;
}

.landing-shots .landing-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.landing-shots .landing-section-title,
.landing-shots-row {
    width: 100%;
}

.landing-shots-row {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(1rem, 2.8vw, 2rem);
}

.landing-shot {
    margin: 0;
    flex: 0 1 min(240px, 30vw);
    min-width: 0;
    text-align: center;
}

.landing-shot-featured {
    flex-basis: min(270px, 34vw);
    transform: translateY(-14px);
}

.landing-shot figcaption {
    margin-top: var(--spacing-4);
    color: var(--color-gray-700);
    font-size: var(--font-size-sm);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.landing-shot-phone {
    position: relative;
}

.landing-shot-bezel {
    position: relative;
    padding: 9px;
    border: 2px solid #334155;
    border-radius: 34px;
    background: linear-gradient(145deg, #263445, #090f19 70%);
    box-shadow:
        0 28px 56px rgba(15, 23, 42, 0.18),
        0 8px 20px rgba(15, 23, 42, 0.12),
        inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.landing-shot-island {
    position: absolute;
    z-index: 3;
    top: 16px;
    left: 50%;
    width: 28%;
    min-width: 62px;
    max-width: 84px;
    height: 18px;
    border-radius: 999px;
    background: #05070a;
    transform: translateX(-50%);
    pointer-events: none;
}

.landing-shot-screen {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    aspect-ratio: 390 / 844;
    background: #f2f2f7;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.landing-shot-preview {
    --lp-blue: #0a84ff;
    --lp-blue-soft: #e8f3ff;
    --lp-green: #30d158;
    --lp-green-soft: #eafbef;
    --lp-red: #ff453a;
    --lp-red-soft: #fff0ef;
    --lp-orange: #ff9f0a;
    --lp-purple: #bf5af2;
    --lp-ink: #111827;
    --lp-muted: #6b7280;
    --lp-line: #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 30px 10px 12px;
    color: var(--lp-ink);
    text-align: left;
}

.landing-shot-preview .lp-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
}

.landing-shot-preview .lp-back {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--lp-blue);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    white-space: nowrap;
}

.landing-shot-preview .lp-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 2px;
}

.landing-shot-preview .lp-eyebrow {
    margin: 0;
    color: var(--lp-muted);
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.landing-shot-preview .lp-header strong,
.landing-shot-preview .lp-title {
    color: var(--lp-ink);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.landing-shot-preview .lp-card {
    padding: 10px;
    border: 1px solid rgba(229, 231, 235, 0.92);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 4px 14px rgba(17, 24, 39, 0.05);
}

.landing-shot-preview .lp-card-head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.landing-shot-preview .lp-icon {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(17, 24, 39, 0.08);
    font-size: 0.95rem;
}

.landing-shot-preview .lp-icon.tone-orange { background: #fff7ed; }
.landing-shot-preview .lp-icon.tone-blue { background: var(--lp-blue-soft); }
.landing-shot-preview .lp-icon.tone-green { background: var(--lp-green-soft); }

.landing-shot-preview .lp-card-head > div {
    flex: 1 1 auto;
    min-width: 0;
}

.landing-shot-preview .lp-card-head small {
    display: block;
    color: var(--lp-muted);
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.landing-shot-preview .lp-card-head strong {
    display: block;
    margin-top: 2px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.landing-shot-preview .lp-status {
    display: grid;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 999px;
    background: var(--lp-green-soft);
    color: var(--lp-green);
    font-size: 0.68rem;
    font-weight: 800;
}

.landing-shot-preview .lp-meta {
    margin-top: 8px;
    color: var(--lp-muted);
    font-size: 0.58rem;
    font-weight: 600;
}

.landing-shot-preview .lp-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    margin-top: 10px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0a84ff, #0066d6);
    box-shadow: 0 6px 14px rgba(10, 132, 255, 0.24);
    color: #fff;
    font-size: 0.64rem;
    font-weight: 750;
}

.landing-shot-preview .lp-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.landing-shot-preview .lp-metric {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(229, 231, 235, 0.92);
}

.landing-shot-preview .lp-metric-icon {
    display: grid;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 8px;
    color: #fff;
    font-size: 0.62rem;
}

.landing-shot-preview .lp-metric-icon.blue { background: var(--lp-blue); }
.landing-shot-preview .lp-metric-icon.orange { background: var(--lp-orange); }
.landing-shot-preview .lp-metric-icon.green { background: var(--lp-green); }

.landing-shot-preview .lp-metric small {
    display: block;
    color: var(--lp-muted);
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.landing-shot-preview .lp-metric strong {
    display: block;
    margin-top: 1px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.landing-shot-preview .lp-touch-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 2px;
}

.landing-shot-preview .lp-touch {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 8px 10px;
    border: 0;
    border-radius: 14px;
    text-align: left;
}

.landing-shot-preview .lp-touch.miss {
    background: var(--lp-red-soft);
    color: #991b1b;
}

.landing-shot-preview .lp-touch.made {
    background: var(--lp-green-soft);
    color: #166534;
}

.landing-shot-preview .lp-touch-visual {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    font-size: 0.82rem;
}

.landing-shot-preview .lp-touch-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.2;
}

.landing-shot-preview .lp-touch-sub {
    display: block;
    margin-top: 1px;
    font-size: 0.52rem;
    font-weight: 600;
    opacity: 0.82;
}

.landing-shot-preview .lp-zones {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 2px;
}

.landing-shot-preview .lp-zone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 0.62rem;
    font-weight: 700;
}

.landing-shot-preview .lp-zone.fairway {
    background: #dcfce7;
    color: #166534;
}

.landing-shot-preview .lp-zone.rough {
    background: #fef3c7;
    color: #92400e;
}

.landing-shot-preview .lp-zone.miss {
    background: #fee2e2;
    color: #991b1b;
}

.landing-shot-preview .lp-zone span:last-child {
    font-weight: 800;
}

.landing-shot-preview .lp-video {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    background: #111827;
    box-shadow: 0 8px 20px rgba(17, 24, 39, 0.14);
    aspect-ratio: 16 / 9;
}

.landing-shot-preview .lp-video img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.landing-shot-preview .lp-video-play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.08), rgba(17, 24, 39, 0.28));
}

.landing-shot-preview .lp-video-play::after {
    content: "";
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.28);
    clip-path: polygon(38% 28%, 38% 72%, 72% 50%);
    transform: translateX(2px);
}

.landing-shot-preview .lp-setup-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(229, 231, 235, 0.92);
}

.landing-shot-preview .lp-setup-note span {
    display: grid;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 999px;
    background: var(--lp-blue-soft);
    color: var(--lp-blue);
    font-size: 0.58rem;
    font-weight: 800;
}

.landing-shot-preview .lp-setup-note strong {
    display: block;
    font-size: 0.62rem;
    font-weight: 800;
}

.landing-shot-preview .lp-setup-note p {
    margin: 2px 0 0;
    color: var(--lp-muted);
    font-size: 0.54rem;
    line-height: 1.35;
}

.landing-shot-preview .lp-hint {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.landing-shot-preview .lp-ball-slots {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 3px;
}

.landing-shot-preview .lp-ball-slots span {
    display: grid;
    min-height: 22px;
    place-items: center;
    border: 1px solid var(--lp-line);
    border-radius: 6px;
    background: var(--health-canvas, #f2f2f7);
    color: var(--lp-muted);
    font-size: 0.48rem;
    font-weight: 800;
}

.landing-shot-preview .lp-ball-slots span.is-current {
    border-color: var(--lp-blue);
    background: var(--lp-blue-soft);
    color: var(--lp-blue);
    box-shadow: 0 0 8px rgba(10, 132, 255, 0.18);
}

.landing-shot-preview .lp-speed-stack {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.landing-shot-preview .lp-speed-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 6px 8px;
    border-radius: 12px;
    color: #fff;
}

.landing-shot-preview .lp-speed-btn.made {
    background: linear-gradient(135deg, #059669, #16a34a);
}

.landing-shot-preview .lp-speed-btn.short {
    background: linear-gradient(135deg, #dc2626, #ff453a);
}

.landing-shot-preview .lp-speed-btn.stick {
    background: linear-gradient(135deg, #9333ea, #7c3aed);
}

.landing-shot-preview .lp-speed-icon {
    display: grid;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.16);
    font-size: 0.62rem;
    font-weight: 900;
}

.landing-shot-preview .lp-speed-label {
    display: block;
    font-size: 0.58rem;
    font-weight: 800;
    line-height: 1.15;
}

.landing-shot-preview .lp-speed-sub {
    display: block;
    margin-top: 1px;
    font-size: 0.48rem;
    font-weight: 600;
    opacity: 0.86;
    line-height: 1.2;
}

.landing-shot-preview .lp-report-hero {
    padding: 12px 10px;
    border-radius: 16px;
    text-align: center;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
}

.landing-shot-preview .lp-report-hero small {
    display: block;
    color: var(--lp-muted);
    font-size: 0.52rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.landing-shot-preview .lp-report-hero strong {
    display: block;
    margin-top: 4px;
    font-size: 1.55rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
}

.landing-shot-preview .lp-report-hero strong em {
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 700;
    color: var(--lp-muted);
}

.landing-shot-preview .lp-report-hero span {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: #1d4ed8;
    font-size: 0.52rem;
    font-weight: 800;
}

.landing-shot-preview .lp-stat-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
}

.landing-shot-preview .lp-stat {
    padding: 7px 6px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(229, 231, 235, 0.92);
    text-align: center;
}

.landing-shot-preview .lp-stat small {
    display: block;
    color: var(--lp-muted);
    font-size: 0.46rem;
    font-weight: 700;
    text-transform: uppercase;
}

.landing-shot-preview .lp-stat strong {
    display: block;
    margin-top: 2px;
    font-size: 0.72rem;
    font-weight: 900;
}

.landing-shot-preview .lp-chart-card {
    padding: 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(229, 231, 235, 0.92);
}

.landing-shot-preview .lp-chart-card strong {
    display: block;
    margin-bottom: 6px;
    font-size: 0.56rem;
    font-weight: 800;
}

.landing-shot-preview .lp-line-chart {
    display: block;
    width: 100%;
    height: auto;
}

.landing-shot-preview .lp-bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 52px;
    padding-top: 4px;
}

.landing-shot-preview .lp-bar-chart div {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    height: 100%;
    justify-content: flex-end;
}

.landing-shot-preview .lp-bar-chart i {
    display: block;
    width: 100%;
    border-radius: 6px 6px 2px 2px;
    background: linear-gradient(180deg, #0a84ff, #0066d6);
}

.landing-shot-preview .lp-bar-chart i.tone-green { background: linear-gradient(180deg, #22c55e, #16a34a); }
.landing-shot-preview .lp-bar-chart i.tone-red { background: linear-gradient(180deg, #ef4444, #dc2626); }
.landing-shot-preview .lp-bar-chart i.tone-purple { background: linear-gradient(180deg, #a855f7, #7c3aed); }

.landing-shot-preview .lp-bar-chart label {
    color: var(--lp-muted);
    font-size: 0.44rem;
    font-weight: 700;
    font-style: normal;
}

.landing-audience {
    padding-bottom: var(--spacing-16);
}

.landing-audience-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-6);
}

.landing-audience-card-coach {
    border-color: rgba(0, 122, 255, 0.25);
    background: linear-gradient(135deg, #FFFFFF 0%, #F0F7FF 100%);
}

.landing-steps {
    list-style: none;
    margin-top: var(--spacing-6);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    text-align: left;
}

.landing-steps li {
    position: relative;
    padding-left: 2rem;
    color: var(--color-gray-700);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.landing-steps li::before {
    content: counter(step);
    counter-increment: step;
    position: absolute;
    left: 0;
    top: 0;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.landing-audience-card ol {
    counter-reset: step;
}

.landing-footer {
    margin-top: auto;
}

.landing-footer-nav {
    display: flex;
    justify-content: center;
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-4);
}

.landing-footer-nav a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--font-size-sm);
}

.landing-footer-nav a:hover {
    text-decoration: underline;
}

@media (max-width: 900px) {
    .landing-hero-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-12);
    }

    .landing-hero-copy {
        max-width: 680px;
        margin: 0 auto;
        text-align: center;
    }

    .landing-kicker {
        margin-right: auto;
        margin-left: auto;
    }

    .landing-logo-dark {
        margin-right: auto;
        margin-left: auto;
    }

    .landing-title,
    .landing-lead {
        margin-right: auto;
        margin-left: auto;
    }

    .landing-cta,
    .landing-benefits {
        justify-content: center;
    }

    .landing-product-visual {
        min-height: 660px;
    }

    .landing-phone {
        transform: none;
    }

    .landing-pillars {
        grid-template-columns: 1fr;
    }

    .landing-audience-grid {
        grid-template-columns: 1fr;
    }

    .landing-shots-row {
        flex-direction: column;
        align-items: center;
    }

    .landing-shot,
    .landing-shot-featured {
        flex-basis: min(280px, 88vw);
        transform: none;
    }
}

@media (max-width: 640px) {
    .landing-language-switch {
        top: 10px;
        right: 10px;
    }

    .landing-language-switch a {
        min-width: 44px;
        min-height: 32px;
        gap: 4px;
        padding: 5px 8px;
    }

    .landing-hero {
        padding-top: var(--spacing-16);
    }

    .landing-title {
        font-size: clamp(2.2rem, 11vw, 3rem);
    }

    .landing-cta .btn {
        width: 100%;
        max-width: 320px;
        white-space: normal;
        line-height: 1.35;
    }

    .landing-benefits {
        gap: var(--spacing-3);
    }

    .landing-product-visual {
        min-height: 610px;
        transform: scale(0.9);
        transform-origin: top center;
        margin-bottom: -55px;
    }

    .landing-product-badge-report {
        right: -16px;
    }

    .landing-product-badge-coach {
        left: -16px;
    }
}

@media (max-width: 390px) {
    .landing-product-badge {
        display: none;
    }

    .landing-product-visual {
        min-height: 590px;
        transform: scale(0.86);
        margin-bottom: -82px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .landing-phone {
        transform: none;
    }
}

/* Pages statiques (à propos, RGPD, contact) */
.static-page-main {
    min-height: 100vh;
    padding: var(--spacing-8) 0;
}

.static-page-container {
    max-width: 720px;
}

.static-page-nav {
    margin-bottom: var(--spacing-8);
}

.static-page-title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--color-gray-900);
    letter-spacing: -0.02em;
    margin: 0 0 var(--spacing-4);
}

.static-page-meta {
    color: var(--color-gray-500);
    font-size: var(--font-size-sm);
    margin: 0 0 var(--spacing-8);
}

.static-page-content {
    color: var(--color-gray-700);
    font-size: var(--font-size-base);
    line-height: 1.7;
}

.static-page-content h2 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-gray-900);
    margin: var(--spacing-8) 0 var(--spacing-3);
}

.static-page-content h2:first-child {
    margin-top: 0;
}

.static-page-content p,
.static-page-content ul {
    margin: 0 0 var(--spacing-4);
}

.static-page-content ul {
    padding-left: var(--spacing-6);
}

.static-page-content li {
    margin-bottom: var(--spacing-2);
}

.static-page-content a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.static-page-content a:hover {
    color: var(--color-primary-dark);
}

/* Page À propos */
.about-page {
    background:
        radial-gradient(circle at 82% 6%, rgba(0, 122, 255, 0.13), transparent 31rem),
        linear-gradient(135deg, #F8FAFC 0%, #E8EEF6 100%);
}

.about-page-container {
    max-width: 1120px;
}

.about-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: clamp(3rem, 7vw, 6rem);
}

.about-brand {
    color: var(--color-primary);
    font-size: var(--font-size-lg);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.about-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
    align-items: center;
    gap: clamp(3rem, 7vw, 6rem);
    padding-bottom: clamp(4rem, 8vw, 7rem);
}

.about-eyebrow,
.about-section-kicker,
.about-section-heading > p,
.about-commitment > div > p {
    margin: 0 0 var(--spacing-3);
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.about-hero h1 {
    max-width: 13ch;
    margin: 0 0 var(--spacing-5);
    color: var(--color-gray-900);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 750;
    letter-spacing: -0.05em;
    line-height: 1.02;
}

.about-hero-lead {
    max-width: 620px;
    margin: 0 0 var(--spacing-8);
    color: var(--color-gray-600);
    font-size: clamp(1rem, 2vw, 1.2rem);
    line-height: 1.65;
}

.about-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4);
}

.about-hero-actions .btn {
    min-height: 48px;
}

.about-btn-secondary {
    color: var(--color-gray-800);
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--color-gray-300);
    box-shadow: var(--shadow-sm);
}

.about-btn-secondary:hover {
    color: var(--color-primary);
    background: var(--color-white);
    border-color: rgba(0, 122, 255, 0.35);
}

.about-mission-card {
    position: relative;
    overflow: hidden;
    padding: clamp(2rem, 5vw, 3rem);
    border: 1px solid rgba(0, 122, 255, 0.16);
    border-radius: 30px;
    color: var(--color-white);
    background:
        radial-gradient(circle at 90% 10%, rgba(255, 255, 255, 0.24), transparent 38%),
        linear-gradient(145deg, #0B86FF, #0062CC);
    box-shadow: 0 28px 60px rgba(0, 91, 191, 0.24);
    transform: rotate(1.5deg);
}

.about-mission-card::after {
    content: "";
    position: absolute;
    right: -50px;
    bottom: -65px;
    width: 190px;
    height: 190px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
}

.about-mission-icon {
    display: grid;
    width: 58px;
    height: 58px;
    margin-bottom: var(--spacing-8);
    place-items: center;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 1.7rem;
    backdrop-filter: blur(8px);
}

.about-mission-card > p {
    margin: 0 0 var(--spacing-3);
    color: rgba(255, 255, 255, 0.76);
    font-size: var(--font-size-sm);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.about-mission-card > strong {
    display: block;
    max-width: 18ch;
    font-size: clamp(1.45rem, 3vw, 2rem);
    line-height: 1.3;
}

.about-mission-line {
    width: 48px;
    height: 3px;
    margin: var(--spacing-8) 0 var(--spacing-4);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.75);
}

.about-mission-card > small {
    color: rgba(255, 255, 255, 0.82);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.about-section {
    padding: clamp(3.5rem, 7vw, 6rem) 0;
    border-top: 1px solid rgba(203, 213, 225, 0.72);
}

.about-section-heading {
    max-width: 720px;
    margin: 0 auto var(--spacing-10);
    text-align: center;
}

.about-section-heading h2,
.about-method h2,
.about-commitment h2,
.about-final-cta h2 {
    margin: 0 0 var(--spacing-4);
    color: var(--color-gray-900);
    font-size: clamp(1.9rem, 4vw, 3rem);
    letter-spacing: -0.035em;
    line-height: 1.12;
}

.about-section-heading > span,
.about-commitment > div > span {
    display: block;
    color: var(--color-gray-600);
    font-size: var(--font-size-lg);
    line-height: 1.65;
}

.about-value-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-5);
}

.about-value-grid article {
    padding: var(--spacing-8);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius-lg);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 9px 28px rgba(15, 23, 42, 0.06);
}

.about-value-icon {
    display: grid;
    width: 50px;
    height: 50px;
    margin-bottom: var(--spacing-5);
    place-items: center;
    border-radius: 15px;
    background: #EAF3FF;
    font-size: 1.4rem;
}

.about-value-grid h3 {
    margin: 0 0 var(--spacing-3);
    color: var(--color-gray-900);
    font-size: var(--font-size-xl);
}

.about-value-grid p {
    margin: 0;
    color: var(--color-gray-600);
    line-height: 1.65;
}

.about-method {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 0.85fr);
    align-items: center;
    gap: clamp(3rem, 7vw, 6rem);
}

.about-method-copy > p:not(.about-section-kicker) {
    margin: 0;
    color: var(--color-gray-600);
    font-size: var(--font-size-lg);
    line-height: 1.7;
}

.about-principles {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    padding: 0;
    margin: var(--spacing-8) 0 0;
    list-style: none;
}

.about-principles li {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
}

.about-principles li > span {
    display: grid;
    width: 25px;
    height: 25px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    color: #047857;
    background: #D1FAE5;
    font-size: 0.75rem;
    font-weight: 800;
}

.about-principles li div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.about-principles strong {
    color: var(--color-gray-900);
    font-size: var(--font-size-base);
}

.about-principles small {
    color: var(--color-gray-500);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.about-cycle {
    position: relative;
    min-height: 410px;
    border: 1px solid var(--color-gray-200);
    border-radius: 36px;
    background:
        radial-gradient(circle at center, rgba(0, 122, 255, 0.13), transparent 42%),
        rgba(255, 255, 255, 0.84);
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
}

.about-cycle::before {
    content: "";
    position: absolute;
    inset: 76px;
    border: 2px dashed rgba(0, 122, 255, 0.22);
    border-radius: 50%;
}

.about-cycle-center {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    width: 112px;
    height: 112px;
    place-content: center;
    border-radius: 50%;
    color: var(--color-white);
    background: linear-gradient(145deg, #1387FF, #0064D2);
    box-shadow: 0 14px 30px rgba(0, 102, 213, 0.28);
    text-align: center;
    transform: translate(-50%, -50%);
}

.about-cycle-center strong {
    font-size: 0.72rem;
    text-transform: uppercase;
}

.about-cycle-center span {
    font-size: 0.9rem;
    font-weight: 700;
}

.about-cycle-step {
    position: absolute;
    display: flex;
    min-width: 128px;
    flex-direction: column;
    padding: 12px 14px;
    border: 1px solid var(--color-gray-200);
    border-radius: 13px;
    background: var(--color-white);
    box-shadow: 0 9px 22px rgba(15, 23, 42, 0.1);
}

.about-cycle-step > span {
    display: grid;
    width: 21px;
    height: 21px;
    margin-bottom: 5px;
    place-items: center;
    border-radius: 7px;
    color: var(--color-primary);
    background: #EAF3FF;
    font-size: 0.65rem;
    font-weight: 800;
}

.about-cycle-step strong {
    color: var(--color-gray-900);
    font-size: var(--font-size-sm);
}

.about-cycle-step small {
    color: var(--color-gray-500);
    font-size: 0.68rem;
}

.about-cycle-step-test {
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
}

.about-cycle-step-analyse {
    right: 22px;
    bottom: 42px;
}

.about-cycle-step-train {
    bottom: 42px;
    left: 22px;
}

.about-users-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-6);
}

.about-user-card {
    padding: clamp(1.75rem, 4vw, 2.5rem);
    border: 1px solid var(--color-gray-200);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.about-user-card-coach {
    border-color: rgba(0, 122, 255, 0.22);
    background: linear-gradient(140deg, #FFFFFF, #F0F7FF);
}

.about-user-top {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-5);
}

.about-user-top > span {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border-radius: 17px;
    background: #EAF3FF;
    font-size: 1.55rem;
}

.about-user-top div {
    display: flex;
    flex-direction: column;
}

.about-user-top small {
    color: var(--color-primary);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.about-user-top h3 {
    margin: 0;
    color: var(--color-gray-900);
    font-size: var(--font-size-2xl);
}

.about-user-card > p {
    color: var(--color-gray-600);
    line-height: 1.65;
}

.about-user-card ul {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    padding: 0;
    margin: var(--spacing-6) 0 0;
    list-style: none;
}

.about-user-card li {
    position: relative;
    padding-left: 1.5rem;
    color: var(--color-gray-700);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.about-user-card li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: 800;
}

.about-commitment {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr);
    align-items: center;
    gap: var(--spacing-10);
    margin: clamp(3rem, 7vw, 6rem) 0;
    padding: clamp(2rem, 5vw, 3.5rem);
    border: 1px solid var(--color-gray-200);
    border-radius: 28px;
    background: var(--color-white);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}

.about-commitment-points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-3);
}

.about-commitment-points > span {
    display: flex;
    align-items: center;
    min-height: 105px;
    justify-content: center;
    flex-direction: column;
    padding: var(--spacing-4);
    border-radius: 17px;
    background: #F3F7FC;
    text-align: center;
}

.about-commitment-points strong {
    color: var(--color-primary);
    font-size: var(--font-size-lg);
}

.about-commitment-points small {
    color: var(--color-gray-500);
    font-size: 0.72rem;
}

.about-final-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-8);
    margin-bottom: var(--spacing-8);
    padding: clamp(2rem, 5vw, 3.5rem);
    border-radius: 28px;
    color: var(--color-white);
    background:
        radial-gradient(circle at 90% 20%, rgba(255, 255, 255, 0.2), transparent 28%),
        linear-gradient(135deg, #0A7EF5, #0058BA);
    box-shadow: 0 22px 50px rgba(0, 87, 184, 0.22);
}

.about-final-cta p {
    margin: 0 0 var(--spacing-2);
    color: rgba(255, 255, 255, 0.76);
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
}

.about-final-cta h2 {
    max-width: 18ch;
    margin: 0;
    color: var(--color-white);
}

.about-final-cta > div:last-child {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: var(--spacing-3);
    flex: 0 0 auto;
}

.about-final-cta .btn-primary {
    color: var(--color-white) !important;
    background: var(--color-gray-900);
    border-color: var(--color-gray-900);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.24);
}

.about-final-cta .btn-primary:hover {
    color: var(--color-white) !important;
    background: #020617;
    border-color: #020617;
}

.about-text-link {
    color: rgba(255, 255, 255, 0.88);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-decoration: none;
}

.about-text-link:hover {
    color: var(--color-white);
    text-decoration: underline;
}

@media (max-width: 900px) {
    .about-hero,
    .about-method,
    .about-commitment {
        grid-template-columns: 1fr;
    }

    .about-mission-card {
        max-width: 560px;
        transform: none;
    }

    .about-method-copy {
        max-width: 720px;
    }

    .about-cycle {
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
    }

    .about-commitment-points {
        max-width: 520px;
    }
}

@media (max-width: 700px) {
    .about-value-grid,
    .about-users-grid {
        grid-template-columns: 1fr;
    }

    .about-final-cta {
        align-items: flex-start;
        flex-direction: column;
    }

    .about-final-cta > div:last-child {
        align-items: flex-start;
    }
}

@media (max-width: 520px) {
    .about-page .static-page-main {
        padding-top: var(--spacing-5);
    }

    .about-topbar {
        margin-bottom: var(--spacing-10);
    }

    .about-brand {
        font-size: var(--font-size-base);
    }

    .about-hero h1 {
        font-size: clamp(2.35rem, 12vw, 3.25rem);
    }

    .about-hero-actions .btn {
        width: 100%;
    }

    .about-cycle {
        display: flex;
        min-height: auto;
        flex-direction: column;
        gap: var(--spacing-3);
        padding: var(--spacing-5);
    }

    .about-cycle::before,
    .about-cycle-center {
        display: none;
    }

    .about-cycle-step {
        position: static;
        min-width: 0;
        transform: none;
    }

    .about-commitment-points {
        grid-template-columns: 1fr;
    }

    .about-commitment-points > span {
        min-height: 82px;
    }

    .about-final-cta .btn {
        width: 100%;
    }

    .about-final-cta > div:last-child {
        width: 100%;
    }
}

/* Politique de confidentialité */
.rgpd-page {
    background:
        radial-gradient(circle at 85% 5%, rgba(0, 122, 255, 0.11), transparent 30rem),
        linear-gradient(135deg, #F8FAFC 0%, #E8EEF6 100%);
}

.rgpd-page-container {
    max-width: 1120px;
}

.rgpd-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-10);
}

.rgpd-brand {
    color: var(--color-primary);
    font-size: var(--font-size-lg);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.rgpd-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--spacing-6);
    max-width: 840px;
    margin-bottom: var(--spacing-8);
}

.rgpd-hero-icon {
    display: grid;
    width: 74px;
    height: 74px;
    place-items: center;
    border: 1px solid rgba(0, 122, 255, 0.18);
    border-radius: 22px;
    background: linear-gradient(145deg, #FFFFFF, #E9F3FF);
    box-shadow: 0 12px 30px rgba(0, 122, 255, 0.12);
    font-size: 2rem;
}

.rgpd-eyebrow {
    margin: 0 0 var(--spacing-2);
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.rgpd-hero .static-page-title {
    margin-bottom: var(--spacing-3);
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.08;
}

.rgpd-hero-lead {
    max-width: 700px;
    margin: 0 0 var(--spacing-3);
    color: var(--color-gray-600);
    font-size: clamp(1rem, 2vw, 1.15rem);
    line-height: 1.65;
}

.rgpd-hero .static-page-meta {
    margin-bottom: 0;
}

.rgpd-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-10);
}

.rgpd-summary article {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-5);
    border: 1px solid rgba(203, 213, 225, 0.8);
    border-radius: var(--border-radius-lg);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.rgpd-summary article > span {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 13px;
    background: #EFF6FF;
    font-size: 1.25rem;
}

.rgpd-summary article div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.rgpd-summary strong {
    color: var(--color-gray-900);
    font-size: var(--font-size-sm);
}

.rgpd-summary small {
    color: var(--color-gray-500);
    font-size: 0.75rem;
    line-height: 1.4;
}

.rgpd-layout {
    display: grid;
    grid-template-columns: 215px minmax(0, 1fr);
    align-items: start;
    gap: var(--spacing-8);
}

.rgpd-toc {
    position: sticky;
    top: var(--spacing-6);
    padding: var(--spacing-5);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius-lg);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(10px);
}

.rgpd-toc > strong {
    display: block;
    margin-bottom: var(--spacing-3);
    color: var(--color-gray-900);
    font-size: var(--font-size-sm);
}

.rgpd-toc nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rgpd-toc a {
    padding: 0.45rem 0.6rem;
    border-radius: 8px;
    color: var(--color-gray-600);
    font-size: 0.78rem;
    font-weight: 500;
    text-decoration: none;
}

.rgpd-toc a:hover {
    color: var(--color-primary);
    background: #EFF6FF;
}

.rgpd-content {
    min-width: 0;
}

.rgpd-intro,
.rgpd-section {
    margin-bottom: var(--spacing-5);
    padding: clamp(1.35rem, 3vw, 2rem);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius-lg);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 7px 22px rgba(15, 23, 42, 0.055);
}

.rgpd-intro {
    color: var(--color-gray-600);
    background: linear-gradient(135deg, #FFFFFF, #F3F8FF);
}

.rgpd-intro p:last-child,
.rgpd-section p:last-child,
.rgpd-section ul:last-child {
    margin-bottom: 0;
}

.rgpd-section {
    scroll-margin-top: var(--spacing-6);
}

.rgpd-content .rgpd-section h2 {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin: 0 0 var(--spacing-4);
    color: var(--color-gray-900);
    font-size: clamp(1.15rem, 2.5vw, 1.4rem);
    font-weight: 700;
}

.rgpd-section h2 > span {
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 10px;
    color: var(--color-primary);
    background: #EAF3FF;
    font-size: 0.78rem;
    font-weight: 800;
}

.rgpd-section ul {
    padding-left: 1.25rem;
}

.rgpd-section li {
    padding-left: 0.2rem;
    margin-bottom: var(--spacing-3);
}

.rgpd-section li::marker {
    color: var(--color-primary);
}

.rgpd-callout {
    padding: var(--spacing-4) var(--spacing-5);
    border: 1px solid #A7F3D0;
    border-radius: var(--border-radius-md);
    background: #ECFDF5;
    color: #065F46;
}

.rgpd-callout p {
    margin: 2px 0 0;
    color: #047857;
    font-size: var(--font-size-sm);
}

.rgpd-external-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
}

.rgpd-content .rgpd-external-links a {
    display: inline-flex;
    padding: 0.5rem 0.75rem;
    border-radius: 9px;
    color: var(--color-primary);
    background: #EFF6FF;
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-decoration: none;
}

.rgpd-rights-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-3);
    margin: 0 0 var(--spacing-5);
}

.rgpd-rights-grid div {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: var(--spacing-4);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius-md);
    background: var(--color-gray-50);
}

.rgpd-rights-grid strong {
    color: var(--color-gray-900);
    font-size: var(--font-size-sm);
}

.rgpd-rights-grid small {
    color: var(--color-gray-500);
    font-size: 0.76rem;
    line-height: 1.45;
}

.rgpd-contact-btn {
    display: inline-flex;
    width: auto;
    margin-top: var(--spacing-2);
    color: var(--color-white) !important;
    text-decoration: none !important;
}

@media (max-width: 900px) {
    .rgpd-summary {
        grid-template-columns: 1fr;
    }

    .rgpd-layout {
        grid-template-columns: 1fr;
    }

    .rgpd-toc {
        position: static;
    }

    .rgpd-toc nav {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .rgpd-page .static-page-main {
        padding-top: var(--spacing-5);
    }

    .rgpd-topbar {
        margin-bottom: var(--spacing-8);
    }

    .rgpd-brand {
        font-size: var(--font-size-base);
    }

    .rgpd-hero {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
    }

    .rgpd-hero-icon {
        width: 58px;
        height: 58px;
        border-radius: 17px;
        font-size: 1.55rem;
    }

    .rgpd-summary article {
        padding: var(--spacing-4);
    }

    .rgpd-toc {
        display: none;
    }

    .rgpd-rights-grid {
        grid-template-columns: 1fr;
    }

    .rgpd-contact-btn {
        width: 100%;
    }
}

.contact-page-container {
    max-width: 640px;
}

.contact-page-lead {
    color: var(--color-gray-600);
    font-size: var(--font-size-base);
    line-height: 1.6;
    margin: var(--spacing-4) 0 var(--spacing-8);
}

.contact-form {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-8);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}

.contact-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-textarea {
    min-height: 140px;
    resize: vertical;
}

.contact-verify-block {
    margin: var(--spacing-6) 0;
    padding: var(--spacing-5);
    border-radius: var(--border-radius-md);
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
}

.contact-verify-help {
    margin: 0 0 var(--spacing-4);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-700);
}

.contact-turnstile {
    min-height: 0;
    margin: var(--spacing-3) 0;
}

.contact-turnstile-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.contact-verify-btn,
.contact-submit-btn {
    width: 100%;
}

.contact-submit-btn:disabled,
.contact-submit-btn:disabled:hover {
    background: var(--color-gray-300);
    color: var(--color-gray-500);
    cursor: not-allowed;
    box-shadow: none;
}

.contact-submit-btn:not(:disabled) {
    background: var(--color-primary);
    color: var(--color-white);
}

.contact-submit-btn:not(:disabled):hover {
    background: var(--color-primary-dark);
    box-shadow: var(--shadow-lg);
}

.contact-form-alert {
    padding: var(--spacing-4);
    border-radius: var(--border-radius-md);
    margin-bottom: var(--spacing-4);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.contact-form-success {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.contact-form-error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* ——— Résumé hebdomadaire coach ——— */
.weekly-summary-page .weekly-summary-stats {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.stat-card-trend-up .stat-icon,
.stat-card-trend-up .stat-number {
    color: #16a34a;
}

.stat-card-trend-down .stat-icon,
.stat-card-trend-down .stat-number {
    color: #dc2626;
}

.weekly-summary-categories-section {
    margin-bottom: var(--spacing-8);
}

.weekly-summary-category-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
}

.weekly-summary-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: 0.5rem 0.875rem;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: 999px;
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
    box-shadow: var(--shadow-sm);
}

.weekly-summary-chip strong {
    color: var(--color-gray-900);
}

.weekly-summary-table-wrap {
    overflow-x: auto;
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-gray-200);
    box-shadow: var(--shadow-sm);
}

.weekly-summary-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.weekly-summary-table th,
.weekly-summary-table td {
    padding: 0.875rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--color-gray-100);
    vertical-align: middle;
}

.weekly-summary-table th {
    background: var(--color-gray-50);
    font-weight: 600;
    color: var(--color-gray-700);
    white-space: nowrap;
}

.weekly-summary-table tbody tr:last-child td {
    border-bottom: none;
}

.weekly-summary-table tbody tr:hover {
    background: #f8fafc;
}

.weekly-category-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.weekly-score-main {
    display: block;
    font-weight: 700;
    color: var(--color-gray-900);
}

.weekly-score-label {
    display: block;
    font-size: 0.75rem;
    color: var(--color-gray-500);
    margin-top: 0.15rem;
}

.weekly-score-na {
    color: var(--color-gray-400);
}

.weekly-delta {
    color: var(--color-gray-500);
    font-size: 0.8em;
}

.weekly-first-session {
    color: var(--color-gray-500);
    font-style: italic;
    font-size: 0.85em;
}

.weekly-trend-improved-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    font-weight: 600;
    white-space: nowrap;
}

.weekly-trend-declined-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: #fee2e2;
    color: #991b1b;
    font-weight: 600;
    white-space: nowrap;
}

.weekly-trend-stable-badge,
.weekly-trend-new-badge,
.weekly-trend-unknown-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--color-gray-100);
    color: var(--color-gray-700);
    font-weight: 600;
    white-space: nowrap;
}

.weekly-trend-new-badge {
    background: #dbeafe;
    color: #1e40af;
}

.weekly-summary-empty {
    text-align: center;
    padding: var(--spacing-12) var(--spacing-6);
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    border: 1px dashed var(--color-gray-300);
}

.weekly-summary-empty .empty-icon {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-4);
}

.weekly-summary-error {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-8);
}

.player-actions {
    flex-wrap: wrap;
    justify-content: center;
}

.player-actions .view-performances-btn,
.player-actions .view-weekly-summary-btn {
    flex: 1 1 calc(50% - var(--spacing-2));
    min-width: 0;
    max-width: 100%;
}

.player-actions .delete-player-btn {
    flex: 1 1 100%;
    max-width: 100%;
}

@media (max-width: 768px) {
    .weekly-summary-table thead {
        display: none;
    }

    .weekly-summary-table tbody tr {
        display: block;
        margin-bottom: var(--spacing-4);
        border: 1px solid var(--color-gray-200);
        border-radius: var(--border-radius-md);
        overflow: hidden;
    }

    .weekly-summary-table tbody td {
        display: flex;
        justify-content: space-between;
        gap: var(--spacing-4);
        border-bottom: 1px solid var(--color-gray-100);
    }

    .weekly-summary-table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--color-gray-500);
        flex-shrink: 0;
    }

    .weekly-summary-table tbody td:last-child {
        border-bottom: none;
    }
}

/* ==========================================================================
   Biblio — tests, exercises & reports: full-width + centered action bars
   ========================================================================== */

.report-container,
.wedging-report-container,
body:not(.report-body) .test-container {
    max-width: none !important;
    width: 100%;
    box-sizing: border-box;
    padding-bottom: var(--spacing-6) !important;
}

.report-content,
.report-main,
.report-content > section,
.report-main > section,
.report-section,
.stats-section,
body:not(.report-body) .test-container .test-content,
body:not(.report-body) .test-container.exercice-content {
    width: 100%;
    max-width: none;
}

body:not(.report-body) .test-container .info-box,
body:not(.report-body) .test-container [class*="-info-box"],
body:not(.report-body) .test-container [class*="-interactive-section"],
body:not(.report-body) .test-container .date-section {
    width: 100%;
    max-width: none;
}

body:not(.report-body) .test-container [class*="-actions-bar"],
body:not(.report-body) .test-container .actions-section,
body:not(.report-body) .test-container .test-actions {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    max-width: none !important;
    width: 100%;
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    margin-top: var(--spacing-4);
    padding: var(--spacing-3);
    padding-bottom: var(--spacing-3);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--color-gray-200);
    backdrop-filter: none;
    z-index: auto;
}

body:not(.report-body) .test-container [class*="-actions-bar"] .btn,
body:not(.report-body) .test-container .actions-section .btn,
body:not(.report-body) .test-container .test-actions .btn {
    flex: 0 1 auto;
    min-width: 10rem;
    max-width: 14rem;
    min-height: 48px;
}

body.recentrage-body .recentrage-reset-chip {
    color: #fff;
    background: var(--color-danger, #dc2626);
    border-color: #dc2626;
}

body.recentrage-body .recentrage-sticky-footer {
    position: static !important;
    align-items: center;
    width: 100%;
    max-width: none;
    margin-top: var(--spacing-4);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
}

body.recentrage-body .recentrage-save-btn {
    width: auto;
    min-width: 12rem;
    max-width: 20rem;
}

.report-delete-last-session-bar {
    width: 100%;
    max-width: none !important;
    margin: var(--spacing-6) 0 0;
}

.report-delete-last-session-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    max-width: none !important;
    width: 100%;
}

.report-delete-back-btn {
    flex: 0 1 auto;
    min-width: 10rem;
    max-width: 14rem;
    min-height: 48px;
    white-space: nowrap;
}

/* Bouton Retour en-tête des rapports — toujours bleu */
.report-header > .btn-secondary[data-i18n="reports.common.backArrow"],
.report-header .header-left .btn-secondary[data-i18n="reports.common.backArrow"],
button.btn-secondary.wedging-back-btn[data-i18n="reports.common.backArrow"] {
    background: var(--color-primary, #2563eb);
    border-color: var(--color-primary, #2563eb);
    color: #fff;
}

.report-header > .btn-secondary[data-i18n="reports.common.backArrow"]:hover,
.report-header .header-left .btn-secondary[data-i18n="reports.common.backArrow"]:hover,
button.btn-secondary.wedging-back-btn[data-i18n="reports.common.backArrow"]:hover {
    background: var(--color-primary-dark, #1d4ed8);
    border-color: var(--color-primary-dark, #1d4ed8);
    color: #fff;
}

.btn-delete-last-session {
    flex: 1 1 auto;
    min-width: 12rem;
    max-width: none !important;
    min-height: 48px;
    white-space: normal;
    text-align: center;
    line-height: 1.35;
    height: auto;
}

@media (max-width: 768px) {
    .report-delete-last-session-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .report-delete-back-btn,
    .btn-delete-last-session {
        width: 100%;
        max-width: none !important;
    }
}

/* 50 Feet Drill — distance chips + hint legibility */
.putting50ft-test .putting50ft-distance-chip {
    font-size: 1.05rem;
    min-width: 4.5rem;
    min-height: 40px;
    padding: 0.4rem 0.9rem;
}

.putting50ft-test .putting50ft-distance-chip.current {
    font-size: 1.15rem;
    transform: scale(1.1);
}

.putting50ft-test .putting50ft-touch-panel .breakputt-touch-hint {
    font-size: 1.125rem;
    color: var(--color-gray-800);
}

.putting50ft-test .putting50ft-status-bar .status-position strong {
    font-size: 1.35rem;
}

/* Biblio — sections always visible (no collapsible details) */
.wedging-advanced-block-static .wedging-advanced-heading,
.recentrage-rules-heading,
.putting456-stats-heading {
    margin: 0;
}

.wedging-advanced-block-static .wedging-advanced-heading {
    padding: 0.85rem 1rem;
    background: var(--color-gray-50);
    font-size: 1rem;
    border-bottom: 1px solid var(--color-gray-200);
}

.recentrage-rules-section .recentrage-rules-heading {
    padding: 0.85rem 1rem;
    font-weight: 700;
    font-size: 1rem;
    border-bottom: 1px solid var(--color-gray-200);
}

.putting456-stats-section .putting456-stats-heading {
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.test-container details,
.report-container details,
.health-shell details,
.recentrage-test details {
    display: block;
}

.test-container details > :not(summary),
.report-container details > :not(summary),
.health-shell details > :not(summary),
.recentrage-test details > :not(summary) {
    display: block !important;
}

.test-container details[open],
.report-container details[open],
.health-shell details[open],
.recentrage-test details[open] {
    display: block;
}

.test-container details summary,
.report-container details summary,
.health-shell details summary,
.recentrage-test details summary {
    pointer-events: none;
    cursor: default;
}

.test-container details summary::-webkit-details-marker,
.report-container details summary::-webkit-details-marker,
.health-shell details summary::-webkit-details-marker,
.recentrage-test details summary::-webkit-details-marker {
    display: none;
}

.wedging-advanced-block summary::after,
.health-details-chevron {
    display: none !important;
}

/* Session history tables (performance reports) */
.history-section .putting-history-table {
    margin-top: 1.25rem;
}

.report-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.putting-history-table-inner,
.session-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.putting-history-table-inner th,
.putting-history-table-inner td,
.session-history-table th,
.session-history-table td {
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    text-align: left;
}

.putting-history-table-inner th,
.session-history-table th {
    font-weight: 600;
    background: rgba(0, 0, 0, 0.03);
}

.session-history-table-wrap {
    margin-top: 1rem;
}

#wedgingSectionHistory .chart-container-sm,
#ferringSectionHistory .chart-container-sm {
    min-height: 220px;
}