/* UrgencePhone Repair Wizard — Plugin CSS v1.0 */
:root { --upr-red: #E70514; --upr-red-hover: #C5040F; --upr-red-light: #FFF5F5; --upr-dark: #1A1A2E; --upr-gray-100: #F5F5F7; --upr-gray-200: #E5E5EA; --upr-gray-400: #AEAEB2; --upr-gray-500: #8E8E93; --upr-white: #FFFFFF; --upr-green: #30D158; --upr-orange: #FF9500; --upr-font: 'Inter','Montserrat',system-ui,sans-serif; }

.upr-wizard-wrap { font-family: var(--upr-font); max-width: 1100px; margin: 0 auto; color: var(--upr-dark); }
.upr-container { max-width: 960px; margin: 0 auto; padding: 0 20px; }
.upr-wizard-wrap *, .upr-wizard-wrap *::before, .upr-wizard-wrap *::after { box-sizing: border-box; }

/* ── Step tabs ── */
.upr-step-tabs { display: flex; gap: 0; border: 2px solid var(--upr-gray-200); border-radius: 12px; margin: 0 auto 32px; max-width: 960px; overflow: hidden; }
.upr-tab { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 14px 16px; border: none; background: var(--upr-white); cursor: pointer; font-family: var(--upr-font); font-size: 14px; color: var(--upr-gray-400); transition: all 0.3s; border-right: 1px solid var(--upr-gray-200); }
.upr-tab:last-child { border-right: none; }
.upr-tab.active { color: var(--upr-red); font-weight: 700; box-shadow: inset 0 -3px 0 var(--upr-red); }
.upr-tab.completed .upr-tab-num { background: var(--upr-green); color: white; }
.upr-tab-num { width: 28px; height: 28px; border-radius: 50%; background: var(--upr-gray-200); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.upr-tab.active .upr-tab-num { background: var(--upr-red); color: white; }
/* min-width:0 indispensable pour que text-overflow fonctionne dans un flex item */
.upr-tab-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upr-arrow { color: var(--upr-gray-400); flex-shrink: 0; }

/* ── Steps ── */
.upr-step { display: none; padding: 20px 0 40px; }
.upr-step.active { display: block; }

/* ── Search bar ── */
.upr-search-bar { display: flex; max-width: 600px; margin: 0 auto 16px; border: 2px solid var(--upr-gray-200); border-radius: 12px; overflow: hidden; }
.upr-search-bar input { flex: 1; border: none; padding: 16px 20px; font-size: 16px; font-family: var(--upr-font); outline: none; }
.upr-search-btn { width: 56px; background: var(--upr-red); border: none; color: white; font-size: 20px; cursor: pointer; }
.upr-search-btn:hover { background: var(--upr-red-hover); }
.upr-divider { text-align: center; color: var(--upr-gray-400); margin: 24px 0; position: relative; font-size: 14px; }
.upr-divider::before, .upr-divider::after { content:''; position:absolute; top:50%; width:calc(50% - 100px); height:1px; background:var(--upr-gray-200); }
.upr-divider::before { left:0; } .upr-divider::after { right:0; }

/* ── Search dropdown ── */
.upr-dropdown { position: relative; max-width: 600px; margin: -10px auto 16px; background: white; border: 1px solid var(--upr-gray-200); border-radius: 0 0 12px 12px; box-shadow: 0 8px 24px rgba(0,0,0,.1); max-height: 300px; overflow-y: auto; z-index: 100; }
.upr-dd-item { padding: 12px 20px; cursor: pointer; border-bottom: 1px solid var(--upr-gray-100); display: flex; align-items: center; gap: 12px; }
.upr-dd-item:hover { background: var(--upr-red-light); }
.upr-dd-item img { width: 36px; height: 36px; object-fit: contain; border-radius: 6px; }
.upr-dd-item strong { font-size: 15px; }
.upr-dd-item span { color: var(--upr-gray-500); font-size: 13px; }

/* ── Type grid ── */
.upr-type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 700px; margin: 0 auto; }
.upr-type-card { background: white; border: 2px solid var(--upr-gray-200); border-radius: 16px; padding: 32px 20px; text-align: center; cursor: pointer; transition: all 0.3s; }
.upr-type-card:hover { border-color: var(--upr-red); box-shadow: 0 4px 16px rgba(231,5,20,.12); }
.upr-type-card.selected { border-color: var(--upr-red); background: var(--upr-red-light); }
.upr-type-icon { font-size: 36px; display: block; margin-bottom: 12px; }
.upr-type-img { width: 48px; height: 48px; object-fit: contain; }
.upr-type-card h3 { font-size: 18px; font-weight: 800; margin: 0 0 4px; }
.upr-type-card p { font-size: 13px; color: var(--upr-gray-500); margin: 0; }

/* ── Brand grid ── */
.upr-section-title { text-align: center; font-size: 24px; font-weight: 900; margin-bottom: 24px; }
.upr-section-title span { color: var(--upr-red); }
.upr-brand-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    max-width: 900px;
    margin: 0 auto;
}
.upr-brand-card {
    background: white;
    border: 2px solid var(--upr-gray-200);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, transform .15s;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.upr-brand-card:hover { border-color: var(--upr-red); box-shadow: 0 4px 12px rgba(230,57,70,.15); transform: translateY(-2px); }
.upr-brand-card.selected { border-color: var(--upr-red) !important; box-shadow: 0 0 0 3px rgba(230,57,70,.2) !important; }
/* Zone image — remplit la partie haute de la card */
.upr-brand-logo {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    background: #fff;
    overflow: hidden;
}
/* max-width/max-height + auto = aspect ratio préservé, jamais de crop */
.upr-brand-logo img {
    display: block;
    max-width: 100%;
    max-height: 60px;
    width: auto;
    height: auto;
}
.upr-brand-logo span { font-size: 30px; line-height: 1; }
/* Nom sous l'image */
.upr-brand-card h4 {
    font-size: 12px;
    font-weight: 700;
    margin: 0;
    padding: 7px 6px;
    text-align: center;
    border-top: 1px solid var(--upr-gray-200);
    background: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.upr-back-link { display: inline-block; margin-bottom: 16px; font-size: 14px; color: var(--upr-gray-500); text-decoration: none; cursor: pointer; }
.upr-back-link:hover { color: var(--upr-red); }

/* ── Model grid ── */
.upr-model-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; max-width: 960px; margin: 0 auto; }
.upr-model-card { background: white; border: 2px solid var(--upr-gray-200); border-radius: 16px; padding: 16px 12px; text-align: center; cursor: pointer; transition: all 0.3s; display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 200px; justify-content: center; }
.upr-model-card:hover { border-color: var(--upr-red); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.upr-model-card.selected { border-color: var(--upr-red) !important; background: var(--upr-red-light) !important; }
.upr-model-img { width: 100px; height: 100px; object-fit: contain; }
.upr-model-placeholder { width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; font-size: 32px; background: var(--upr-gray-100); border-radius: 12px; }
.upr-model-card h4 { font-size: 13px; font-weight: 600; margin: 0; line-height: 1.3; }
.upr-model-count { font-size: 13px; color: var(--upr-gray-500); margin: 16px 0 0; text-align: center; }

/* ── Repair header ── */
.upr-repair-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.upr-repair-model-img { width: 60px; height: 60px; object-fit: contain; }
.upr-repair-header h2 { font-size: 28px; font-weight: 900; margin: 0; }
.upr-repair-header p { font-size: 14px; color: var(--upr-gray-500); margin: 0; }

/* ── Color picker (Pixouphone style) ── */
.upr-color-picker { margin-bottom: 24px; }
.upr-color-label { font-size: 15px; margin-bottom: 12px; }
.upr-color-label strong { font-weight: 700; }
.upr-color-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.upr-color-chip { display: flex; align-items: center; gap: 10px; padding: 10px 18px 10px 10px; border: 2px solid var(--upr-gray-200); border-radius: 12px; cursor: pointer; background: white; transition: all 0.2s; min-width: 120px; }
.upr-color-chip:hover { border-color: var(--upr-gray-400); }
.upr-color-chip.selected { border-color: var(--upr-dark); background: var(--upr-gray-100); }
.upr-color-swatch { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--upr-gray-200); flex-shrink: 0; }
.upr-color-name { font-size: 13px; font-weight: 600; letter-spacing: .3px; }

/* ── Repair cards v2 ── */
.upr-repair-label { font-size: 15px; margin-bottom: 12px; }
.upr-repair-label strong { font-weight: 700; }
.upr-repair-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; }
.upr-repair-card { background: white; border: 2px solid var(--upr-gray-200); border-radius: 16px; padding: 20px; cursor: pointer; transition: all 0.3s; }
.upr-repair-card:hover { border-color: var(--upr-gray-400); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.upr-repair-card.selected { border-color: var(--upr-red); background: var(--upr-red-light); }
.upr-rc-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.upr-rc-icon { flex-shrink: 0; }
.upr-rc-emoji { font-size: 24px; }
.upr-rc-img { width: 32px; height: 32px; object-fit: contain; opacity: 0.6; }
.upr-rc-title { flex: 1; }
.upr-rc-title h4 { font-size: 14px; font-weight: 800; letter-spacing: .5px; margin: 0; }
.upr-rc-duration { font-size: 11px; color: var(--upr-gray-400); font-weight: 600; }
.upr-rc-price { text-align: right; flex-shrink: 0; }
.upr-rc-from { display: block; font-size: 10px; color: var(--upr-gray-500); background: var(--upr-gray-100); padding: 2px 6px; border-radius: 4px; margin-bottom: 2px; text-align: center; }
.upr-rc-amount { font-family: var(--upr-font); font-size: 22px; font-weight: 900; color: var(--upr-dark); }
.upr-rc-demand { font-size: 11px; font-weight: 600; color: var(--upr-gray-500); background: var(--upr-gray-100); padding: 4px 8px; border-radius: 4px; }
.upr-rc-demand--link { text-decoration: none; cursor: pointer; transition: background .2s, color .2s; }
.upr-rc-demand--link:hover { background: var(--upr-red, #E70514); color: #fff; }
.upr-repair-card--devis-price { cursor: pointer; }
.upr-repair-card--devis-price:hover { border-color: var(--upr-red, #E70514) !important; box-shadow: 0 4px 16px rgba(231,5,20,.15) !important; }
.upr-repair-card--devis-price.selected { box-shadow: none !important; border-color: #ddd !important; }
.upr-rc-desc { font-size: 13px; color: var(--upr-gray-500); line-height: 1.5; margin: 0; }

/* ── Grade dropdown ── */
.upr-grade-options { margin-top: 12px; border-top: 1px solid var(--upr-gray-200); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.upr-grade-opt { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid var(--upr-gray-200); border-radius: 10px; cursor: pointer; transition: all 0.2s; background: white; }
.upr-grade-opt:hover { border-color: var(--upr-gray-400); background: var(--upr-gray-100); }
.upr-grade-opt.selected { border-color: var(--upr-red); background: var(--upr-red-light); }
.upr-go-info h5 { font-size: 13px; font-weight: 800; margin: 0 0 2px; letter-spacing: .5px; }
.upr-go-info span { font-size: 11px; color: var(--upr-gray-400); }
.upr-go-info p { font-size: 12px; color: var(--upr-gray-500); margin: 4px 0 0; line-height: 1.4; }
.upr-go-price { font-size: 20px; font-weight: 900; white-space: nowrap; flex-shrink: 0; }

/* ── Total bar ── */
.upr-total-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; position: sticky; bottom: 0; background: var(--upr-dark, #1A1A2E); color: white; padding: 16px 24px; border-radius: 16px; margin-top: 24px; z-index: 50; }
.upr-total-info { display: flex; flex-direction: column; gap: 2px; }
.upr-total-count { font-size: 13px; opacity: 0.7; }
.upr-total-amount { font-size: 26px; font-weight: 900; line-height: 1; }
.upr-btn-next { background: var(--upr-red); color: white; border: none; padding: 12px 24px; border-radius: 10px; font-weight: 700; font-size: 15px; cursor: pointer; font-family: var(--upr-font); }
.upr-btn-next:hover { background: var(--upr-red-hover); }

/* ── Step 4: Summary ── */
.upr-summary-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.upr-summary-card { background: var(--upr-gray-100); border-radius: 16px; padding: 24px; }
.upr-summary-card h2 { font-size: 20px; font-weight: 800; margin: 0 0 16px; }
.upr-summary-device { padding: 12px 0; border-bottom: 1px solid var(--upr-gray-200); margin-bottom: 12px; }
.upr-summary-device strong { font-size: 18px; } .upr-summary-device small { color: var(--upr-gray-500); }
.upr-sr-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--upr-gray-200); font-size: 14px; }
.upr-summary-total { display: flex; justify-content: space-between; padding: 16px 0 0; font-size: 18px; }
.upr-summary-total strong { font-size: 24px; font-weight: 900; color: var(--upr-red); }

.upr-summary-booking h3 { font-size: 16px; font-weight: 700; margin: 0 0 12px; }
.upr-booking-options { display: flex; gap: 12px; }
.upr-booking-opt { flex: 1; padding: 16px; border: 2px solid var(--upr-gray-200); border-radius: 12px; cursor: pointer; transition: all 0.2s; }
.upr-booking-opt:hover { border-color: var(--upr-gray-400); }
.upr-booking-opt.active { border-color: var(--upr-red); background: var(--upr-red-light); }
.upr-booking-opt h4 { font-size: 15px; margin: 0 0 4px; } .upr-booking-opt p { font-size: 13px; color: var(--upr-gray-500); margin: 0; }

.upr-form { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.upr-form input { padding: 14px 16px; border: 2px solid var(--upr-gray-200); border-radius: 10px; font-size: 15px; font-family: var(--upr-font); outline: none; }
.upr-form input:focus { border-color: var(--upr-red); }

.upr-btn-pay { display: block; width: 100%; margin-top: 20px; padding: 16px; background: var(--upr-red); color: white; border: none; border-radius: 12px; font-size: 16px; font-weight: 700; font-family: var(--upr-font); cursor: pointer; }
.upr-btn-pay:hover { background: var(--upr-red-hover); }

/* ── Step 5: Payment ── */
.upr-payment-layout { max-width: 600px; margin: 0 auto; }
.upr-payment-summary { text-align: center; margin-bottom: 32px; }
.upr-payment-summary h2 { font-size: 24px; font-weight: 900; margin: 0 0 8px; }
.upr-payment-total { font-size: 28px; font-weight: 900; color: var(--upr-red); margin-top: 12px; }

.upr-payment-methods h3 { font-size: 16px; font-weight: 700; margin: 0 0 16px; }
.upr-pay-option { padding: 20px; border: 2px solid var(--upr-gray-200); border-radius: 12px; margin-bottom: 12px; cursor: pointer; transition: all 0.2s; }
.upr-pay-option:hover { border-color: var(--upr-gray-400); }
.upr-pay-option.active { border-color: var(--upr-red); background: var(--upr-red-light); }
.upr-pay-option h4 { font-size: 16px; font-weight: 700; margin: 0 0 4px; }
.upr-pay-option p { font-size: 13px; color: var(--upr-gray-500); margin: 0; }

.upr-btn-stripe, .upr-btn-boutique { display: block; width: 100%; padding: 14px; background: var(--upr-red); color: white; border: none; border-radius: 10px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: var(--upr-font); margin-top: 12px; }
.upr-btn-stripe:hover, .upr-btn-boutique:hover { background: var(--upr-red-hover); }

/* ── Success ── */
.upr-payment-success { text-align: center; padding: 48px 0; }
.upr-success-icon { font-size: 64px; margin-bottom: 16px; }
.upr-payment-success h2 { font-size: 28px; font-weight: 900; color: var(--upr-green); margin: 0 0 16px; }
.upr-payment-success p { font-size: 15px; color: var(--upr-gray-500); }
.upr-payment-success a { color: var(--upr-red); font-weight: 700; }

/* ── Popover Grades (style Pixouphone - RECOUVRE LA CARTE) ── */
.upr-grade-popover {
    position: absolute;
    background: white;
    border: 2px solid var(--upr-gray-200);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    padding: 0;
    z-index: 1000;
    display: none;
    animation: popoverFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    max-height: 400px;
    overflow-y: auto;
}
.upr-grade-popover.active { display: block; }
@keyframes popoverFadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* Option de grade dans le popover */
.upr-grade-option {
    padding: 18px 20px;
    border-bottom: 1px solid var(--upr-gray-200);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.upr-grade-option:last-child { border-bottom: none; }
.upr-grade-option:hover {
    background: var(--upr-red-light);
}
.upr-grade-option:active {
    transform: scale(0.98);
}

/* Header de l'option */
.upr-go-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.upr-go-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--upr-dark);
    margin: 0;
    letter-spacing: 0.3px;
}
.upr-go-price {
    font-size: 20px;
    font-weight: 900;
    color: var(--upr-dark);
    white-space: nowrap;
}
.upr-grade-option:hover .upr-go-price {
    color: var(--upr-red);
}
.upr-grade-option--devis { cursor: pointer; text-decoration: none; }
.upr-grade-option--devis:hover { background: var(--upr-gray-100); }
.upr-go-price--devis { font-size: 12px !important; font-weight: 600 !important; color: var(--upr-gray-500) !important; background: var(--upr-gray-100); padding: 4px 8px; border-radius: 4px; white-space: normal !important; }
.upr-grade-option--devis:hover .upr-go-price--devis { background: var(--upr-red, #E70514); color: #fff !important; }

/* Durée */
.upr-go-duration {
    font-size: 12px;
    color: #9333EA;
    font-weight: 600;
}

/* Description */
.upr-go-desc {
    font-size: 13px;
    color: var(--upr-gray-600);
    line-height: 1.5;
    margin: 0;
}

/* Badge "à partir de" sur la carte */
.upr-grade-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--upr-gray-800);
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 8px;
    letter-spacing: 0.3px;
}

/* Overlay transparent pour fermer le popover */
.upr-popover-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    display: none;
    pointer-events: none; /* N'empêche pas les clics quand caché */
}
.upr-popover-overlay.active {
    display: block;
    pointer-events: auto; /* Permet les clics quand actif */
}

/* ── Responsive ── */
@media (max-width: 768px) {
    /* Container optimisé */
    .upr-container {
        padding: 0 20px !important;
    }
    
    /* Titre principal - Plus compact */
    .upr-section-title {
        font-size: 1.5rem !important;
        line-height: 1.2 !important;
        margin-bottom: 16px !important;
        padding: 0 !important;
    }
    
    /* Message encourageant au-dessus du champ de recherche */
    .upr-search-hint {
        text-align: center;
        font-size: 0.9rem;
        color: var(--upr-gray-500);
        margin-bottom: 12px;
        font-weight: 500;
    }
    
    /* Step tabs — équilibrés sur mobile, tous visibles sans scroll */
    .upr-step-tabs {
        overflow: hidden;
        flex-wrap: nowrap;
        gap: 0;
        border: 1.5px solid var(--upr-gray-200);
        border-radius: 12px;
        background: var(--upr-white, #fff);
        padding: 0;
        margin-bottom: 16px !important;
    }

    /* Tous les tabs : largeur égale, label masqué */
    .upr-tab {
        flex: 1;
        min-width: 0;
        padding: 10px 4px;
        border: none !important;
        border-right: 1px solid var(--upr-gray-200) !important;
        border-radius: 0 !important;
        gap: 4px;
        justify-content: center;
        box-shadow: none;
        font-size: 11px;
    }
    .upr-tab:last-child { border-right: none !important; }
    .upr-tab .upr-arrow { display: none; }
    .upr-tab-num { width: 22px; height: 22px; font-size: 11px; }

    /* Label masqué sur les tabs inactifs */
    .upr-tab:not(.active) .upr-tab-label { display: none; }

    /* Tab actif : 2× plus large + label visible + soulignement rouge */
    .upr-tab.active {
        flex: 2;
        box-shadow: inset 0 -3px 0 var(--upr-red, #E70514) !important;
        border-color: transparent !important;
    }
    .upr-tab.active .upr-tab-label {
        display: block;
        font-size: 11px;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .upr-tab.completed { opacity: 0.7; }
    
    /* Search bar - MISE EN AVANT */
    .upr-search-bar {
        max-width: 100% !important;
        margin: 0 0 24px !important;
        box-shadow: 0 4px 16px rgba(231, 5, 20, 0.15) !important;
        border: 2px solid var(--upr-red) !important;
    }
    
    .upr-search-bar input {
        padding: 16px !important;
        font-size: 16px !important;
        font-weight: 500;
    }
    
    .upr-search-bar input::placeholder {
        color: var(--upr-gray-400);
        font-weight: 400;
    }
    
    .upr-search-btn {
        width: 56px !important;
        font-size: 20px !important;
        background: var(--upr-red) !important;
    }
    
    .upr-search-btn:active {
        transform: scale(0.95);
    }
    
    /* Dropdown results */
    .upr-dropdown {
        max-width: 100% !important;
        margin: -10px 0 16px !important;
    }
    
    .upr-dd-item {
        padding: 10px 16px !important;
    }
    
    .upr-dd-item img {
        width: 32px !important;
        height: 32px !important;
    }
    
    .upr-dd-item strong {
        font-size: 14px !important;
    }
    
    .upr-dd-item span {
        font-size: 12px !important;
    }
    
    /* Type grid (1 colonne) - COMPACT */
    .upr-type-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        max-width: 100% !important;
    }
    
    .upr-type-card {
        padding: 20px 16px !important;
        min-height: 110px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .upr-type-icon {
        font-size: 2.5rem !important;
        margin-bottom: 10px !important;
    }
    
    .upr-type-card h3 {
        font-size: 1rem !important;
        margin-bottom: 4px !important;
    }
    
    .upr-type-card p {
        font-size: 0.8rem !important;
        line-height: 1.3 !important;
        display: none; /* Masquer la description pour gagner de la place */
    }
    
    /* Brand grid - COMPACT */
    .upr-brand-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        max-width: 100% !important;
    }
    .upr-model-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        max-width: 100% !important;
    }
    .upr-brand-logo { height: 64px !important; padding: 8px 10px !important; }
    .upr-brand-logo img { max-height: 48px !important; }
    .upr-brand-card h4 { font-size: 11px !important; }
    
    .upr-model-card {
        padding: 12px 8px !important;
        min-height: 170px !important;
        gap: 8px !important;
    }
    
    .upr-model-img {
        width: 100px !important;
        height: 100px !important;
    }
    
    .upr-model-placeholder {
        width: 100px !important;
        height: 100px !important;
        font-size: 24px !important;
    }
    
    .upr-model-card h4 {
        font-size: 11px !important;
        line-height: 1.2 !important;
    }
    
    .upr-model-count {
        font-size: 12px !important;
        margin-top: 12px !important;
    }
    
    /* Repair header - COMPACT */
    .upr-repair-header {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 12px;
        margin-bottom: 16px;
        padding: 12px;
        background: var(--upr-gray-100);
        border-radius: 12px;
    }
    
    .upr-repair-model-img {
        width: 56px !important;
        height: 56px !important;
        flex-shrink: 0;
    }
    
    .upr-repair-header h2 {
        font-size: 1.2rem !important;
        line-height: 1.2 !important;
        margin: 0 !important;
    }
    
    .upr-repair-header p {
        font-size: 0.75rem !important;
        margin: 0 !important;
    }
    
    /* Color picker */
    .upr-color-picker {
        margin-bottom: 20px !important;
    }
    
    .upr-color-label {
        font-size: 14px !important;
        margin-bottom: 10px !important;
    }
    
    .upr-color-grid {
        gap: 8px !important;
        justify-content: center;
    }
    
    .upr-color-chip {
        padding: 8px 14px 8px 8px !important;
        min-width: 110px !important;
    }
    
    .upr-color-swatch {
        width: 32px !important;
        height: 32px !important;
    }
    
    .upr-color-name {
        font-size: 12px !important;
    }
    
    /* Repair grid */
    .upr-repair-label {
        font-size: 14px !important;
        margin-bottom: 10px !important;
    }
    
    .upr-repair-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .upr-repair-card {
        padding: 16px !important;
    }
    
    .upr-rc-emoji {
        font-size: 22px !important;
    }
    
    .upr-rc-img {
        width: 28px !important;
        height: 28px !important;
    }
    
    .upr-rc-title h3 {
        font-size: 1rem !important;
    }
    
    .upr-rc-title p {
        font-size: 0.8rem !important;
    }
    
    .upr-rc-price-label {
        font-size: 0.7rem !important;
    }
    
    .upr-rc-price {
        font-size: 1.15rem !important;
    }
    
    /* Boutons navigation */
    .upr-actions {
        flex-direction: column !important;
        gap: 12px !important;
        margin-top: 28px !important;
    }
    
    .upr-btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 14px 24px !important;
        font-size: 0.95rem !important;
    }
    
    /* Summary layout */
    .upr-summary-layout {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .upr-summary-left,
    .upr-summary-right {
        padding: 20px !important;
    }
    
    .upr-summary-title {
        font-size: 1.35rem !important;
        margin-bottom: 16px !important;
    }
    
    .upr-sum-item {
        padding: 12px 0 !important;
    }
    
    .upr-sum-label {
        font-size: 0.85rem !important;
    }
    
    .upr-sum-value {
        font-size: 0.9rem !important;
    }
    
    /* Booking options */
    .upr-booking-options {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .upr-booking-card {
        padding: 16px !important;
    }
    
    .upr-booking-card h4 {
        font-size: 1rem !important;
    }
    
    .upr-booking-card p {
        font-size: 0.85rem !important;
    }
    
    /* Modal */
    .upr-modal-content {
        width: 96% !important;
        max-height: 92vh !important;
        border-radius: 16px !important;
        margin: 20px !important;
    }
    
    .upr-modal-header,
    .upr-modal-body {
        padding: 20px !important;
    }
    
    .upr-modal-header h3 {
        font-size: 1.25rem !important;
    }
    
    /* Grade cards in popover */
    .upr-gc-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    
    .upr-gc-price {
        font-size: 1.5rem !important;
    }
    
    .upr-gc-title h4 {
        font-size: 1rem !important;
    }
    
    .upr-gc-title p {
        font-size: 0.8rem !important;
    }
    
    /* Form fields */
    .upr-form-group {
        margin-bottom: 16px !important;
    }
    
    .upr-form-group label {
        font-size: 0.85rem !important;
        margin-bottom: 6px !important;
    }
    
    .upr-form-group input,
    .upr-form-group select,
    .upr-form-group textarea {
        padding: 12px 14px !important;
        font-size: 0.95rem !important;
    }
}

/* ==========================================
   SÉLECTION MODE & BOUTON PANIER (WooCommerce)
   ========================================== */
.upr-booking-selection {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-sm);
}

.upr-booking-selection h3 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--dark);
}

.upr-booking-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.upr-booking-opt {
    background: var(--white);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
}

.upr-booking-opt:hover {
    border-color: var(--red);
    background: var(--gray-50);
}

.upr-booking-opt.active {
    border-color: var(--red);
    background: rgba(255, 0, 0, 0.05);
}

.upr-booking-opt h4 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 8px;
}

.upr-booking-opt p {
    font-size: 0.9rem;
    color: var(--gray-600);
    margin: 0;
    line-height: 1.4;
}

.upr-btn-cart {
    background: var(--red) !important;
    color: var(--white) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    padding: 14px 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    border-radius: var(--radius-md) !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s !important;
}

.upr-btn-cart:hover {
    background: var(--dark) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* ==========================================
   RESPONSIVE MOBILE
   ========================================== */
@media (max-width: 480px) {
    /* Container très compact */
    .upr-container {
        padding: 0 16px !important;
    }
    
    /* Titre encore plus petit */
    .upr-section-title {
        font-size: 1.35rem !important;
    }
    
    /* Tabs : pas de règle spécifique à 480px, flex: 1 0 110px suffit */
    
    /* Search bar encore plus visible */
    .upr-search-bar input {
        font-size: 15px !important;
    }
    
    /* Type cards ultra compact */
    .upr-type-card {
        padding: 16px 12px !important;
        min-height: 100px !important;
    }
    
    .upr-type-icon {
        font-size: 2.2rem !important;
    }
    
    .upr-type-card h3 {
        font-size: 0.95rem !important;
    }
    
    /* Grilles sur 2 colonnes */
    .upr-brand-grid, .upr-model-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .upr-brand-logo { height: 56px !important; padding: 6px 8px !important; }
    .upr-brand-logo img { max-height: 44px !important; }
    .upr-brand-card h4 { font-size: 10px !important; }
    
    .upr-model-card {
        padding: 10px 6px !important;
        min-height: 170px !important;
        gap: 8px !important;
    }
    
    .upr-model-img {
        width: 100px !important;
        height: 100px !important;
    }
    
    .upr-model-placeholder {
        width: 100px !important;
        height: 100px !important;
        font-size: 22px !important;
    }
    
    .upr-model-card h4 {
        font-size: 10px !important;
    }
    
    /* Repair header très compact */
    .upr-repair-header {
        padding: 10px;
    }
    
    .upr-repair-header h2 {
        font-size: 1.1rem !important;
    }
    
    .upr-repair-model-img {
        width: 50px !important;
        height: 50px !important;
    }
    
    .upr-repair-header p {
        font-size: 0.7rem !important;
    }

    /* Barre de total — layout mobile */
    .upr-total-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 14px 16px;
        border-radius: 14px 14px 0 0; /* collé en bas de l'écran */
        margin-top: 16px;
    }
    .upr-total-info {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .upr-total-amount { font-size: 22px; }
    .upr-btn-cart, .upr-btn-next {
        width: 100% !important;
        justify-content: center !important;
        padding: 14px !important;
        font-size: 15px !important;
    }
}

/* ================================================================
   STEP 4 — BOOKING : CALENDRIER ET CRÉNEAUX
   ================================================================ */

.upr-booking-info-bar {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    background: var(--upr-red-light, #fff5f5);
    border: 1px solid var(--upr-red, #E70514);
    border-radius: 10px;
    padding: 10px 16px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--upr-dark, #1A1A2E);
}

.upr-booking-calendar {
    max-width: 380px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
    overflow: hidden;
    border: 1px solid #eee;
}

.upr-cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--upr-dark, #1A1A2E);
    color: #fff;
}
.upr-cal-nav button {
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 6px;
    transition: background .15s;
}
.upr-cal-nav button:hover { background: rgba(255,255,255,.15); }
.upr-cal-title { font-weight: 700; font-size: 15px; }

.upr-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    padding: 10px;
}
.upr-cal-dow {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #888;
    padding: 6px 0;
    text-transform: uppercase;
}
.upr-cal-day {
    text-align: center;
    padding: 8px 4px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.upr-cal-day:not(.upr-cal-past):hover {
    background: var(--upr-red-light, #fff0f0);
    color: var(--upr-red, #E70514);
}
.upr-cal-day.upr-cal-today {
    border: 2px solid var(--upr-red, #E70514);
}
.upr-cal-day.upr-cal-past {
    color: #ccc;
    cursor: default;
}
.upr-cal-day.upr-cal-selected {
    background: var(--upr-red, #E70514);
    color: #fff;
}
.upr-cal-empty { min-height: 36px; }

/* Créneaux */
.upr-slots-title {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--upr-dark, #1A1A2E);
}
.upr-slots-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.upr-slot-btn {
    padding: 10px 18px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
    color: var(--upr-dark, #1A1A2E);
}
.upr-slot-btn:hover {
    border-color: var(--upr-red, #E70514);
    color: var(--upr-red, #E70514);
}
.upr-slot-btn.selected {
    background: var(--upr-red, #E70514);
    border-color: var(--upr-red, #E70514);
    color: #fff;
}

/* Confirmation créneau */
.upr-booking-confirmed-slot {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f0fff4;
    border: 2px solid #30D158;
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 16px;
}
.upr-bcs-check { font-size: 24px; }
.upr-bcs-info { display: flex; flex-direction: column; gap: 2px; }
.upr-bcs-info strong { font-size: 15px; color: var(--upr-dark, #1A1A2E); }
.upr-bcs-info span { font-size: 13px; color: #555; }

/* Layout 2 colonnes (desktop) */
.upr-booking-layout {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 28px;
    align-items: start;
}

#upr-slots-wrap {
    min-height: 200px;
}

.upr-loading { text-align: center; color: #999; padding: 16px 0; }
.upr-error { color: var(--upr-red, #E70514); padding: 12px; background: #fff5f5; border-radius: 8px; }
.upr-slots-empty { text-align: center; color: #888; padding: 20px 0; font-size: 14px; }
.upr-slots-hint { color: #bbb; font-size: 14px; padding: 40px 0; text-align: center; }

/* Carte "Je ne trouve pas mon appareil" — variante devis */
.upr-model-card--devis {
    border-style: dashed;
    text-decoration: none;
    color: inherit;
}
.upr-model-card--devis:hover {
    border-color: var(--upr-red);
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.upr-model-card--devis .upr-model-placeholder {
    background: var(--upr-gray-100);
    color: var(--upr-dark, #1A1A2E);
}

/* Carte "Autre marque" — variante devis dans la grille de marques */
.upr-brand-card--devis {
    border-style: dashed;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.upr-brand-card--devis:hover {
    border-color: var(--upr-red);
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    transform: translateY(-2px);
}
.upr-brand-card--devis .upr-brand-logo {
    background: var(--upr-gray-100, #f5f5f5);
}
.upr-brand-card--devis .upr-brand-logo span {
    font-size: 28px;
}
.upr-brand-card--devis h4 {
    color: var(--upr-gray-600, #555);
    line-height: 1.3;
}

/* Badge de frais sur une carte de mode (domicile, chronopost…) */
.upr-opt-fee {
    display: inline-block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 700;
    background: var(--upr-red-light);
    color: var(--upr-red);
    padding: 2px 8px;
    border-radius: 20px;
}

/* Écran de confirmation Chronopost (step 4 sans calendrier) */
.upr-chrono-confirm {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 32px 24px;
    background: white;
    border: 2px solid var(--upr-gray-200);
    border-radius: 16px;
    text-align: center;
    max-width: 520px;
    margin: 0 auto;
}
.upr-chrono-icon {
    font-size: 48px;
}
.upr-chrono-confirm h3 {
    font-size: 20px;
    font-weight: 800;
    margin: 0;
}
.upr-chrono-steps {
    text-align: left;
    margin: 0;
    padding-left: 20px;
    color: var(--upr-gray-500, #666);
    font-size: 14px;
    line-height: 1.8;
}
.upr-chrono-fee {
    font-size: 14px;
    margin: 0;
    color: var(--upr-dark);
}

/* Carte "Panne non listée / Demander un devis" dans la grille des réparations */
.upr-repair-card--devis {
    border-style: dashed;
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}
.upr-repair-card--devis:hover {
    border-color: var(--upr-red);
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.upr-rc-devis-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    width: 100%;
}
.upr-rc-devis-icon {
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: var(--upr-gray-100);
    border-radius: 12px;
}
.upr-repair-card--devis h4 {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .5px;
    margin: 0;
    line-height: 1.4;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    .upr-booking-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .upr-booking-calendar { max-width: 100%; }
}