* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: radial-gradient(circle, rgba(0, 0, 0, 0.207) 0%, rgba(0, 0, 0, 1) 100%), url(bg.png) no-repeat center center fixed;
            background-size: cover;
            color: #F3F4F6;
            font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
            min-height: 100vh;
        }

        .container {
            max-width: 600px;
            margin: 0 auto;
            padding: 0 8px;
        }

        .header {
            background: transparent;
            padding: 16px 0 16px 0;
            text-align: center;
        }

        .header h1 {
            color: #fff;
            font-size: 2.1rem;
            font-weight: 700;
            margin: 0 0 8px 0;
            letter-spacing: 0.01em;
        }

        .header p {
            color: #A0A3B1;
            font-size: 1.1rem;
            margin: 0;
        }

        #creationBloc {
            background: #23242bd5;
            border-radius: 18px;
            box-shadow: 0 4px 24px rgba(0,0,0,0.13);
            padding: 28px 18px 24px 18px;
            margin: 24px 0 0 0;
        }

        h2, h3, h4 {
            color: #F3F4F6;
            font-weight: 600;
            margin: 0 auto;
            width: fit-content;
        }

        .store-list {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin: 18px 0 18px 0;
            justify-content: center;
        }

        .store-item {
            background: #171717;
            padding: 16px 18px;
            min-width: 140px;
            max-width: 210px;
            display: flex;
            color: #F3F4F6;
            font-size: 1rem;
            transition: border 0.2s, box-shadow 0.2s;
        }

        .store-item:hover {
            border: 1.5px solid #7B61FF;
            box-shadow: 0 4px 16px rgba(123,97,255,0.10);
        }

        .store-item input[type="checkbox"] {
            accent-color: #7B61FF;
            width: 14px;
            height: 14px;
            display: none;
        }

        h3{
            margin-top: 10px;
        }

        .btn {
            border: none;
            padding: 12px 22px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.2s, color 0.2s, box-shadow 0.2s;
            margin-top: -1px;
        }

        .btn-primary {
            background: #726BE3;
            color:white;
        }

        .btn-primary:hover {
            background: linear-gradient(90deg, #5FFFB1 0%, #7B61FF 100%);
            color: #181A20;
        }

        .btn-danger {
            background: #FF5F7B;
            color: #fff;
            margin-bottom: 18px;
        }

        .btn-photo {
            background: #23242B;
    color: #7B61FF;
    border: 1px solid #7B61FF;
    font-size: 0.98rem;
    font-weight: 500;
        }

        .btn-photo:hover {
            background: #7B61FF;
            color: #fff;
        }

        .btn-photo-disabled {
            background: #23232A !important;
            color: #A0A3B1 !important;
            border: 1.5px solid #444 !important;
            opacity: 0.6;
            cursor: not-allowed;
            pointer-events: none;
        }

        input[type="text"],
        input[type="number"],
        input[type="datetime-local"] {
            background: #23232A;
            color: #F3F4F6;
            border: 1.5px solid #2D2F3A;
            border-radius: 7px;
            padding: 8px 12px;
            font-size: 1rem;
            outline: none;
            transition: border 0.2s;
        }

        input[type="text"]:focus,
        input[type="number"]:focus,
        input[type="datetime-local"]:focus {
            border: 1.5px solid #7B61FF;
        }

        label {
            color: #A0A3B1;
            font-size: 0.75rem;
            font-weight: 500;
        }

        .tabs {
            display: flex; 
    text-align: center;
        }

        .tab {
            background: #23232A;
            color: #A0A3B1;
            width:50%;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.2s, color 0.2s;
            z-index: 9999;
            height: 60px;
    line-height: 60px;
        }

        .tab.active {
            background: #7B61FF;
            color: #fff;
        }

        .tab:hover {
            background: #5FFFB1;
            color: #181A20;
        }

        .tab-content {
            border-radius: 0 0 12px 12px;
            padding: 18px 12px 70px 12px;
            margin-bottom: 18px;
            display: none;
        }

        .tab-content#photos {
            padding-bottom: 90px;
        }

        .tab-content.active {
            /* Ne pas forcer display: block ici, le JS gère l'affichage */
        }

        .success-message {
            background: #5FFFB1;
            color: #181A20;
            border-radius: 8px;
            padding: 14px 22px;
            position: fixed;
            top: 24px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 9999;
            font-weight: 600;
            font-size: 1.1rem;
            box-shadow: 0 2px 12px rgba(95,255,177,0.13);
        }

        .error-message {
            background: #FF5F7B;
            color: #fff;
            border-radius: 8px;
            padding: 14px 22px;
            position: fixed;
            top: 24px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 9999;
            font-weight: 600;
            font-size: 1.1rem;
            box-shadow: 0 2px 12px rgba(255,95,123,0.13);
        }

        .loading {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: #23232A;
            color: #A0A3B1;
            border-radius: 10px;
            padding: 24px 0;
            margin: 18px 0;
        }

        .spinner {
            border: 4px solid #23242B;
            border-top: 4px solid #7B61FF;
            border-radius: 50%;
            width: 36px;
            height: 36px;
            animation: spin 1s linear infinite;
            margin-bottom: 12px;
        }

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

        @media (max-width: 600px) {
            .container {
                padding: 0 2px;
            }
            #creationBloc {
                padding: 12px 2px 16px 2px;
            }
            .store-item {
                min-width: 110px;
                max-width: 100%;
                font-size: 0.97rem;
                padding: 10px 8px;
                display: flex;
                justify-content: center;
            }
            .btn {
                font-size: 0.98rem;
                width: 50%;
            }
        }

        /* Ajout pour garantir le contrôle JS sur l'affichage dynamique */
        .page {
            display: none;
        }
        .page.active {
            /* Ne pas forcer display: block ici, le JS gère l'affichage */
        }

        .store-item.active {
            border: 1px solid #7b61ff;
    box-shadow: 0 4px 16px rgba(123, 97, 255, 0.18);
    background: radial-gradient(circle, rgba(38, 38, 38, 0) 8%, rgba(123, 97, 255, .3) 100%);
        }

        .store-section {
            display: flex
            ;
                flex-direction: column;
                align-content: center;
                justify-content: space-around;
                align-items: center;
                gap: 13px;
                background: #23242bb3;
                margin-bottom: 10px;
                border-radius: 10px;
                padding-bottom: 10px;
        }

        .photo-section{
            display: flex;
                flex-direction: column;
                align-content: center;
                justify-content: space-around;
                align-items: center;
                gap: 13px;
                background: #23242bb3;
                margin-bottom: 10px;
                border-radius: 10px;
        }

        .horaires-row {
            display: flex;
            gap: 9px;
            margin: 8px 0 0 0;
            justify-content: space-around;
            align-items: center;
        }
        .horaires-label {
            font-size: 0.92em;
            color: #A0A3B1;
            font-weight: 500;
            margin-right: 6px;
        }
        .horaire-magasin-nom {
            font-weight: 700;
            font-size: 1.08em;
            color: #F3F4F6;
            margin-bottom: 2px;
        }
        .horaire-magasin-bloc {
            background: #191A22;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(123,97,255,0.07);
            padding: 12px 14px 10px 14px;
            margin-bottom: 10px;
        }
        .time-input[type="time"] {
            background: #23232A;
            color: #F3F4F6;
            border: 1.5px solid #2D2F3A;
            border-radius: 7px;
            padding: 6px 10px;
            font-size: 1em;
            outline: none;
            min-width: 80px;
            transition: border 0.2s;
        }
        .time-input[type="time"]:focus {
            border: 1.5px solid #7B61FF;
        }

        /* Barre de progression d'upload */
        .upload-progress {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #23242B;
            border: 2px solid #7B61FF;
            border-radius: 12px;
            padding: 20px;
            z-index: 10000;
            box-shadow: 0 8px 32px rgba(123,97,255,0.2);
            min-width: 280px;
        }

        .progress-bar {
            background: #1A1A1A;
            border-radius: 8px;
            height: 12px;
            overflow: hidden;
            margin-bottom: 12px;
        }

        .progress-fill {
            background: linear-gradient(90deg, #5FFFB1 0%, #7B61FF 100%);
            height: 100%;
            border-radius: 8px;
            transition: width 0.3s ease;
        }

        .progress-text {
            color: #F3F4F6;
            font-weight: 600;
            text-align: center;
            font-size: 1rem;
        }

        .loading-message {
            background: #7B61FF;
            color: #fff;
            border-radius: 8px;
            padding: 14px 22px;
            position: fixed;
            top: 24px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 9999;
            font-weight: 600;
            font-size: 1.1rem;
            box-shadow: 0 2px 12px rgba(123,97,255,0.13);
        }

        #driverName {
            border-radius: 35px;
            height: 70px;
            width:80%;
            padding:20px;
            background: #1a1a1aa6;
            
        }

        #driverName::placeholder {
            color:white;
            opacity: 1; /* Firefox */
          }

        #btnSetDriver{
            position: absolute;
            top:4px;
            width:62px;
            height: 62px;
            transform: translateX(-50%);
            right: 14px;
            border-radius: 31px;
            border: none;
            background: #262626c4;
            color: #fff;
        }