/**
 * Repair Booking Devis – Frontend styles
 * Version 2.0.0
 * Scoped under .rld-app to avoid conflicts with the theme.
 */


/* Variables d'accent globales (secours pour les rares usages hors .rld-app,
   ex. le fond de page). Surchargées par .rld-app / l'option couleur de marque. */
:root { --green: #4F46E5; --green-2: #4338CA; --green-rgb: 79, 70, 229; }

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: var(--rld-font, 'Plus Jakarta Sans'), -apple-system, sans-serif;
    background: radial-gradient(ellipse 1200px 800px at 50% -20%, rgba(var(--green-rgb), 0.08), transparent 60%), #fafafc;
    min-height: 100vh;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.rld-app {
    --navy: #080928;
    --navy-rgb: 8, 9, 40;
    --ink: #080928;
    --navy-soft: #1a1b3a;
    --green: #4F46E5;
    --green-2: #4338CA;
    --green-rgb: 79, 70, 229;
    --green-soft: rgba(var(--green-rgb), 0.15);
    --green-glow: rgba(var(--green-rgb), 0.22);
    --gray-50: #f7f7fb;
    --gray-100: #f0f0f5;
    --gray-200: #e8e8ef;
    --gray-300: #d6d6e0;
    --gray-500: #6b6b7d;
    max-width: 1200px;
    /* Affichage « à plat » identique à la 4.5.7 : pas de panneau/carte autour du
       formulaire. Le fond du thème du site reste visible derrière (dans les espaces).
       Les conteneurs internes sont neutralisés plus bas (anti-fuite du thème). */
    margin: 0 auto;
    padding: 8px 16px 80px;
    /* Neutralize any theme styles that might leak into the plugin container. */
    font-family: var(--rld-font, 'Plus Jakarta Sans'), -apple-system, sans-serif;
    color: var(--ink);
    line-height: 1.5;
}
/* Reset common theme-injected element styles inside the plugin. */
.rld-app h1, .rld-app h2, .rld-app h3, .rld-app h4, .rld-app p, .rld-app span, .rld-app div, .rld-app button, .rld-app a {
    font-family: inherit;
    line-height: inherit;
    /* Force the plugin's navy color over any theme rule that styles links/headings/spans
       in blue (Hostinger Astra/Hello sometimes inject color: blue on inner spans). */
    color: inherit;
}
.rld-app h1, .rld-app h2, .rld-app h3, .rld-app h4 { margin: 0; padding: 0; color: var(--ink) !important; }
.rld-app button { font-family: inherit; }
.rld-app a { color: inherit !important; text-decoration: none; }
/* Common label/title elements that the theme may color in blue. Force them to navy. */
.rld-app .cat-title,
.rld-app .model-brand,
.rld-app .model-name,
.rld-app .model-color-name,
.rld-app .repair-name,
.rld-app .variant-name,
.rld-app .sb-title,
.rld-app .sb-section-title { color: var(--ink) !important; }

/* ── Anti-fuite du thème ──────────────────────────────────────────────────
   Le plugin utilise des classes génériques (.hero, .step, .layout, .field…).
   Certains thèmes WordPress colorent ces classes (fond crème, gris, ombres…),
   ce qui déteignait sur le formulaire. On force ces CONTENEURS en transparent
   et sans ombre/bordure : seul le panneau blanc de .rld-app reste visible, donc
   le rendu est identique quel que soit le thème du site. */
.rld-app .hero,
.rld-app .layout,
.rld-app .main-col,
.rld-app .side-col,
.rld-app .step,
.rld-app .steps,
.rld-app .fields,
.rld-app .field,
.rld-app .row,
.rld-app .categories,
.rld-app .models-grid,
.rld-app .models-head,
.rld-app .modes,
.rld-app .rld-device-type-section,
.rld-app .rld-device-type-grid {
    background: transparent !important;
}
/* .hero et .step percutent des règles du thème qui n'injectent pas QUE du fond :
   ex. nrepair (Hello Elementor + enfant) → .step{ padding:34px 28px 30px; position:relative;
   border; border-radius } et .hero{ overflow:hidden; position:relative }. Ça décale le
   contenu de l'étape et peut faire chevaucher le texte (enfant absolu ré-ancré). On restaure
   le comportement « à plat » de la 4.5.7 : le plugin gère lui-même l'espacement. */
.rld-app .hero,
.rld-app .step {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.rld-app .step { padding: 0 !important; position: static !important; }
.rld-app .hero { position: static !important; overflow: visible !important; }
/* Hello Elementor (reset.css) impose à TOUS les <button> `white-space: nowrap`. Or les
   cartes du plugin (.quick-repair-card, .cat-head, .model-card…) SONT des <button> : leur
   texte ne s'enroulait plus et DÉBORDAIT horizontalement (chevauchement). On rétablit
   l'enroulement normal — comportement identique à la 4.5.7. */
.rld-app button,
.rld-app [type="button"],
.rld-app [type="submit"],
.rld-app [type="reset"] {
    white-space: normal !important;
}
/* Ce même reset (et Elementor) tente aussi d'imposer son arrondi aux boutons.
   On fige l'arrondi VOULU du bouton « Couleur » et des lignes de couleur. */
.rld-app .device-color-btn { border-radius: 12px !important; }
.rld-app .device-color-row { border-radius: 10px !important; }
.rld-app .model-color-row { border-radius: 8px !important; }
/* Bouton « retirer » du résumé/panier : c'est un <button> "discret" (fond transparent,
   croix ×). Les thèmes (Hello Elementor / nrepair) lui collent bordure/padding/fond de
   leur couleur → il apparaissait comme une pastille pleine vide. On force le style voulu. */
.rld-app .sum-line-remove {
    background: none !important;
    border: none !important;
    border-radius: 50% !important;
    padding: 0 !important;
    color: #d63638 !important;
    width: 26px !important;
    height: 26px !important;
    box-shadow: none !important;
    min-width: 0 !important;
}
.rld-app .sum-line-remove:hover, .rld-app .sum-line-remove:active { background: rgba(214, 54, 56, 0.12) !important; }
/* Boutons de l'étape RDV (jours du calendrier, créneaux, flèches) + bouton RETOUR :
   des <button> BLANCS "quiet". Le thème nrepair les remplit de sa couleur ET les
   arrondit en pilules ; le bouton retour perdait sa flèche (padding parasite du thème).
   On fige EXACTEMENT le style 4.5.7 : fond blanc, bordure grise, arrondi voulu ;
   seul l'état sélectionné prend l'accent. */
.rld-app .date-chip,
.rld-app .slot-chip,
.rld-app .slot-arrow,
.rld-app .back-btn {
    background: #fff !important;
    color: var(--ink) !important;
    border: 1.5px solid var(--gray-200) !important;
}
/* padding forcé aussi : sinon Hello Elementor met `.5rem 1rem` → créneaux décalés/mal alignés */
.rld-app .date-chip { border-radius: 10px !important; padding: 8px 4px !important; }
.rld-app .slot-chip { border-radius: 8px !important; padding: 8px 4px !important; }
.rld-app .slot-arrow { border-radius: 8px !important; padding: 0 !important; }
.rld-app .back-btn { border-radius: 14px !important; padding: 0 !important; }
.rld-app .date-chip.selected,
.rld-app .slot-chip.selected {
    background: var(--green) !important;
    border-color: var(--green) !important;
    color: #fff !important;
}
.rld-app .slot-chip.taken {
    background: var(--gray-100) !important;
    color: var(--gray-300) !important;
    border-color: var(--gray-200) !important;
}
/* Bouton « Confirmer » du résumé (.cta) : le thème nrepair le transforme en pilule plate.
   On fige la forme voulue de la 4.5.7 : coins arrondis 14px + ombre 3D basse, accent + texte navy. */
.rld-app .cta {
    border-radius: 14px !important;
    padding: 15px !important;
    background: var(--green) !important;
    color: var(--ink) !important;
    box-shadow: 0 4px 0 0 var(--green-2) !important;
}
.rld-app .cta:hover:not(:disabled) { box-shadow: 0 6px 0 0 var(--green-2) !important; }
/* Même famille : boutons « Continuer » / « Confirmer la réservation » (.submit-btn) */
.rld-app .submit-btn {
    border-radius: 14px !important;
    background: var(--green) !important;
    color: var(--ink) !important;
    box-shadow: 0 4px 0 0 var(--green-2) !important;
}
.rld-app .submit-btn:hover:not(:disabled) { box-shadow: 0 6px 0 0 var(--green-2) !important; }
/* Étape MARQUE : flèches du carrousel (‹ ›) = cercles blancs 48px. Le thème les étire en
   ovales et son padding masquait la flèche → on fige cercle 48px, padding 0, fond blanc. */
.rld-app .carousel-arrow {
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 1.5px solid var(--gray-200) !important;
    color: var(--ink) !important;
    min-width: 0 !important;
}
/* Bouton « Choisir <marque> » = accent, coins 14px + ombre 3D (comme .cta) */
.rld-app .carousel-select-btn {
    border-radius: 14px !important;
    background: var(--green) !important;
    color: var(--ink) !important;
}
/* Balayage : derniers boutons du plugin. On fige surtout arrondi + padding (formes) que
   le thème casse, sans toucher au fond/bordure des boutons à états (sélection). Les
   boutons "icône" sans état (× recherche / fermer overlay) sont figés entièrement. */
.rld-app .brand-search-clear { background: none !important; border: none !important; border-radius: 50% !important; padding: 4px !important; }
.rld-app .hero-card-action { border-radius: 10px !important; padding: 9px 14px !important; }
.rld-oz-btn { border-radius: 12px !important; padding: 13px 20px !important; }
.rld-oz-close { background: none !important; border: none !important; border-radius: 6px !important; padding: 4px 8px !important; }
.rld-mail-confirm-btn { border-radius: 12px !important; }
.rld-cart-drawer-cta { border-radius: 14px !important; }
.rld-sticky-cta { border-radius: 14px !important; }
/* Tiroir panier (mobile) : bouton FERMER (cercle gris) + bouton RETIRER (× discret).
   Le thème les remplissait de sa couleur et son padding écrasait l'icône → on fige. */
.rld-cart-drawer-close {
    background: #f3f4f6 !important; border: none !important; border-radius: 50% !important;
    width: 32px !important; height: 32px !important; padding: 0 !important;
    color: #374151 !important; min-width: 0 !important;
}
.rld-cart-drawer-line-remove {
    background: none !important; border: none !important; padding: 0 !important;
    border-radius: 50% !important; color: #9ca3af !important; min-width: 0 !important;
}

.rld-app .hero { text-align: center; padding: 4px 20px 0; margin-bottom: 0; }
.rld-app .hero-title {
    font-family: var(--rld-font-display, 'Plus Jakarta Sans'), sans-serif;
    font-size: clamp(28px, 4.2vw, 46px);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--ink);
    margin: 0 0 16px;
}
.rld-app .hero-accent {
    display: inline-block;
    position: relative;
    color: var(--green-2);
    font-style: italic;
    transform: rotate(-3deg);
    padding: 0 2px;
}
.rld-app .hero-accent::after {
    content: '';
    position: absolute;
    left: -4px; right: -4px;
    bottom: 4%;
    height: 30%;
    background: var(--green);
    opacity: 0.35;
    z-index: -1;
    border-radius: 4px;
    transform: rotate(-1deg);
}
.rld-app .hero-neuf {
    display: inline-block;
    position: relative;
    white-space: nowrap;
}
.rld-app .hero-neuf::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    bottom: -3px;
    height: 4px;
    background: var(--green);
    border-radius: 4px;
    transform: scaleX(0);
    transform-origin: left center;
    animation: heroUnderline 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}
@keyframes heroUnderline {
    to { transform: scaleX(1); }
}
.rld-app .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--navy);
    color: #fff;
    padding: 7px 16px;
    border-radius: 32px;
    font-family: var(--rld-font-display, 'Plus Jakarta Sans'), sans-serif;
    font-size: clamp(13px, 1.8vw, 17px);
    font-weight: 800;
    letter-spacing: -0.01em;
    transform: rotate(-2deg);
    box-shadow: 0 6px 22px rgba(var(--navy-rgb), 0.15);
    position: relative;
}
.rld-app .hero-badge::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 32px;
    background: var(--green);
    z-index: -1;
    transform: translate(3px, 3px);
}
.rld-app .hero-badge-icon { width: 8px; height: 8px; background: var(--green); border-radius: 50%; animation: pulse 1.8s infinite; }
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--green-rgb), 0.6); }
    50% { box-shadow: 0 0 0 8px rgba(var(--green-rgb), 0); }
}

.rld-app .mini-slider { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 22px auto 20px; font-size: 14px; font-weight: 600; color: var(--gray-500); }
.rld-app .mini-slider-label.active { color: var(--ink); font-weight: 800; }
.rld-app .mini-slider-track { position: relative; width: 120px; height: 2px; background: var(--gray-200); border-radius: 2px; }
.rld-app .mini-slider-dot {
    position: absolute; top: 50%; left: 0;
    transform: translate(-50%, -50%);
    width: 18px; height: 18px;
    background: #fff;
    border: 3px solid var(--green);
    border-radius: 50%;
    transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 0 6px var(--green-glow);
}

/* === Stepper 4 étapes (Marque / Modèle / Réparations / Finalisez) === */
/* Pills horizontales avec un chiffre dans un cercle. État courant = pill noire avec
 * cercle vert. Étapes complétées = pill blanche avec cercle vert + check. Étapes
 * futures = pill blanche grisée. */
.rld-app .rld-stepper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 28px 0 24px;
    flex-wrap: wrap;
}
.rld-app .rld-step-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1.5px solid #e8e8ef;
    padding: 10px 18px 10px 10px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
    color: #6b6b7d;
    transition: all 0.18s;
    line-height: 1.2;
}
.rld-app .rld-step-pill .rld-step-circle {
    width: 28px; height: 28px;
    background: #f0f0f5;
    color: #6b6b7d;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 13px;
    font-family: var(--rld-font, 'Plus Jakarta Sans'), sans-serif;
    flex-shrink: 0;
}
/* État "courant" = pill navy + cercle vert avec chiffre noir */
.rld-app .rld-step-pill.is-current {
    background: var(--navy) !important;
    border-color: var(--navy);
    color: #fff !important;
}
.rld-app .rld-step-pill.is-current .rld-step-circle {
    background: var(--green) !important;
    color: var(--ink) !important;
}
.rld-app .rld-step-pill.is-current .rld-step-name { color: #fff !important; }
/* État "complétée" = pill blanche + cercle vert avec ✓ */
.rld-app .rld-step-pill.is-done {
    color: var(--ink);
    cursor: pointer;
}
.rld-app .rld-step-pill.is-done .rld-step-circle {
    background: var(--green) !important;
    color: var(--ink) !important;
}
.rld-app .rld-step-pill.is-done .rld-step-circle::before {
    content: '';
    width: 14px; height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23080928' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}
.rld-app .rld-step-pill.is-done .rld-step-circle-num { display: none; }
/* on cache aussi le chiffre dans la version actuelle (le chiffre est juste le texte du span) */
.rld-app .rld-step-pill.is-done .rld-step-circle { font-size: 0; }
.rld-app .rld-step-pill.is-done:hover { border-color: var(--green); background: rgba(var(--green-rgb), 0.06); }

@media (max-width: 720px) {
    .rld-app .rld-stepper { gap: 6px; }
    .rld-app .rld-step-pill {
        padding: 8px 12px 8px 8px;
        font-size: 12px;
    }
    .rld-app .rld-step-pill .rld-step-circle {
        width: 22px; height: 22px;
        font-size: 11px;
    }
    .rld-app .rld-step-pill.is-done .rld-step-circle::before {
        width: 11px; height: 11px;
    }
}
@media (max-width: 480px) {
    /* Sur mobile très étroit, on cache le label texte et garde juste les ronds */
    .rld-app .rld-step-pill .rld-step-name { display: none; }
    .rld-app .rld-step-pill { padding: 6px; }
}

.rld-app .layout { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: flex-start; }
.rld-app .layout.with-side { grid-template-columns: 1fr 340px; }
.rld-app .main-col { min-height: 500px; }
.rld-app .side-col { position: sticky; top: 24px; display: none; }
.layout.with-side .side-col { display: block; }
@media (max-width: 900px) {
    .rld-app .layout.with-side { grid-template-columns: 1fr !important; }
    .rld-app .side-col { position: static !important; top: auto !important; margin-top: 24px !important; width: 100% !important; max-width: 100% !important; }
    /* Defeat any theme that sets explicit column widths on flex/grid children. */
    .rld-app .main-col, .rld-app .side-col { min-width: 0 !important; max-width: 100% !important; }
}

.rld-app .step { display: none; animation: fade 0.4s ease-out; }
.rld-app .step.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.rld-app .back-btn { background: #fff; border: 1.5px solid var(--gray-200); width: 44px; height: 44px; border-radius: 14px; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px; transition: all 0.15s; box-shadow: 0 2px 6px rgba(var(--navy-rgb), 0.04); }
.rld-app .back-btn:hover { border-color: var(--green); color: var(--green); transform: translateX(-2px); }

/* BRAND SEARCH */
.rld-app .brand-search-wrap {
    position: relative;
    max-width: 420px;
    margin: 0 auto 18px;
}
.rld-app .brand-search-inner {
    display: flex;
    align-items: center;
    position: relative;
    background: #fff;
    border: 1.5px solid var(--gray-200);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(var(--navy-rgb), 0.05);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.rld-app .brand-search-inner:focus-within {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(var(--green-rgb),0.12);
}
.rld-app .brand-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    pointer-events: none;
    flex-shrink: 0;
}
.rld-app .brand-search-input {
    width: 100%;
    padding: 12px 40px 12px 42px;
    border: none;
    background: transparent;
    font-size: 14px;
    color: var(--ink);
    outline: none;
    border-radius: 14px;
    font-family: inherit;
}
.rld-app .brand-search-input::placeholder { color: var(--gray-400); }
.rld-app .brand-search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--gray-400);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color 0.12s, background 0.12s;
}
.rld-app .brand-search-clear:hover { color: var(--ink); background: var(--gray-100); }
.rld-app .brand-search-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    background: #fff;
    border: 1.5px solid var(--green);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(var(--navy-rgb), 0.10);
    z-index: 200;
    overflow: hidden;
    max-height: 260px;
    overflow-y: auto;
}
.rld-app .brand-search-dropdown.open { display: block; }
.rld-app .brand-search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.1s;
}
.rld-app .brand-search-item:hover { background: var(--gray-50, #f8f9fa); }
.rld-app .brand-search-logo {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.rld-app .brand-search-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}
.rld-app .brand-search-no-result {
    padding: 14px 16px;
    font-size: 13px;
    color: var(--gray-400);
    font-style: italic;
    text-align: center;
}

/* BRAND CAROUSEL */
.rld-app .brand-carousel {
    position: relative;
    height: 440px;
    perspective: 1600px;
    transform-style: preserve-3d;
    margin-bottom: 8px;
    --ambient: rgba(var(--green-rgb), 0.12);
}
.rld-app .brand-carousel::before {
    content: '';
    position: absolute;
    /* Deborde largement hors du carousel pour un halo plus doux et sans demarcation */
    left: -50vw;
    right: -50vw;
    top: -100px;
    bottom: -100px;
    background:
        radial-gradient(ellipse 60vw 400px at 50% 50%, var(--ambient), transparent 70%);
    pointer-events: none;
    /* Au-dessus des cartes pour que le halo teinté reste visible meme sur la carte centrale blanche */
    z-index: 20;
    mix-blend-mode: multiply;
}
.rld-app .carousel-track {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d !important;
    z-index: 1;
}

.rld-app .brand-3d {
    position: absolute;
    width: 280px;
    height: 340px;
    background: #fff;
    border-radius: 28px;
    border: 1.5px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.5s ease,
                border-color 0.3s,
                box-shadow 0.4s;
    backface-visibility: hidden;
    user-select: none;
    padding: 36px 24px 24px;
    overflow: hidden;
}

/* Subtle gradient on every card */
.rld-app .brand-3d::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--brand-tint, rgba(var(--navy-rgb), 0.03)) 0%, transparent 55%);
    pointer-events: none;
    z-index: 0;
}

.rld-app .brand-3d-header {
    font-family: var(--rld-font, 'Plus Jakarta Sans'), sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    position: relative;
    z-index: 1;
}

.rld-app .brand-3d-logo {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
    z-index: 1;
}
.brand-3d-logo svg { width: 100px; height: 100px; }
.brand-3d-logo .brand-wordmark {
    font-family: var(--rld-font-display, 'Plus Jakarta Sans'), sans-serif;
    font-size: 34px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.03em;
}

.rld-app .brand-3d-name {
    font-family: var(--rld-font-display, 'Plus Jakarta Sans'), sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
    position: relative;
    z-index: 1;
    margin-bottom: 4px;
}

.rld-app .brand-3d-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--gray-50);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    color: var(--gray-500);
    letter-spacing: 0.4px;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    transition: all 0.3s;
}

/* Center card — active state */
.rld-app .brand-3d.center {
    border-color: transparent;
    box-shadow:
        0 30px 60px -15px rgba(var(--navy-rgb), 0.25),
        0 0 0 2px var(--green);
    z-index: 10;
}
.rld-app .brand-3d.center::before {
    background: linear-gradient(180deg, var(--brand-tint, rgba(var(--green-rgb),0.08)) 0%, transparent 60%);
}
.brand-3d.center .brand-3d-tag {
    background: var(--green);
    color: var(--ink);
    font-weight: 800;
}

/* Side cards: fully opaque and readable. On immediate neighbors (offset 1), keep name+tag visible
   like the target design. On further cards (offset 2+), hide them to keep the view clean. */
.rld-app .brand-3d:not(.center) {
    opacity: 1;
    filter: none;
    background: #fff;
}
.rld-app .brand-3d:not(.center) .brand-3d-header,
.rld-app .brand-3d:not(.center) .brand-3d-logo,
.rld-app .brand-3d:not(.center) .brand-3d-name,
.rld-app .brand-3d:not(.center) .brand-3d-tag {
    opacity: 1;
    visibility: visible;
}

/* "Autre marque" card: dashed + icon in a dashed circle, light green tint by default. */
.rld-app .brand-3d.is-other { --brand-tint: rgba(var(--green-rgb), 0.08); }
.rld-app .brand-3d.is-other .brand-other-plus {
    width: 108px;
    height: 108px;
    border-radius: 50%;
    border: 3px dashed var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--green);
    background: #fff;
    transition: all 0.25s;
}
.rld-app .brand-3d.is-other.center .brand-other-plus {
    background: var(--green-soft);
    border-color: var(--green);
    box-shadow: 0 10px 24px rgba(var(--green-rgb), 0.22);
}
.rld-app .brand-3d.is-other .brand-3d-tag {
    background: transparent;
    border: 1.5px solid var(--gray-200);
    color: var(--gray-500);
}
.rld-app .brand-3d.is-other.center .brand-3d-tag {
    background: var(--green);
    color: var(--ink);
    border-color: transparent;
    font-weight: 800;
    box-shadow: 0 4px 14px rgba(var(--green-rgb), 0.35);
}

/* Carousel arrows */
.rld-app .carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    border: 1.5px solid var(--gray-200);
    width: 48px; height: 48px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    box-shadow: 0 8px 24px rgba(var(--navy-rgb), 0.1);
    z-index: 30;
    transition: all 0.2s;
}
.rld-app .carousel-arrow:hover {
    border-color: var(--green);
    color: var(--green);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 10px 30px rgba(var(--green-rgb), 0.25);
}
.rld-app .carousel-arrow:active {
    transform: translateY(-50%) scale(0.95);
}
.rld-app .carousel-arrow.left { left: max(calc(50% - 500px), 12px); }
.rld-app .carousel-arrow.right { right: max(calc(50% - 500px), 12px); }

/* Pagination dots */
.rld-app .carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
}
.rld-app .carousel-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--gray-300);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all 0.25s ease;
}
.rld-app .carousel-dot.active {
    width: 24px;
    border-radius: 5px;
    background: var(--green);
}
.carousel-dot:hover:not(.active) { background: var(--gray-500); }

.rld-app .carousel-select-hint {
    text-align: center;
    color: var(--gray-500);
    font-size: 13px;
    margin: 14px 0 0;
    font-weight: 500;
}
.carousel-select-hint kbd {
    display: inline-block;
    padding: 2px 8px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    font-family: var(--rld-font, 'Plus Jakarta Sans'), sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--ink);
    box-shadow: 0 1px 0 var(--gray-200);
    margin: 0 2px;
}
.rld-app .carousel-select-btn {
    display: flex;
    margin: 22px auto 0;
    padding: 16px 38px;
    background: var(--green);
    color: var(--ink);
    border: none;
    border-radius: 14px;
    font-family: inherit;
    font-weight: 800;
    font-size: 16px;
    cursor: pointer;
    align-items: center;
    gap: 12px;
    transition: all 0.2s;
    box-shadow: 0 4px 0 0 var(--green-2), 0 10px 24px rgba(var(--green-rgb), 0.25);
}
.rld-app .carousel-select-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 0 var(--green-2), 0 14px 30px rgba(var(--green-rgb), 0.35);
}
.rld-app .carousel-select-btn:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 0 var(--green-2), 0 6px 14px rgba(var(--green-rgb), 0.2);
}

/* MODELS */
.models-head { max-width: 640px; margin: 0 auto 32px; text-align: center; }
.search-big { width: 100%; padding: 18px 24px; border: 2px solid var(--gray-200); border-radius: 16px; font-family: inherit; font-size: 16px; color: var(--ink); background: #fff; outline: none; transition: all 0.15s; box-shadow: 0 2px 10px rgba(var(--navy-rgb), 0.04); }
.search-big::placeholder { color: #a0a0b0; }
.search-big:focus { border-color: var(--green); box-shadow: 0 0 0 6px var(--green-glow); }
.models-count-row { display: flex; justify-content: space-between; align-items: center; margin: 24px 0 18px; }
.models-count-txt { font-size: 14px; color: var(--gray-500); font-weight: 500; }
.models-count-num { color: var(--ink); font-weight: 800; }
.models-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1100px) { .models-grid { grid-template-columns: repeat(3, 1fr); } }
.model-card { background: #fff; border: 1.5px solid var(--gray-200); border-radius: 20px; cursor: pointer; font-family: inherit; position: relative; box-shadow: 0 1px 2px rgba(var(--navy-rgb), 0.04), 0 5px 14px rgba(var(--navy-rgb), 0.05); transition: transform 0.24s cubic-bezier(0.23,1,0.32,1), box-shadow 0.24s cubic-bezier(0.23,1,0.32,1), border-color 0.2s ease; }
.model-card:active { transform: scale(0.985); transition-duration: 0.1s; }
@media (hover: hover) and (pointer: fine) {
    .model-card:hover { transform: translateY(-4px); border-color: rgba(var(--green-rgb),0.5); box-shadow: 0 2px 4px rgba(var(--navy-rgb), 0.05), 0 16px 34px rgba(var(--green-rgb), 0.17); }
}
.model-card.open {
    border-color: var(--green);
    box-shadow: 0 14px 40px rgba(var(--navy-rgb), 0.15);
    transform: none;
    z-index: 50;
}
.model-main { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 22px 16px 16px; min-height: 200px; }
.model-photo-ph { width: 72px; height: 104px; background: linear-gradient(135deg, #f7f7fb 0%, #eaeaf2 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--gray-300); }
.model-name { font-weight: 700; font-size: 15px; line-height: 1.25; color: var(--ink); }
.model-sm-codes { font-size: 11.5px; font-weight: 600; color: var(--green-500, var(--green)); margin-top: 3px; letter-spacing: 0.02em; }
.model-card.custom { border-style: dashed; background: linear-gradient(135deg, #fff 0%, var(--gray-50) 100%); padding: 24px 16px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; min-height: 220px; }

/* Colors row (dots) */
.model-colors-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 2px;
    flex-wrap: wrap;
}
.model-color-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.1);
}
.model-color-more {
    font-size: 10px;
    color: var(--gray-500);
    font-weight: 700;
    margin-left: 2px;
}

/* Color picker panel — ABSOLUTE overlay so it doesn't push neighbors.
   Same width as the card (left: 0, right: 0). */
.model-colors-panel {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #fff;
    border: 2px solid var(--green);
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(var(--navy-rgb), 0.22);
    z-index: 100;
    overflow: hidden;
    animation: colorPanelIn 0.22s ease-out;
}
.model-colors-panel::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 14px;
    height: 14px;
    background: #fff;
    border-left: 2px solid var(--green);
    border-top: 2px solid var(--green);
    border-radius: 2px 0 0 0;
}
@keyframes colorPanelIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}
.model-card.open .model-colors-panel { display: block; }
.model-colors-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--ink);
    font-weight: 800;
    padding: 14px 16px 8px;
    text-align: center;
}
.model-colors-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 8px 10px;
}
.model-color-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: none;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    width: 100%;
    transition: background 0.12s;
}
.model-color-row:hover {
    background: var(--gray-50);
}
.model-color-swatch {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.1);
    flex-shrink: 0;
}
.model-color-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}
/* Anti-fuite du thème : toutes ces commandes de couleur sont des <button>. Certains
   thèmes remplissent TOUS les boutons avec leur couleur d'accent (cas de nrepair → jaune).
   On force le style "quiet" voulu (fond transparent/blanc, texte navy) quel que soit le thème. */
.rld-app .model-color-row {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--ink) !important;
}
.rld-app .model-color-row:hover { background: var(--gray-50) !important; }
/* Idem pour le bouton "Couleur" de la fiche appareil et sa liste déroulante */
.rld-app .device-color-btn {
    background: #fff !important;
    color: var(--ink) !important;
}
.rld-app .device-color-row {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--ink) !important;
}
.rld-app .device-color-row:hover { background: var(--gray-50) !important; }
.rld-app .device-color-row.is-selected { background: var(--green-glow) !important; color: var(--ink) !important; }

/* REPAIRS */
.device-head { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; padding: 18px 22px; background: #fff; border: 2px solid var(--gray-200); border-radius: 18px; position: relative; }
.device-photo { width: 54px; height: 66px; background: linear-gradient(135deg, #f7f7fb 0%, #eaeaf2 100%); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--gray-300); flex-shrink: 0; }
.device-info { flex: 1; min-width: 0; }
.device-title { font-family: var(--rld-font-display, 'Plus Jakarta Sans'), sans-serif; font-size: 24px; font-weight: 800; margin: 0; letter-spacing: -0.02em; }
.device-sub { margin: 4px 0 0; color: var(--green); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }

/* Bouton "Couleur" sur la device-head + panneau dépliant.
   Réutilise visuellement le langage de .model-colors-panel mais sans toucher dessus. */
.device-color-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px 9px 10px;
    background: #fff;
    border: 2px solid var(--gray-200);
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
    flex-shrink: 0;
}
.device-color-btn:hover { border-color: var(--green); box-shadow: 0 4px 14px rgba(var(--green-rgb), 0.18); }
.device-color-btn.is-open { border-color: var(--green); box-shadow: 0 0 0 4px var(--green-glow); }
.device-color-btn svg { color: var(--gray-500); transition: transform 0.18s; }
.device-color-btn.is-open svg { transform: rotate(180deg); }
.device-color-swatch {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid rgba(0,0,0,0.1);
    flex-shrink: 0;
    background: #eaeaf2;
}
.device-color-label { letter-spacing: 0.02em; }

.device-color-panel {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 18px;
    min-width: 240px;
    max-width: 320px;
    background: #fff;
    border: 2px solid var(--green);
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(var(--navy-rgb), 0.22);
    z-index: 60;
    overflow: hidden;
    animation: colorPanelIn 0.22s ease-out;
}
.device-color-panel.is-open { display: block; }
.device-color-panel::before {
    content: '';
    position: absolute;
    top: -8px;
    right: 22px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-top: 2px solid var(--green);
    border-left: 2px solid var(--green);
    transform: rotate(45deg);
}
.device-color-panel-title {
    font-size: 11px;
    font-weight: 800;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 14px 16px 8px;
    text-align: center;
}
.device-color-panel-list {
    display: flex;
    flex-direction: column;
    max-height: 280px;
    overflow-y: auto;
    padding: 4px 8px 10px;
}
.device-color-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    text-align: left;
    transition: background 0.12s;
}
.device-color-row:hover { background: var(--gray-50); }
.device-color-row.is-selected { background: var(--green-glow); color: var(--ink); }
.device-color-row .device-color-row-swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid rgba(0,0,0,0.1);
    flex-shrink: 0;
}
.device-color-row .device-color-row-check {
    margin-left: auto;
    color: var(--green);
    opacity: 0;
    transition: opacity 0.12s;
}
.device-color-row.is-selected .device-color-row-check { opacity: 1; }

.rld-app .section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.rld-app .section-title { display: flex; align-items: center; font-weight: 600; color: var(--gray-500); font-size: 14px; white-space: nowrap; }
.rld-app .section-title strong { color: var(--ink); font-weight: 800; }
.rld-app .green-dot { display: block; width: 8px; height: 8px; background: var(--green); border-radius: 50%; margin-right: 10px; flex-shrink: 0; }

.tva-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; color: var(--ink); font-weight: 700; font-size: 13px; }
.tva-toggle input { display: none; }
.switch { width: 38px; height: 22px; background: var(--gray-300); border-radius: 11px; position: relative; transition: background 0.2s; }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform 0.2s; }
.tva-toggle input:checked + .switch { background: var(--green); }
.tva-toggle input:checked + .switch::after { transform: translateX(16px); }

/* Quick-action repairs (Diagnostic, Désoxydation) — shown above the regular categories */
.quick-repairs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 18px;
}
@media (max-width: 600px) { .quick-repairs-grid { grid-template-columns: 1fr; } }
.quick-repair-card {
    background: #fff;
    border: 2px solid var(--gray-200);
    border-radius: 16px;
    padding: 16px 18px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(var(--navy-rgb), 0.04), 0 4px 12px rgba(var(--navy-rgb), 0.04);
    transition: transform 0.24s cubic-bezier(0.23,1,0.32,1), box-shadow 0.24s cubic-bezier(0.23,1,0.32,1), border-color 0.2s ease;
    font-family: inherit;
    text-align: left;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    position: relative;
}
.quick-repair-card:active { transform: scale(0.99); transition-duration: 0.1s; }
@media (hover: hover) and (pointer: fine) {
    .quick-repair-card:hover {
        border-color: rgba(var(--green-rgb),0.5);
        transform: translateY(-3px);
        box-shadow: 0 2px 4px rgba(var(--navy-rgb), 0.05), 0 12px 26px rgba(var(--green-rgb), 0.15);
    }
}
.quick-repair-card.selected {
    border-color: var(--green);
    background: #fff;
    box-shadow: 0 0 0 4px var(--green-glow);
}
.quick-repair-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--gray-50);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    flex-shrink: 0;
}
.quick-repair-body { flex: 1; min-width: 0; }
.quick-repair-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 4px;
}
.quick-repair-name { font-size: 17px; font-weight: 800; color: var(--ink); }
.quick-repair-badge {
    padding: 5px 12px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 13px;
    background: var(--green);
    color: #fff;
    white-space: nowrap;
    flex-shrink: 0;
}
.quick-repair-badge.free { background: var(--green-soft); color: var(--green); }
.quick-repair-badge.ondemand { background: var(--gray-100); color: var(--ink); font-size: 11px; padding: 6px 10px; letter-spacing: 0.3px; }
.quick-repair-duration {
    font-size: 11px;
    font-weight: 700;
    color: var(--green);
    letter-spacing: 0.6px;
    margin-bottom: 8px;
}
.quick-repair-desc { font-size: 13px; color: var(--gray-500); line-height: 1.5; }

.categories { display: flex; flex-direction: column; gap: 10px; }
.cat { background: #fff; border: 1.5px solid var(--gray-200); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(var(--navy-rgb), 0.03), 0 4px 12px rgba(var(--navy-rgb), 0.04); transition: border-color 0.2s ease, box-shadow 0.24s cubic-bezier(0.23,1,0.32,1); }
.cat-head:active { transform: scale(0.995); transition: transform 0.1s ease; }
.cat.open { border-color: var(--green); box-shadow: 0 6px 20px rgba(var(--green-rgb), 0.12); }
.cat-head { display: flex; align-items: center; gap: 14px; padding: 16px 20px; cursor: pointer; user-select: none; background: #fff; border: none; width: 100%; font-family: inherit; text-align: left; position: relative; }
.cat-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--gray-50); display: flex; align-items: center; justify-content: center; color: var(--ink); flex-shrink: 0; transition: all 0.2s; }
.cat-icon svg { width: 22px; height: 22px; display: block; }
.cat.open .cat-icon { background: var(--green-soft); }
.cat-title-wrap { display: flex; align-items: center; gap: 12px; flex: 1; }
.cat-title { font-weight: 800; font-size: 16px; }
.cat-count { background: var(--green-soft); color: var(--ink); padding: 4px 12px; border-radius: 10px; font-size: 12px; font-weight: 700; transition: all 0.2s; }
.cat.has-selection .cat-count { background: var(--green); color: #fff; }
.cat-chevron { width: 32px; height: 32px; border-radius: 10px; background: var(--green-soft); display: flex; align-items: center; justify-content: center; color: var(--ink); transition: transform 0.25s; flex-shrink: 0; }
.cat.open .cat-chevron { transform: rotate(180deg); }
.cat.selected::after { content: ''; position: absolute; right: 64px; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 4px rgba(var(--green-rgb),0.25); }
.cat-body { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.cat.open .cat-body { max-height: 2000px; }
.cat-content { padding: 4px 16px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 720px) { .cat-content { grid-template-columns: 1fr; } }

.repair-card { background: var(--gray-50); border: 2px solid transparent; border-radius: 12px; padding: 14px; cursor: pointer; transition: all 0.15s; font-family: inherit; text-align: left; display: flex; flex-direction: column; gap: 8px; min-height: 92px; position: relative; }
.repair-card:hover { border-color: var(--green); background: #fff; }
.repair-card.selected { border-color: var(--green); background: #fff; box-shadow: 0 0 0 4px var(--green-glow); }
.repair-card.selected::after {
    content: '';
    position: absolute;
    top: -8px;
    right: -8px;
    width: 26px; height: 26px;
    background: var(--green);
    border: 3px solid #fff;
    border-radius: 50%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23080928' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-size: 16px;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 4px 12px rgba(var(--green-rgb), 0.4);
}
.repair-label { font-weight: 800; font-size: 14px; line-height: 1.25; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.repair-desc { color: var(--gray-500); font-size: 11.5px; line-height: 1.35; }
.repair-price-tag { align-self: flex-start; background: var(--green-soft); color: var(--ink); padding: 5px 10px; border-radius: 8px; font-weight: 800; font-size: 14px; margin-top: auto; }
.repair-price-tag.free { background: var(--green); color: #fff; font-size: 11px; padding: 3px 9px; }
.repair-price-tag.ondemand { background: var(--gray-100); color: var(--ink); font-size: 11.5px; font-weight: 700; padding: 5px 10px; letter-spacing: 0.1px; }
.variant-price.ondemand { color: var(--gray-500); font-weight: 700; font-size: 10.5px; font-family: var(--rld-font, 'Plus Jakarta Sans'), sans-serif; letter-spacing: 0.01em; }
.hydrogel-opt-promo.ondemand { color: var(--ink); font-size: 13px; }

/* ============ VARIANTS SUB-MENU ============ */
.repair-group {
    display: flex;
    flex-direction: column;
    grid-column: span 2;
}
@media (max-width: 720px) { .repair-group { grid-column: span 1; } }

.repair-card.has-variants {
    min-height: auto;
}
.repair-card.has-variants .repair-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: auto;
}
.repair-card.has-variants.expanded .repair-group-chevron { transform: rotate(180deg); }
.repair-group-chevron { color: var(--gray-500); transition: transform 0.25s; }

.repair-quality-badge {
    background: var(--green-soft);
    color: var(--ink);
    padding: 3px 9px;
    border-radius: 8px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.variants-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, margin 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 0;
}
.variants-panel.open {
    max-height: 600px;
    margin-top: 8px;
}

.variant-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 2px solid var(--gray-200);
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    text-align: left;
    position: relative;
}
.variant-row:hover { border-color: var(--green); }
.variant-row.selected {
    border-color: var(--green);
    background: rgba(var(--green-rgb), 0.06);
    box-shadow: 0 0 0 3px var(--green-glow);
}
.variant-row.selected::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    width: 20px; height: 20px;
    background: var(--green);
    border-radius: 50%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23080928' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-size: 12px;
    background-position: center;
    background-repeat: no-repeat;
}
.variant-row.selected .variant-price { margin-right: 28px; }
.variant-info { flex: 1; min-width: 0; }
.variant-name { font-weight: 800; font-size: 14px; color: var(--ink); }
.variant-desc { font-size: 11px; color: var(--gray-500); margin-top: 2px; line-height: 1.3; }
.variant-price {
    background: var(--green-soft);
    color: var(--ink);
    padding: 5px 10px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ============ MODALES (Hydrogel + Marque sur-mesure) — REDESIGNED v3.4 ============
   Repair Booking DA: navy + green, Manrope/Plus Jakarta Sans, badge tournant, surligneur fluo.
   Class names preserved (.hydrogel-*, .field, .row, .success-ring, .error-msg)
   so the existing HTML and JS continue to work without modifications. */

html body .hydrogel-overlay {
    /* Redefine all CSS variables locally on the overlay so they keep working
       even after we appendChild() the overlay to <body>. (The original
       variables were scoped to .rld-app which the overlay no longer descends
       from at runtime.) */
    --navy: #080928;
    --navy-rgb: 8, 9, 40;
    --ink: #080928;
    --navy-soft: #1a1b3a;
    --green: #4F46E5;
    --green-2: #4338CA;
    --green-rgb: 79, 70, 229;
    --green-soft: rgba(var(--green-rgb), 0.15);
    --green-glow: rgba(var(--green-rgb), 0.22);
    --gray-50: #f7f7fb;
    --gray-100: #f0f0f5;
    --gray-200: #e8e8ef;
    --gray-300: #d6d6e0;
    --gray-500: #6b6b7d;

    position: fixed !important; inset: 0 !important;
    background: rgba(var(--navy-rgb), 0.62) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px) !important;
    display: none !important;
    align-items: center !important; justify-content: center !important;
    z-index: 1000 !important;
    padding: 20px !important;
    animation: overlayIn 0.25s ease-out !important;
}
html body .hydrogel-overlay.visible { display: flex !important; }
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn {
    from { opacity: 0; transform: translateY(20px) scale(0.96) !important; }
    to   { opacity: 1; transform: none !important; }
}

html body .hydrogel-modal {
    background: #fff !important;
    border-radius: 24px !important;
    box-shadow: 0 30px 80px -30px rgba(var(--navy-rgb), 0.4), 0 0 0 1px rgba(var(--navy-rgb), 0.04) !important;
    max-width: 720px !important; width: 100% !important;
    max-height: 92vh !important; overflow-y: auto !important;
    position: relative !important;
    animation: modalIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

html body .hydrogel-close {
    position: absolute !important;
    top: 18px !important; right: 18px !important;
    width: 38px !important; height: 38px !important;
    border-radius: 50% !important;
    background: var(--gray-100) !important; color: var(--ink) !important;
    border: none !important; cursor: pointer;
    /* padding:0 obligatoire : Hello Elementor impose `button { padding:.5rem 1rem }`,
       ce qui écrasait/décentrait la croix × du bouton fermer. */
    padding: 0 !important; line-height: 1 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    transition: all 0.15s;
    z-index: 10 !important;
}
html body .hydrogel-close:hover { background: var(--navy) !important; color: #fff !important; transform: rotate(90deg) !important; }
html body .hydrogel-close svg { width: 16px !important; height: 16px !important; }
/* Le modal est hors de .rld-app → l'armure `.rld-app button` ne l'atteint pas. On
   rétablit ici l'enroulement du texte (Hello Elementor force nowrap sur les <button>). */
html body .hydrogel-overlay button,
html body .hydrogel-overlay [type="button"],
html body .hydrogel-overlay [type="submit"] {
    white-space: normal !important;
}

/* ========== HEADER (commun aux 2 modales) ========== */
html body .hydrogel-hero {
    text-align: center !important;
    padding: 38px 28px 22px !important;
    position: relative !important;
}
html body .hydrogel-tag {
    display: inline-flex !important; align-items: center !important; gap: 8px !important;
    background: var(--navy) !important; color: #fff !important;
    padding: 7px 16px !important; border-radius: 32px !important;
    font-family: var(--rld-font-display, 'Plus Jakarta Sans'), sans-serif !important;
    font-size: 12px !important; font-weight: 800 !important;
    letter-spacing: 0.04em !important; text-transform: uppercase !important;
    transform: rotate(-2deg) !important;
    box-shadow: 0 6px 22px rgba(var(--navy-rgb), 0.15) !important;
    position: relative !important; isolation: isolate !important; z-index: 1 !important;
    margin-bottom: 22px !important;
    line-height: 1.3 !important;
}
html body .hydrogel-tag::before {
    content: ''; position: absolute !important; inset: 0 !important;
    border-radius: 32px !important;
    background: var(--green) !important; z-index: -1 !important;
    transform: translate(3px, 3px) !important;
}
html body .hydrogel-tag-pulse {
    display: inline-block !important;
    width: 7px !important; height: 7px !important;
    background: var(--green) !important; border-radius: 50% !important;
    animation: hydrogel-pulse 1.8s infinite !important;
    flex-shrink: 0;
}
@keyframes hydrogel-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--green-rgb), 0.6) !important; }
    50% { box-shadow: 0 0 0 8px rgba(var(--green-rgb), 0) !important; }
}

/* Decorative <div class="hydrogel-icon-wrap"> in the existing HTML.
   Hidden in the new design — the badge alone is enough up top. */
html body .hydrogel-icon-wrap { display: none !important; }

html body .hydrogel-title {
    font-family: var(--rld-font-display, 'Plus Jakarta Sans'), sans-serif !important;
    font-size: clamp(22px, 3vw, 30px) !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.025em !important;
    color: var(--ink) !important;
    margin: 0 0 12px !important;
}
html body .hydrogel-title .hl {
    font-style: italic;
    color: var(--green-2) !important;
    display: inline-block !important;
    transform: rotate(-1.5deg) !important;
    position: relative !important;
    font-weight: 900 !important;
}
html body .hydrogel-title .hl::after {
    content: ''; position: absolute !important;
    left: -3px !important; right: -3px !important; bottom: 4% !important;
    height: 28% !important; background: var(--green) !important; opacity: 0.32;
    z-index: -1 !important; border-radius: 4px !important;
    transform: rotate(-1deg) !important;
}
html body .hydrogel-quip {
    font-size: 15px !important;
    color: var(--gray-500) !important;
    line-height: 1.55 !important;
    font-weight: 500 !important;
    max-width: 520px !important;
    margin: 0 auto !important;
}
html body .hydrogel-quip strong { color: var(--ink) !important; font-weight: 800 !important; }
html body .hydrogel-quip em {
    font-style: normal; font-weight: 800 !important;
    color: var(--ink) !important;
}
html body .hydrogel-quip .price-strike {
    color: #ef4444 !important;
    font-weight: 800 !important;
}

/* ========== BODY ========== */
html body .hydrogel-body { padding: 22px 36px 32px !important; }

/* Promo bar (hydrogel only) */
html body .hydrogel-promo-bar {
    display: flex !important; align-items: center !important; gap: 14px !important;
    background: var(--green-soft) !important;
    border: 1.5px solid var(--green) !important;
    border-radius: 14px !important;
    padding: 14px 18px !important;
    margin: 0 0 22px !important;
}
html body .hydrogel-promo-icon {
    flex-shrink: 0;
    width: 28px !important; height: 28px !important;
    background: var(--green) !important; color: var(--ink) !important;
    border-radius: 50% !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
html body .hydrogel-promo-icon svg { width: 14px !important; height: 14px !important; }
html body .hydrogel-promo-txt {
    font-size: 13.5px !important; line-height: 1.45 !important;
    color: var(--ink) !important; font-weight: 600 !important;
}
html body .hydrogel-promo-txt strong { font-weight: 900 !important; color: var(--ink) !important; }

/* Hydrogel grid */
html body .hydrogel-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 22px !important;
    width: 100% !important;
}
@media (max-width: 560px) { html body .hydrogel-grid { grid-template-columns: 1fr !important; } }

html body .hydrogel-opt {
    /* Override theme button defaults that may break grid layout. */
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background: #fff !important;
    border: 1.5px solid var(--gray-200) !important;
    border-radius: 16px !important;
    padding: 18px 20px !important;
    margin: 0 !important;
    cursor: pointer;
    transition: all 0.2s;
    position: relative !important;
    text-align: left !important;
    user-select: none;
    font-family: var(--rld-font, 'Plus Jakarta Sans'), sans-serif !important;
    color: var(--ink) !important;
    line-height: 1.5 !important;
}
html body .hydrogel-opt:hover {
    border-color: var(--green) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 28px -16px rgba(var(--navy-rgb), 0.2) !important;
}
html body .hydrogel-opt.selected {
    border-color: var(--green) !important;
    background: linear-gradient(135deg, #fff 0%, var(--green-soft) 100%) !important;
    box-shadow: 0 0 0 3px var(--green-soft) !important;
}
html body .hydrogel-opt.selected::after {
    content: '';
    position: absolute !important;
    top: 14px !important; right: 14px !important;
    width: 22px !important; height: 22px !important;
    background: var(--green) !important;
    border-radius: 50% !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M7 11l3 3 5-6' stroke='%23080928' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat; background-position: center;
}
html body .hydrogel-opt-name {
    font-family: var(--rld-font-display, 'Plus Jakarta Sans'), sans-serif !important;
    font-size: 16px !important; font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    color: var(--ink) !important;
    margin-bottom: 6px !important;
}
html body .hydrogel-opt-desc {
    font-size: 12.5px !important;
    color: var(--gray-500) !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
    margin-bottom: 14px !important;
    min-height: 36px !important;
}
html body .hydrogel-opt-prices {
    display: flex !important; align-items: baseline !important; gap: 8px !important;
    flex-wrap: wrap;
}
html body .hydrogel-opt-strike {
    font-size: 16px !important;
    color: #6b6b7d !important;
    text-decoration: line-through !important;
    text-decoration-color: #ef4444 !important;
    text-decoration-thickness: 2.5px !important;
    font-weight: 700 !important;
    font-family: var(--rld-font-display, 'Plus Jakarta Sans'), sans-serif !important;
    letter-spacing: -0.02em !important;
    opacity: 0.85;
}
html body .hydrogel-opt-promo {
    font-family: var(--rld-font-display, 'Plus Jakarta Sans'), sans-serif !important;
    font-size: 18px !important; font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    color: var(--ink) !important;
}
html body .hydrogel-opt-promo.ondemand {
    font-family: var(--rld-font, 'Plus Jakarta Sans'), sans-serif !important;
    font-size: 13px !important; font-weight: 700 !important;
    color: var(--ink) !important;
}
html body .hydrogel-opt-discount {
    display: inline-block !important;
    background: var(--green) !important;
    color: var(--ink) !important;
    font-family: var(--rld-font, 'Plus Jakarta Sans'), sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.02em !important;
    margin-left: 4px !important;
}
html body .hydrogel-opt-best {
    position: absolute !important;
    top: -8px !important; left: 14px !important;
    background: var(--navy) !important; color: #fff !important;
    font-family: var(--rld-font, 'Plus Jakarta Sans'), sans-serif !important;
    font-size: 10px !important; font-weight: 800 !important;
    padding: 4px 10px !important; border-radius: 999px !important;
    text-transform: uppercase !important; letter-spacing: 0.06em !important;
    box-shadow: 0 4px 10px rgba(var(--navy-rgb), 0.2) !important;
}

/* ========== Actions (boutons en bas) ========== */
html body .hydrogel-actions {
    display: flex !important;
    flex-direction: row-reverse !important;  /* visually puts "Non merci" on the left, "Ajouter" on the right */
    gap: 16px !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap;
    margin-top: 24px !important;
}

html body .hydrogel-btn-skip {
    background: none !important; border: none !important; cursor: pointer;
    font-family: var(--rld-font, 'Plus Jakarta Sans'), sans-serif !important;
    font-weight: 800 !important; font-size: 14px !important;
    color: var(--ink) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    padding: 12px 4px !important;
    transition: opacity 0.15s;
    margin: 0 !important;
}
html body .hydrogel-btn-skip:hover { opacity: 0.65 !important; color: var(--ink) !important; }

html body .hydrogel-btn-add {
    display: inline-flex !important; align-items: center !important; gap: 10px !important;
    background: var(--navy) !important; color: #fff !important;
    font-family: var(--rld-font, 'Plus Jakarta Sans'), sans-serif !important;
    font-weight: 800 !important; font-size: 15px !important;
    padding: 16px 30px !important; border-radius: 999px !important;
    text-decoration: none !important; cursor: pointer; border: none !important;
    transition: all 0.2s;
    position: relative !important; isolation: isolate !important;
    line-height: 1 !important;
}
html body .hydrogel-btn-add::before {
    content: ''; position: absolute !important; inset: 0 !important;
    border-radius: 999px !important;
    background: var(--green) !important; z-index: -1 !important;
    transform: translate(4px, 4px) !important; transition: transform 0.2s;
}
html body .hydrogel-btn-add:hover:not(:disabled) { transform: translate(2px, 2px) !important; color: #fff !important; }
html body .hydrogel-btn-add:hover:not(:disabled)::before { transform: translate(0, 0) !important; }
html body .hydrogel-btn-add:active:not(:disabled) { transform: translate(3px, 3px) !important; }
html body .hydrogel-btn-add:disabled { opacity: 0.55; cursor: not-allowed; filter: grayscale(0.2); }
html body .hydrogel-btn-add svg { width: 16px !important; height: 16px !important; transition: transform 0.2s; }
html body .hydrogel-btn-add:hover:not(:disabled) svg { transform: translateX(3px) !important; }



/* STEP 3 */
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 22px; }
.mode { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; background: #fff; border: 1.5px solid var(--gray-200); border-radius: 18px; padding: 22px 14px 18px; cursor: pointer; box-shadow: 0 1px 2px rgba(var(--navy-rgb), 0.04), 0 5px 14px rgba(var(--navy-rgb), 0.05); transition: transform 0.24s cubic-bezier(0.23,1,0.32,1), box-shadow 0.24s cubic-bezier(0.23,1,0.32,1), border-color 0.2s ease, background 0.2s ease; }
.mode:active { transform: scale(0.98); transition-duration: 0.1s; }
.mode.selected { border-color: var(--green); background: rgba(var(--green-rgb), 0.05); box-shadow: 0 0 0 4px rgba(var(--green-rgb),0.14), 0 12px 26px rgba(var(--green-rgb),0.14); }
.mode-icon { width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(150deg, var(--gray-50), var(--gray-100)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.7); display: flex; align-items: center; justify-content: center; color: var(--ink); flex-shrink: 0; transition: background 0.25s cubic-bezier(0.23,1,0.32,1), color 0.25s ease, transform 0.24s cubic-bezier(0.23,1,0.32,1), box-shadow 0.25s ease; }
.mode.selected .mode-icon { background: linear-gradient(150deg, var(--green), var(--green-2)); color: #fff; box-shadow: 0 6px 16px rgba(var(--green-rgb),0.35); }
@media (hover: hover) and (pointer: fine) {
    .mode:hover { transform: translateY(-4px); border-color: rgba(var(--green-rgb),0.5); box-shadow: 0 2px 4px rgba(var(--navy-rgb), 0.05), 0 14px 30px rgba(var(--green-rgb),0.15); }
    .mode:hover .mode-icon { background: linear-gradient(150deg, var(--green), var(--green-2)); color: #fff; transform: scale(1.06); box-shadow: 0 6px 16px rgba(var(--green-rgb),0.35); }
}
/* mode-body is display:contents on desktop so its children act as direct flex children of .mode */
.mode-body { display: contents; }
.mode-title-sm { font-weight: 800; font-size: 15px; line-height: 1.2; }
.mode-sub-sm { color: var(--gray-500); font-size: 12px; line-height: 1.3; }
.mode-tag { background: var(--green-soft); color: var(--ink); padding: 3px 10px; border-radius: 8px; font-size: 12px; font-weight: 800; }
.mode-tag.free { background: var(--green); color: #fff; }
@media (max-width: 700px) {
    .modes { grid-template-columns: 1fr; gap: 8px; }
    .mode { flex-direction: row; text-align: left; padding: 14px 16px; gap: 14px; align-items: center; }
    .mode:hover { transform: none; }
    .mode-body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
    .mode-tag { align-self: flex-start; }
    .mode.selected::after {
        content: '';
        width: 22px; height: 22px;
        background: var(--green);
        border-radius: 50%;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23080928' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C%2Fsvg%3E");
        background-size: 12px;
        background-position: center;
        background-repeat: no-repeat;
        flex-shrink: 0;
    }
}

.slot-picker { display: none; padding: 16px; background: var(--gray-50); border-radius: 16px; margin-bottom: 22px; }
.slot-picker.visible { display: block; animation: fade 0.3s; }
.slot-dates-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.slot-arrows { display: flex; gap: 6px; }
.slot-arrow { width: 28px; height: 28px; border: 1.5px solid var(--gray-200); background: #fff; border-radius: 8px; cursor: pointer; color: var(--ink); font-weight: 700; font-family: inherit; display: flex; align-items: center; justify-content: center; }
.slot-arrow:hover { border-color: var(--green); color: var(--green); }
.dates-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 2px 2px 8px; margin-bottom: 4px; }
.date-chip { background: #fff; border: 1.5px solid var(--gray-200); border-radius: 10px; padding: 8px 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; transition: all 0.15s; font-family: inherit; color: var(--ink); }
.date-chip:hover:not(:disabled) { border-color: var(--green); }
.date-chip-day { font-size: 10px; text-transform: uppercase; color: var(--gray-500); font-weight: 700; letter-spacing: 0.3px; }
.date-chip-num { font-size: 15px; font-weight: 800; line-height: 1; }
.date-chip.selected { border-color: var(--green); background: var(--green); color: #fff; }
.date-chip.selected .date-chip-day { color: rgba(255,255,255,0.85); }
.date-chip:disabled { opacity: 0.35; cursor: not-allowed; }
.slots-compact { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; margin-top: 10px; }
.slot-chip { background: #fff; border: 1.5px solid var(--gray-200); border-radius: 8px; padding: 8px 4px; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 13px; color: var(--ink); transition: all 0.15s; }
.slot-chip:hover:not(:disabled) { border-color: var(--green); }
.slot-chip.selected { border-color: var(--green); background: var(--green); color: #fff; }
.slot-chip.taken { background: var(--gray-100); color: var(--gray-300); border-color: var(--gray-200); cursor: not-allowed; text-decoration: line-through; opacity: 0.65; }
.slot-chip.taken:hover { border-color: var(--gray-200); }

.muted { color: var(--gray-500); font-size: 14px; margin: 4px 0; }

.ctype { display: flex; gap: 10px; margin: 18px 0 20px; }
.ctype-opt { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; padding: 14px 16px; background: #fff; border: 2px solid var(--gray-200); border-radius: 14px; font-weight: 700; font-size: 14px; transition: all 0.15s; }
.ctype-opt:hover { border-color: var(--green); }
.ctype-opt input { display: none; }
.chk { width: 20px; height: 20px; border: 2px solid var(--gray-300); border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: all 0.15s; flex-shrink: 0; }
.ctype-opt.active { border-color: var(--green); background: rgba(var(--green-rgb), 0.06); }
.ctype-opt.active .chk { background: var(--green); border-color: var(--green); position: relative; }
.ctype-opt.active .chk::after { content: ''; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }

.fields { display: grid; gap: 16px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .row { grid-template-columns: 1fr; } }
.field { position: relative; display: flex; flex-direction: column; gap: 6px; }
.field label {
    display: block;
    font-family: var(--rld-font, 'Plus Jakarta Sans'), sans-serif;
    font-size: 11px; font-weight: 800;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--ink);
    margin: 0;
}
.field input, .field textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid var(--gray-200);
    border-radius: 12px;
    font-size: 14px; font-weight: 500;
    font-family: var(--rld-font, 'Plus Jakarta Sans'), sans-serif;
    color: var(--ink);
    background: var(--gray-50);
    outline: none;
    transition: all 0.15s;
    line-height: 1.5;
}
.field textarea { min-height: 100px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--gray-300); font-weight: 500; }
.field input:focus, .field textarea:focus {
    background: #fff;
    border-color: var(--green);
    box-shadow: 0 0 0 4px var(--green-soft);
}

.addr-suggestions { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1.5px solid var(--green); border-radius: 12px; margin-top: 4px; max-height: 280px; overflow-y: auto; z-index: 10; box-shadow: 0 10px 30px rgba(var(--navy-rgb), 0.15); display: none; }
.addr-suggestions.visible { display: block; }
.addr-item { padding: 12px 16px; cursor: pointer; border-bottom: 1px solid var(--gray-100); font-size: 14px; }
.addr-item:last-child { border-bottom: none; }
.addr-item:hover { background: var(--green-soft); }
.addr-item strong { color: var(--ink); }
.addr-item-ctx { color: var(--gray-500); font-size: 12px; margin-top: 2px; }

.error-msg { color: #d63638; font-size: 14px; margin: 12px 0 0; min-height: 18px; font-weight: 600; }

.submit-wrap { margin-top: 26px; padding-top: 22px; border-top: 2px solid var(--gray-100); display: flex; justify-content: flex-end; gap: 12px; align-items: center; }
.submit-btn { background: var(--green); color: var(--ink); border: none; padding: 16px 34px; border-radius: 14px; font-family: inherit; font-weight: 800; font-size: 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; transition: all 0.15s; box-shadow: 0 4px 0 0 var(--green-2); }
.submit-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 0 0 var(--green-2); }

.summary { background: #fff; border: 1.5px solid var(--gray-200); border-radius: 20px; padding: 22px; box-shadow: 0 6px 24px rgba(var(--navy-rgb), 0.06); }
.sum-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.sum-photo { width: 54px; height: 66px; background: linear-gradient(135deg, #f7f7fb 0%, #eaeaf2 100%); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--gray-300); flex-shrink: 0; }
.sum-title { font-family: var(--rld-font-display, 'Plus Jakarta Sans'), sans-serif; font-weight: 800; margin: 0; font-size: 16px; letter-spacing: -0.02em; line-height: 1.15; }
.sum-sub { margin: 4px 0 0; color: var(--green); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px; }
.sum-sep { height: 1.5px; background: var(--gray-200); margin: 14px 0; }
.sum-lines { display: flex; flex-direction: column; gap: 10px; }
.sum-line { display: flex; justify-content: space-between; font-size: 13px; color: var(--gray-500); gap: 8px; align-items: center; }
.sum-line-label { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; }
.sum-line-label span.text { flex: 1; min-width: 0; }
.sum-line-remove {
    background: none;
    border: none;
    color: #d63638;
    cursor: pointer;
    opacity: 0.55;
    padding: 0;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 26px; height: 26px;
    transition: all 0.15s;
    flex-shrink: 0;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
/* Zone tactile élargie (invisible) — facilite le tap sur mobile sans changer la mise en page. */
.sum-line-remove::before {
    content: '';
    position: absolute;
    inset: -8px;
}
.sum-line-remove:hover, .sum-line-remove:active { opacity: 1; background: rgba(214, 54, 56, 0.12); }
.sum-line strong { color: var(--ink); font-weight: 700; white-space: nowrap; }
.sum-line.bonus { color: var(--green); font-weight: 700; }
.sum-line.bonus strong { color: var(--green); }
.sum-total { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 18px; }
.sum-total-label { font-family: var(--rld-font-display, 'Plus Jakarta Sans'), sans-serif; font-size: 22px; font-weight: 800; margin: 0; letter-spacing: -0.02em; }
.sum-total-tva { margin: 0; font-size: 12px; color: var(--gray-500); }
.sum-total-value { font-family: var(--rld-font-display, 'Plus Jakarta Sans'), sans-serif; font-size: 26px; font-weight: 800; margin: 0; letter-spacing: -0.02em; }

.cta { width: 100%; background: var(--green); color: var(--ink); border: none; padding: 15px; border-radius: 14px; font-family: inherit; font-weight: 800; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.15s; box-shadow: 0 4px 0 0 var(--green-2); }
.cta:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 0 0 var(--green-2); }
.cta:disabled { opacity: 0.5; cursor: not-allowed; }
.cta-sub { text-align: center; color: var(--gray-500); font-size: 12px; margin: 8px 0 0; }

.success { text-align: center; padding: 60px 20px; background: #fff; border-radius: 24px; }
.success-ring { width: 96px; height: 96px; border-radius: 50%; background: var(--green); color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 24px; box-shadow: 0 0 0 10px var(--green-glow); }

@media (max-width: 700px) {
    .rld-app { padding: 4px 16px 80px; }
    .rld-app .hero { padding: 4px 16px 0; }
    .hero-title { font-size: 34px; }
    .brand-carousel { height: 300px; margin-top: -80px; }
    .rld-app .brand-3d {
        width: 200px;
        height: 260px;
        padding: 26px 20px 20px;
        border-radius: 26px;
    }
    .rld-app .brand-3d-header { font-size: 10px; letter-spacing: 1.2px; }
    .rld-app .brand-3d-logo svg,
    .rld-app .brand-3d-logo img { max-width: 110px; max-height: 110px; }
    .rld-app .brand-3d-name { font-size: 18px; }
    .rld-app .brand-3d-tag { font-size: 10px; padding: 5px 12px; }
    .rld-app .brand-3d.is-other .brand-other-plus { width: 88px; height: 88px; border-width: 2.5px; }
    .rld-app .brand-3d.is-other .brand-other-plus svg { width: 40px; height: 40px; }
    .models-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .rld-app .carousel-arrow { display: none; }
    .hydrogel-hero { padding: 28px 24px 0; }
    .hydrogel-title { font-size: 22px; }
    .hydrogel-body { padding: 22px 24px 26px; }

    /* ----- Step 2 (réparations) — adaptations mobile -----
       Catégories : on resserre le padding et on réduit la taille des icônes,
       on autorise le wrap du titre si le nom de la catégorie est long. */
    .rld-app .device-head { padding: 14px 16px; gap: 12px; flex-wrap: wrap; }
    .rld-app .device-title { font-size: 18px; }
    .rld-app .device-sub { font-size: 11px; }
    .rld-app .device-color-btn { padding: 7px 12px 7px 8px; font-size: 12px; gap: 6px; }
    .rld-app .device-color-swatch { width: 16px; height: 16px; }
    .rld-app .device-color-panel { right: 12px; left: 12px; max-width: none; }
    .rld-app .cat-head { padding: 12px 14px; gap: 10px; }
    .rld-app .cat-icon { width: 36px; height: 36px; border-radius: 10px; }
    .rld-app .cat-icon svg { width: 18px; height: 18px; }
    .rld-app .cat-title-wrap { gap: 8px; min-width: 0; flex-wrap: wrap; }
    .rld-app .cat-title { font-size: 14px; line-height: 1.3; }
    .rld-app .cat-count { font-size: 10px; padding: 3px 8px; }
    .rld-app .cat-chevron { width: 28px; height: 28px; border-radius: 8px; }
    .rld-app .cat-chevron svg { width: 14px; height: 14px; }
    .rld-app .cat.selected::after { right: 50px; width: 8px; height: 8px; box-shadow: 0 0 0 3px rgba(var(--green-rgb),0.25); }
    .rld-app .cat-content { padding: 4px 12px 14px; gap: 8px; }

    /* Repair cards : déjà en 1 col via .cat-content rule existante (line 679),
       mais on resserre le padding et ajustons la card variants. */
    .rld-app .repair-card { padding: 12px 14px; min-height: 80px; gap: 6px; }
    .rld-app .repair-name { font-size: 13.5px; line-height: 1.3; }
    .rld-app .repair-desc { font-size: 11.5px; line-height: 1.4; }
    .rld-app .repair-price { font-size: 14px; }
    .rld-app .variant-row { padding: 10px 12px; }
    .rld-app .variant-name { font-size: 13px; }
    .rld-app .variant-price { font-size: 13px; }

    /* Sidebar (panier) en bas en mode mobile : cf. la rule @900px qui passe en
       1 col, on s'assure que le sticky est désactivé, padding raisonnable. */
    .rld-app .side-col { margin-top: 16px; }
    .rld-app .sidebar { padding: 16px; border-radius: 16px; }
    .rld-app .sb-title { font-size: 14px; }
    .rld-app .sb-cta { padding: 14px 18px !important; font-size: 14px !important; }

    /* Step header (titre "Choisissez ce que vous voulez réparer") */
    .rld-app .step-label { padding: 10px 18px 10px 12px; font-size: 14px; }
    .rld-app .step-label-num { width: 24px; height: 24px; font-size: 11px; }

    /* Quick repairs grid (Diagnostic + Désoxydation) — déjà 1 col à 600px,
       mais on aère un peu plus le padding. */
    .rld-app .quick-repair-card { padding: 14px; }

    /* Empty models state : déjà OK via @480px plus bas. */
}

/* Très petits écrans (iPhone SE et bas de gamme) : ajustements supplémentaires */
@media (max-width: 380px) {
    .rld-app { padding: 4px 12px 80px; }
    .hero-title { font-size: 28px; }
    .rld-app .cat-head { padding: 10px 12px; gap: 8px; }
    .rld-app .cat-title { font-size: 13px; }
    .rld-app .cat-icon { width: 32px; height: 32px; }
    .rld-app .cat-count { display: none; } /* on cache le compteur, manque de place */
    .models-grid { grid-template-columns: 1fr; }
}


/* ===========================================================================
   Empty state — "no models for this brand" message displayed to clients.
   Branded with Repair Booking DA: navy + green accent + Unbounded title.
   Spans the full grid width via grid-column: 1/-1.
   =========================================================================== */
.empty-models-state {
    grid-column: 1 / -1;
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    padding: 48px 24px;
    background: #fff;
    border: 1.5px dashed #d6d6e0;
    border-radius: 20px;
    margin: 12px 0;
}
.empty-models-icon {
    width: 72px; height: 72px;
    background: rgba(var(--green-rgb), 0.12);
    color: var(--green-2);
    border-radius: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 22px;
}
.empty-models-icon svg { width: 36px; height: 36px; }
.empty-models-title {
    font-family: var(--rld-font-display, 'Plus Jakarta Sans'), sans-serif;
    font-size: clamp(20px, 3vw, 26px);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--ink);
    line-height: 1.2;
    margin: 0 0 12px;
}
.empty-models-title em {
    font-style: italic;
    color: var(--green-2);
    display: inline-block;
    transform: rotate(-1.5deg);
    position: relative;
}
.empty-models-title em::after {
    content: ''; position: absolute;
    left: -3px; right: -3px; bottom: 4%;
    height: 28%; background: var(--green); opacity: 0.32;
    z-index: -1; border-radius: 4px;
    transform: rotate(-1deg);
}
.empty-models-desc {
    font-size: 14px;
    color: #6b6b7d;
    line-height: 1.6;
    font-weight: 500;
    max-width: 480px;
    margin: 0 0 24px;
}
.empty-models-actions {
    display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
}
.empty-models-btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--rld-font, 'Plus Jakarta Sans'), sans-serif;
    font-weight: 800; font-size: 14px;
    padding: 13px 22px; border-radius: 999px;
    text-decoration: none; cursor: pointer;
    transition: all .2s;
    line-height: 1;
    white-space: nowrap;
}
.empty-models-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.empty-models-btn-primary {
    background: var(--navy); color: #fff;
    position: relative; isolation: isolate;
}
.empty-models-btn-primary::before {
    content: ''; position: absolute; inset: 0;
    border-radius: 999px;
    background: var(--green); z-index: -1;
    transform: translate(4px, 4px); transition: transform .2s;
}
.empty-models-btn-primary:hover { transform: translate(2px, 2px); color: #fff; text-decoration: none; }
.empty-models-btn-primary:hover::before { transform: translate(0, 0); }
.empty-models-btn-secondary {
    background: transparent; color: var(--ink);
    border: 1.5px solid #e8e8ef;
}
.empty-models-btn-secondary:hover {
    background: var(--navy); color: #fff; border-color: var(--navy);
    text-decoration: none;
}

@media (max-width: 480px) {
    .empty-models-state { padding: 36px 18px; }
    .empty-models-actions { flex-direction: column; width: 100%; }
    .empty-models-btn { justify-content: center; width: 100%; }
}

/* =============================================================== */
/* ===== v3.7.3 — Refonte page réparation (mockup 6C compact) ==== */
/* =============================================================== */
/* Approche : copie quasi-conforme du mockup HTML/CSS final, préfixée
 * par `.rld-app` pour que la spécificité écrase tout style hérité du
 * thème WordPress. Couleurs en valeurs fixes (pas de var(--…))
 * pour ne pas dépendre des variables qui peuvent être redéfinies. */

/* Préfixe l'app pour permettre aux grilles/cards de respirer */
.rld-app .main-col { min-width: 0; }
.rld-app .categories { min-width: 0; }

/* Trust strip */
.rld-app .trust-strip {
    background: var(--navy) !important;
    color: #fff !important;
    border-radius: 16px;
    padding: 14px 22px;
    margin: 8px 0 28px;
    /* Grille de N colonnes de largeur égale (1fr) — chaque pavé prend la même place
     * quel que soit la longueur de son texte. data-count est posé par le JS pour
     * pouvoir adapter le nombre de colonnes (1, 2, 3 ou 4 items). */
    display: grid;
    grid-template-columns: repeat(var(--trust-cols, 4), 1fr);
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}
.rld-app .trust-strip[data-count="1"] { --trust-cols: 1; }
.rld-app .trust-strip[data-count="2"] { --trust-cols: 2; }
.rld-app .trust-strip[data-count="3"] { --trust-cols: 3; }
.rld-app .trust-strip[data-count="4"] { --trust-cols: 4; }

.rld-app .trust-item {
    display: flex; align-items: center; gap: 8px;
    color: #fff !important;
    min-width: 0;
    justify-content: center;
}
.rld-app .trust-item .trust-text {
    min-width: 0;
    /* On laisse le texte rétrécir si l'écran est étroit, mais sans wrap par défaut. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rld-app .trust-item .stars { color: #f0a500 !important; display: inline-flex; gap: 1px; letter-spacing: 1px; flex-shrink: 0; }
.rld-app .trust-item strong { color: var(--green) !important; font-family: var(--rld-font-display, 'Plus Jakarta Sans'), sans-serif; font-weight: 800; }

@media (max-width: 1100px) {
    /* Sur tablette large, on autorise 2 lignes */
    .rld-app .trust-strip[data-count="4"] { grid-template-columns: repeat(2, 1fr); }
    .rld-app .trust-strip[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
    .rld-app .trust-item .trust-text { white-space: normal; overflow: visible; }
}
@media (max-width: 720px) {
    .rld-app .trust-strip,
    .rld-app .trust-strip[data-count="3"],
    .rld-app .trust-strip[data-count="4"] {
        grid-template-columns: 1fr;
        padding: 14px 18px;
        gap: 10px;
        font-size: 12.5px;
    }
    .rld-app .trust-item { justify-content: flex-start; }
}

/* Section header (kicker) */
.rld-app .kicker {
    display: flex; align-items: baseline; gap: 12px;
    margin: 32px 0 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--navy);
    flex-wrap: wrap;
}
.rld-app .kicker-tag {
    background: var(--navy) !important;
    color: var(--green) !important;
    padding: 5px 12px; border-radius: 6px;
    font-family: var(--rld-font-display, 'Plus Jakarta Sans'), sans-serif;
    font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.1em;
    flex-shrink: 0; line-height: 1.4;
    display: inline-block;
}
.rld-app .kicker-title {
    font-family: var(--rld-font-display, 'Plus Jakarta Sans'), sans-serif;
    font-size: 20px; font-weight: 800;
    margin: 0; letter-spacing: -0.02em;
    color: var(--ink) !important; line-height: 1.2;
}
.rld-app .kicker-meta { margin-left: auto; font-size: 12px; color: #646980 !important; font-weight: 600; }

/* ===== Accordéon de catégorie — carte à en-tête « pastille + titre + chevron » =====
 * Desktop : cartes toujours ouvertes (grille de qualités). Mobile : repli + carrousel (voir @media 720). */
.rld-app .rld-cat {
    background: #fff; border: 1px solid #e7e9f1; border-radius: 18px;
    box-shadow: 0 1px 2px rgba(var(--navy-rgb), .05), 0 10px 26px -14px rgba(var(--navy-rgb), .16);
    margin: 0 0 14px; overflow: hidden; min-width: 0;
}
.rld-app .rld-cat-head { display: flex; align-items: center; gap: 13px; width: 100%; padding: 15px 16px; position: relative; text-align: left; }
.rld-app .rld-cat-chip {
    width: 44px; height: 44px; border-radius: 13px; flex: none; display: grid; place-items: center;
    background: rgba(var(--green-rgb), .12); color: var(--green); transition: background .25s, color .25s;
}
.rld-app .rld-cat-open .rld-cat-chip { background: var(--green); color: #fff; }
.rld-app .rld-cat-chip svg { width: 23px; height: 23px; }
.rld-app .rld-cat-txt { flex: 1; min-width: 0; }
.rld-app .rld-cat-name { display: block; font-family: var(--rld-font, 'Plus Jakarta Sans'), sans-serif; font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); line-height: 1.2; }
.rld-app .rld-cat-sub { display: block; font-size: 12.5px; color: #5c6474; margin-top: 2px; font-weight: 500; }
.rld-app .rld-cat-sub b { color: var(--ink); font-weight: 700; }
.rld-app .rld-cat-selpill { display: none; align-items: center; gap: 4px; margin-top: 4px; font-size: 11px; font-weight: 800; color: var(--green); text-transform: uppercase; letter-spacing: .03em; }
.rld-app .rld-cat-has-sel .rld-cat-selpill { display: inline-flex; }
.rld-app .rld-cat-has-sel .rld-cat-sub { display: none; }
.rld-app .rld-cat-chevron { display: none; width: 20px; height: 20px; flex: none; color: #9aa1b2; transition: transform .3s cubic-bezier(.3, .8, .3, 1); }
.rld-app .rld-cat-open .rld-cat-chevron { transform: rotate(180deg); color: var(--green); }
.rld-app .rld-cat-content { display: grid; grid-template-rows: 1fr; }
.rld-app .rld-cat-inner { min-width: 0; min-height: 0; overflow: hidden; }
.rld-app .rld-cat-pad { padding: 14px 16px 16px; border-top: 1px solid #eef0f5; }
.rld-app .rld-cat-dots { display: none; align-items: center; justify-content: center; gap: 14px; padding: 4px 0 14px; }
.rld-app .rld-dots-track { display: flex; align-items: center; gap: 6px; }
.rld-app .rld-dot { width: 7px; height: 7px; border-radius: 50%; background: #d7dae6; transition: transform .25s, background .25s; }
.rld-app .rld-dot.on { background: var(--green); transform: scale(1.35); }
.rld-app .rld-rail-arrow {
    width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center;
    cursor: pointer; background: rgba(var(--green-rgb), .10); color: var(--green);
    -webkit-tap-highlight-color: transparent; transition: background .15s, transform .1s;
}
.rld-app .rld-rail-arrow:active { transform: scale(.9); background: rgba(var(--green-rgb), .18); }

/* HERO row : N cards côte à côte, toutes de taille égale.
 * On utilise repeat(N, 1fr) avec N déduit du nombre de cards via une CSS variable
 * positionnée par le JS (--rld-hero-count). Fallback sans variable : 3 colonnes égales.
 * Sur écran étroit : passage à 2 colonnes puis 1. */
.rld-app .hero-row {
    display: grid;
    grid-template-columns: repeat(var(--rld-hero-count, 3), minmax(0, 1fr));
    gap: 12px;
    min-width: 0;
}
@media (max-width: 1100px) {
    .rld-app .hero-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Desktop : rangée complète, bouton "Voir plus" et libellé "À partir de" cachés. */
.rld-app .hero-more-btn { display: none; }
.rld-app .hcpl-from { display: none; }
@keyframes rldHeroExpand { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 720px) {
    /* En-tête cliquable + chevron visible */
    .rld-app .rld-cat-head { cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .rld-app .rld-cat-head:active { background: #f6f7fb; }
    .rld-app .rld-cat-chevron { display: block; }
    /* Repli animé (grid-rows 0fr→1fr) */
    .rld-app .rld-cat-content { grid-template-rows: 0fr; transition: grid-template-rows .32s cubic-bezier(.3, .8, .3, 1); }
    .rld-app .rld-cat-open > .rld-cat-content { grid-template-rows: 1fr; }
    .rld-app .rld-cat-pad { padding: 0; }

    /* Qualités d'écran : carrousel horizontal glissable + aimanté */
    .rld-app .hero-row {
        display: flex; grid-template-columns: none;
        overflow-x: auto; -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory; gap: 12px;
        padding: 14px 16px 6px; scrollbar-width: none;
    }
    .rld-app .hero-row::-webkit-scrollbar { display: none; }
    .rld-app .hero-row .hero-card { flex: 0 0 84%; max-width: 300px; scroll-snap-align: center; min-width: 0; }
    .rld-app .hero-more-btn { display: none !important; }
    .rld-app .hero-row .hcpl-fix { display: inline; }
    .rld-app .hero-row .hcpl-from { display: none; }
    .rld-app .rld-cat-dots { display: flex; }
    /* Catégories normales / express : la grille reprend son padding intérieur */
    .rld-app .rld-cards-grid, .rld-app .compact-grid { padding: 12px 12px 14px; }
}
.rld-app .hero-card {
    background: var(--card-bg, #fff) !important;
    border: 1.5px solid #d8d8e3;
    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.32, 0.72, 0, 1);
    position: relative;
    display: flex; flex-direction: column;
    min-height: 380px;
    min-width: 0;
    text-align: left;
    font-family: inherit;
    padding: 0;
    width: 100%;
}
.rld-app .hero-card:hover {
    border-color: var(--green);
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(var(--navy-rgb), 0.1);
}
.rld-app .hero-card.selected {
    border-color: var(--select, var(--green));
    box-shadow: 0 0 0 3px rgba(var(--select-rgb, var(--green-rgb)),0.22), 0 14px 30px -10px rgba(var(--select-rgb, var(--green-rgb)),0.28);
}

/* Bandeau navy en haut de chaque card */
.rld-app .hero-card-banner {
    background: linear-gradient(135deg, var(--navy), var(--navy-2, #14164a)) !important;
    color: #fff !important;
    padding: 18px 20px;
    position: relative; overflow: hidden;
    flex-shrink: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.rld-app .hero-card-banner::after {
    content: '';
    position: absolute; top: -40px; right: -40px;
    width: 160px; height: 160px;
    background: radial-gradient(circle, rgba(var(--green-rgb),0.3), transparent 70%);
    opacity: var(--glow, 1);
    pointer-events: none;
    z-index: 0;
}
.rld-app .hero-card.selected .hero-card-banner {
    background: linear-gradient(135deg, var(--green), var(--green-2)) !important;
    color: var(--ink) !important;
}
.rld-app .banner-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; position: relative; z-index: 1;
}
.rld-app .hero-card-tag {
    font-size: 10px; font-weight: 800;
    color: var(--green) !important;
    text-transform: uppercase; letter-spacing: 0.08em;
    font-family: var(--rld-font, 'Plus Jakarta Sans'), sans-serif;
    position: relative; z-index: 1;
}
.rld-app .hero-card.selected .hero-card-tag { color: var(--ink) !important; }
.rld-app .hero-best-tag {
    background: #f0a500 !important;
    color: var(--ink) !important;
    padding: 3px 9px; border-radius: 6px;
    font-size: 9.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.06em;
    font-family: var(--rld-font, 'Plus Jakarta Sans'), sans-serif;
    line-height: 1.4;
    display: inline-flex; align-items: center; gap: 4px;
    position: relative; z-index: 1;
}
.rld-app .hero-best-tag-popular,
.rld-app .hero-best-tag-bestseller { background: #f0a500 !important; color: var(--ink) !important; }
.rld-app .hero-best-tag-recommended { background: var(--green) !important; color: var(--ink) !important; }
.rld-app .hero-best-tag-express { background: #ff7a3a !important; color: #fff !important; }
.rld-app .hero-best-tag-new { background: var(--green-soft) !important; color: var(--green-2) !important; }
.rld-app .hero-card-title {
    font-family: var(--rld-font-display, 'Plus Jakarta Sans'), sans-serif;
    font-size: 24px; font-weight: 800;
    letter-spacing: -0.02em; line-height: 1.05;
    margin: 4px 0 4px;
    position: relative; z-index: 1;
    color: var(--banner-ink, #fff) !important;
}
.rld-app .hero-card.selected .hero-card-title { color: var(--ink) !important; }
.rld-app .hero-card.is-big .hero-card-title { font-size: 28px; }
.rld-app .hero-card-desc {
    font-size: 12px;
    color: color-mix(in srgb, var(--banner-ink, #fff) 72%, transparent) !important;
    line-height: 1.5; margin: 0;
    position: relative; z-index: 1;
}
.rld-app .hero-card.selected .hero-card-desc { color: rgba(var(--navy-rgb), 0.7) !important; }

/* Rating row */
.rld-app .hero-card-rating {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 20px;
    background: #f7f7fb;
    border-bottom: 1.5px solid #eaeaf2;
    font-size: 11.5px; font-weight: 700;
    color: var(--ink) !important;
}
.rld-app .hero-card-rating .stars { color: #f0a500 !important; display: inline-flex; gap: 1px; letter-spacing: 1px; }
.rld-app .hero-card-rating .count { color: #646980 !important; font-weight: 600; }
.rld-app .hero-card-rating strong { color: var(--ink) !important; }

/* Body (features list + quote) */
.rld-app .hero-card-body {
    padding: 14px 20px;
    flex: 1;
    display: flex; flex-direction: column; gap: 8px;
}
.rld-app .hero-features {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 4px;
}
.rld-app .hero-features li {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px;
    color: #646980 !important;
    line-height: 1.4;
}
.rld-app .hero-features li::before {
    content: '';
    flex-shrink: 0;
    width: 14px; height: 14px;
    background: var(--green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23080928' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/8px no-repeat;
    border-radius: 50%;
}
.rld-app .hero-quote {
    font-size: 11.5px;
    font-style: italic;
    color: #646980 !important;
    padding: 8px 12px;
    background: #f7f7fb;
    border-left: 3px solid var(--green);
    border-radius: 4px;
    margin-top: 6px;
    line-height: 1.4;
}
.rld-app .hero-quote-author {
    font-style: normal;
    color: var(--ink) !important;
    font-weight: 700;
    font-size: 10.5px;
    display: block;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Foot avec prix + bouton */
.rld-app .hero-card-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    padding: 14px 20px 18px;
    border-top: 1.5px solid #eaeaf2;
    margin-top: auto;
    flex-shrink: 0;
}
.rld-app .hero-card-price-wrap { display: flex; flex-direction: column; }
.rld-app .hero-card-price-label {
    font-size: 10px; font-weight: 700;
    color: #646980 !important;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.rld-app .hero-card-price {
    font-family: var(--rld-font-display, 'Plus Jakarta Sans'), sans-serif;
    font-size: 28px; font-weight: 800;
    color: var(--ink) !important;
    letter-spacing: -0.02em; line-height: 1; margin-top: 2px;
}
.rld-app .hero-card-price.free {
    font-size: 13px;
    color: var(--green-2) !important;
    background: var(--green-soft);
    padding: 5px 12px; border-radius: 8px;
    font-family: var(--rld-font, 'Plus Jakarta Sans'), sans-serif;
}
.rld-app .hero-card-price.ondemand {
    font-size: 12px;
    color: #646980 !important;
    background: #f0f0f4;
    padding: 5px 12px; border-radius: 8px;
    font-family: var(--rld-font, 'Plus Jakarta Sans'), sans-serif;
    font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
}
.rld-app .hero-card-action {
    display: inline-flex; align-items: center; gap: 6px;
    background: #f7f7fb !important;
    color: var(--ink) !important;
    border: 1.5px solid #d8d8e3;
    padding: 9px 14px; border-radius: 10px;
    font-family: var(--rld-font, 'Plus Jakarta Sans'), sans-serif;
    font-size: 12px; font-weight: 800;
    cursor: pointer; transition: all 0.15s;
}
.rld-app .hero-card-action:hover {
    background: var(--green) !important;
    border-color: var(--green);
}
.rld-app .hero-card.selected .hero-card-action {
    background: var(--green) !important;
    border-color: var(--green);
}
.rld-app .hero-card-quality-label {
    background: var(--green) !important;
    color: var(--ink) !important;
    padding: 6px 12px; border-radius: 8px;
    font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.04em;
    display: inline-block;
    align-self: flex-start;
    font-family: var(--rld-font, 'Plus Jakarta Sans'), sans-serif;
}

/* ===== Carrousel multi (Batterie, Caméra, etc.) ===== */
.rld-app .multi-section {
    background: #f7f7fb;
    border-radius: 18px;
    padding: 22px 26px;
    margin-bottom: 4px;
    min-width: 0;
}

/* ===== Grille de cards pour catégories hors phare (Batterie, Caméra, Son…) =====
 * Au lieu d'un carrousel horizontal, on affiche les réparations en grille responsive,
 * style "fiche produit" comme demandé par Sayed. La card .multi-card est commune au
 * carrousel et à la grille — la classe parente définit juste la disposition. */
.rld-app .rld-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    margin-bottom: 8px;
    min-width: 0;
}
.rld-app .rld-cards-grid .multi-card {
    flex: none; /* annule le flex:0 0 290px du carrousel */
    width: 100%;
    scroll-snap-align: none;
}
.rld-app .multi-track-wrap { position: relative; min-width: 0; }
.rld-app .multi-track {
    display: flex; gap: 12px;
    overflow-x: auto; overflow-y: visible;
    padding: 6px 24px 6px 0;
    scroll-snap-type: x mandatory;
    margin: 0 -26px 0 0;
    padding-right: 50px;
    scrollbar-width: thin;
    scrollbar-color: #d8d8e3 transparent;
}
.rld-app .multi-track::-webkit-scrollbar { height: 6px; }
.rld-app .multi-track::-webkit-scrollbar-track { background: transparent; }
.rld-app .multi-track::-webkit-scrollbar-thumb { background: #d8d8e3; border-radius: 4px; }

.rld-app .multi-card {
    flex: 0 0 290px;
    background: var(--card-bg, #fff) !important;
    border: 1.5px solid #d8d8e3;
    border-radius: 14px;
    padding: 16px 18px;
    cursor: pointer;
    transition: all 0.18s;
    scroll-snap-align: start;
    display: flex; flex-direction: column;
    position: relative;
    text-align: left;
    font-family: inherit;
}
.rld-app .multi-card:hover {
    border-color: var(--green);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(var(--navy-rgb), 0.08);
}
.rld-app .multi-card.selected {
    border-color: var(--select, var(--green));
    background: linear-gradient(135deg, var(--green-soft), var(--card-bg, #fff)) !important;
}
.rld-app .multi-badge-row { display: flex; gap: 4px; margin-bottom: 10px; flex-wrap: wrap; }
.rld-app .multi-badge {
    font-size: 9.5px; font-weight: 800;
    padding: 3px 8px; border-radius: 6px;
    text-transform: uppercase; letter-spacing: 0.05em;
    line-height: 1.4;
    font-family: var(--rld-font, 'Plus Jakarta Sans'), sans-serif;
    display: inline-flex; align-items: center;
}
.rld-app .multi-badge.popular,
.rld-app .multi-badge.bestseller { background: #f0a500 !important; color: var(--ink) !important; }
.rld-app .multi-badge.recommended { background: var(--navy) !important; color: var(--green) !important; }
.rld-app .multi-badge.express { background: #ff7a3a !important; color: #fff !important; }
.rld-app .multi-badge.new { background: var(--green-soft) !important; color: var(--green-2) !important; }
.rld-app .multi-badge.warranty { background: var(--green-soft) !important; color: var(--green-2) !important; }

.rld-app .multi-card-name {
    font-weight: 800 !important;
    font-size: 15px;
    margin: 0 0 6px;
    letter-spacing: -0.01em;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    color: var(--ink) !important;
}
.rld-app .multi-quality-badge {
    background: var(--green-soft) !important;
    color: var(--ink) !important;
    padding: 3px 9px; border-radius: 8px;
    font-size: 10.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.04em;
    font-family: var(--rld-font, 'Plus Jakarta Sans'), sans-serif;
}
.rld-app .multi-card.selected .multi-quality-badge { background: #fff !important; }
.rld-app .multi-card-desc {
    font-size: 12px;
    color: #646980 !important;
    line-height: 1.45;
    margin: 0 0 10px;
    flex: 1;
}
.rld-app .multi-rating {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 700;
    color: var(--ink) !important;
    margin-bottom: 10px;
}
.rld-app .multi-rating .stars { color: #f0a500 !important; display: inline-flex; gap: 1px; letter-spacing: 1px; }
.rld-app .multi-rating .count { color: #646980 !important; font-weight: 600; }

.rld-app .multi-card-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid #eaeaf2;
}
.rld-app .multi-time {
    font-size: 10.5px; font-weight: 800;
    color: #646980 !important;
    text-transform: uppercase; letter-spacing: 0.04em;
    font-family: var(--rld-font, 'Plus Jakarta Sans'), sans-serif;
}
.rld-app .multi-price {
    font-family: var(--rld-font-display, 'Plus Jakarta Sans'), sans-serif;
    font-size: 18px; font-weight: 800;
    color: var(--ink) !important;
    letter-spacing: -0.01em;
}
.rld-app .multi-price.from {
    font-size: 11px;
    font-family: var(--rld-font, 'Plus Jakarta Sans'), sans-serif;
    font-weight: 700;
    color: #646980 !important;
    text-transform: uppercase;
}
.rld-app .multi-price.from strong {
    font-family: var(--rld-font-display, 'Plus Jakarta Sans'), sans-serif;
    font-size: 17px;
    color: var(--ink) !important;
    margin-left: 4px;
    text-transform: none;
}
.rld-app .multi-ondemand {
    font-size: 10.5px; font-weight: 800;
    color: #646980 !important;
    background: #f0f0f4;
    padding: 5px 10px; border-radius: 8px;
    text-transform: uppercase; letter-spacing: 0.04em;
    font-family: var(--rld-font, 'Plus Jakarta Sans'), sans-serif;
}

/* Variants à l'intérieur d'une multi-card */
.rld-app .multi-card-variants {
    margin-top: 10px;
    display: flex; flex-direction: column; gap: 5px;
}
/* Repli des qualités par réparation : masquées par défaut, révélées au clic sur la carte. */
.rld-app .multi-card.has-variants { position: relative; cursor: pointer; }
.rld-app .multi-card-chevron { position: absolute; top: 15px; right: 14px; color: #9aa1b2; transition: transform .3s cubic-bezier(.3,.8,.3,1); }
.rld-app .multi-card.rld-mc-open .multi-card-chevron { transform: rotate(180deg); color: var(--green); }
.rld-app .multi-card.has-variants .multi-card-name { padding-right: 26px; }
.rld-app .multi-card.has-variants .multi-card-variants {
    margin-top: 0; max-height: 0; overflow: hidden;
    transition: max-height .32s cubic-bezier(.3, .8, .3, 1), margin-top .32s;
}
.rld-app .multi-card.has-variants.rld-mc-open .multi-card-variants { margin-top: 12px; max-height: 480px; }
.rld-app .multi-card-variants .variant {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
    background: #f7f7fb;
    border: 1.5px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 12px;
}
.rld-app .multi-card-variants .variant:hover { border-color: var(--green); background: #fff; }
.rld-app .multi-card-variants .variant.selected { border-color: var(--green); background: #fff; }
.rld-app .multi-card-variants .variant-name { font-weight: 700 !important; color: var(--ink) !important; }
.rld-app .multi-card-variants .variant-price {
    font-family: var(--rld-font-display, 'Plus Jakarta Sans'), sans-serif;
    font-size: 13px; font-weight: 800;
    color: var(--ink) !important;
}
.rld-app .multi-card-variants .variant-price.ondemand {
    font-family: var(--rld-font, 'Plus Jakarta Sans'), sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    color: var(--gray-500) !important;
    letter-spacing: 0.01em;
}
.rld-app .multi-card-variants .variant-saving {
    font-size: 9.5px; font-weight: 800;
    color: var(--green-2) !important;
    background: var(--green-soft);
    padding: 2px 6px; border-radius: 4px;
    margin-left: 6px;
    font-family: var(--rld-font, 'Plus Jakarta Sans'), sans-serif;
}

/* ===== Compact grid (Quick repairs Diagnostic/Désox) =====
 * Layout final : icône à gauche + zone texte à droite (flex row).
 * Dans la zone texte (compact-card-body, en flex column) :
 *   - Ligne 1 : titre pleine largeur (peut wrap si long)
 *   - Ligne 2 : description (flex:1 pour pousser le foot en bas)
 *   - Ligne 3 (foot) : durée à gauche · badge au milieu · prix à droite (gros, en évidence)
 * Avantages : titre jamais coupé/wrap inutile, prix en évidence en bas-droite, badge propre. */
.rld-app .compact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin-bottom: 4px;
}
.rld-app .compact-card {
    background: #fff !important;
    border: 1.5px solid #e8e8ef;
    border-radius: 16px;
    padding: 18px 20px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.32, 0.72, 0, 1);
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 14px;
    min-height: 130px;
    position: relative;
    text-align: left;
    font-family: inherit;
}
.rld-app .compact-card:hover {
    border-color: var(--green);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(var(--navy-rgb), 0.08);
}
.rld-app .compact-card.selected {
    border-color: var(--green);
    background: linear-gradient(135deg, var(--green-soft), #fff) !important;
    box-shadow: 0 8px 20px rgba(var(--green-rgb),0.15);
}
.rld-app .compact-card-icon {
    width: 48px; height: 48px;
    background: #f7f7fb;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #646980;
    flex-shrink: 0;
    align-self: flex-start;
}
.rld-app .compact-card.selected .compact-card-icon {
    background: var(--green);
    color: var(--ink);
}
.rld-app .compact-card-icon svg { width: 22px; height: 22px; }

/* Zone texte (à droite de l'icône) — flex column. flex:1 sur la desc pousse le foot en bas. */
.rld-app .compact-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Titre pleine largeur — peut wrap si très long, mais avec le layout actuel ça arrive rarement */
.rld-app .compact-card-name {
    font-family: var(--rld-font-display, 'Plus Jakarta Sans'), sans-serif;
    font-weight: 800 !important;
    font-size: 17px;
    margin: 0;
    letter-spacing: -0.01em;
    color: var(--ink) !important;
    line-height: 1.2;
}

.rld-app .compact-card-desc {
    font-size: 12.5px;
    color: #646980 !important;
    line-height: 1.45;
    margin: 0;
    flex: 1; /* pousse le foot en bas */
}

/* Foot : durée + badge à gauche, prix à droite (en évidence) */
.rld-app .compact-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid #f0f0f5;
}
.rld-app .compact-card.selected .compact-card-foot { border-top-color: rgba(var(--green-rgb),0.2); }

/* Groupe gauche : durée + badge ensemble */
.rld-app .compact-card-foot-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.rld-app .compact-time {
    font-size: 11px; font-weight: 700;
    color: #646980 !important;
    display: inline-flex; align-items: center; gap: 4px;
    font-family: var(--rld-font, 'Plus Jakarta Sans'), sans-serif;
    flex-shrink: 0;
}

.rld-app .compact-mini-badge {
    font-size: 9px; font-weight: 800;
    padding: 3px 8px; border-radius: 6px;
    text-transform: uppercase; letter-spacing: 0.05em;
    font-family: var(--rld-font, 'Plus Jakarta Sans'), sans-serif;
    line-height: 1.4;
    position: static;
    display: inline-block;
    flex-shrink: 0;
    white-space: nowrap;
}
.rld-app .compact-mini-badge.popular,
.rld-app .compact-mini-badge.bestseller { background: #f0a500 !important; color: var(--ink) !important; }
.rld-app .compact-mini-badge.recommended { background: var(--navy) !important; color: var(--green) !important; }
.rld-app .compact-mini-badge.express { background: #ff7a3a !important; color: #fff !important; }
.rld-app .compact-mini-badge.new { background: var(--green-soft) !important; color: var(--green-2) !important; }

/* Prix dans le foot, à droite, en gros */
.rld-app .compact-price {
    font-family: var(--rld-font-display, 'Plus Jakarta Sans'), sans-serif;
    font-size: 22px; font-weight: 800;
    color: var(--ink) !important;
    letter-spacing: -0.01em;
    line-height: 1;
    flex-shrink: 0;
    white-space: nowrap;
}
.rld-app .compact-price.free {
    font-size: 11px;
    font-family: var(--rld-font, 'Plus Jakarta Sans'), sans-serif;
    font-weight: 800;
    color: var(--green-2) !important;
    background: var(--green-soft);
    padding: 5px 10px; border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.rld-app .compact-ondemand {
    font-size: 10px; font-weight: 800;
    color: #646980 !important;
    background: #f0f0f4;
    padding: 4px 9px; border-radius: 6px;
    text-transform: uppercase; letter-spacing: 0.04em;
    font-family: var(--rld-font, 'Plus Jakarta Sans'), sans-serif;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Responsive */
@media (max-width: 900px) {
    .rld-app .hero-card { min-height: auto; }
}
@media (max-width: 720px) {
    .rld-app .trust-strip { padding: 12px 16px; gap: 10px; font-size: 11.5px; }
    .rld-app .trust-item { flex: 1 1 calc(50% - 8px); justify-content: center; text-align: center; }
    .rld-app .multi-section { padding: 16px 18px; }
    .rld-app .multi-card { flex-basis: 240px; }
    .rld-app .kicker-title { font-size: 18px; }
    .rld-app .hero-card-title { font-size: 22px; }
    .rld-app .hero-card.is-big .hero-card-title { font-size: 24px; }
    .rld-app .hero-card-price { font-size: 24px; }
}
@media (max-width: 480px) {
    .rld-app .multi-section { padding: 14px 16px; }
    .rld-app .multi-card { flex-basis: 220px; padding: 14px 16px; }
    .rld-app .hero-card-banner { padding: 16px 18px; }
    .rld-app .hero-card-body, .rld-app .hero-card-foot { padding-left: 18px; padding-right: 18px; }
}

/* ===============================================
 * v3.7.4 — Sticky bar pour l'étape 2b uniquement
 * =============================================== */

/* Sur l'étape 2b (page réparation), on cache la sidebar latérale et on
 * affiche une sticky bar en bas du viewport façon "mockup 6C compact".
 * Sur les autres étapes (3 = méthode service, 4 = créneau), la sidebar
 * latérale reste visible normalement. */

/* Étape 2b : cache la sidebar latérale, étend le main-col sur toute la largeur */
.rld-app.rld-step-2b .layout.with-side {
    grid-template-columns: 1fr !important;
}
.rld-app.rld-step-2b .side-col {
    display: none !important;
}
/* Padding bottom pour que la sticky bar ne masque pas le dernier contenu */
.rld-app.rld-step-2b {
    padding-bottom: 110px;
}

/* Bouton back discret (style screen 2 — pas central, juste un retour rapide en haut à gauche) */
.rld-app.rld-step-2b .rld-2b-back {
    display: inline-flex;
    margin-bottom: 16px;
}

/* Device hero du step 2b — style "fiche produit screen 2" :
 * - Card horizontale avec icône à gauche, infos au centre, bouton couleur à droite
 * - Sous-titre coloré "APPLE · TÉLÉPHONE" en pavé vert clair
 * - Titre en grosse typographie Unbounded
 * - Sous-sous-titre avec un point coloré et "256 Go" */
.rld-app .rld-2b-device {
    background: linear-gradient(135deg, #fff, #fafafe);
    border: 1.5px solid #e8e8ef;
    border-radius: 16px;
    padding: 18px 22px;
    margin-bottom: 14px;
    display: grid;
    grid-template-columns: 70px 1fr auto;
    gap: 18px;
    align-items: center;
    position: relative;
}
.rld-app .rld-2b-device-photo {
    width: 70px; height: 86px;
    background: linear-gradient(135deg, #f7f7fb, #f0f0f5);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: #d6d6e0;
}
.rld-app .rld-2b-device-info {
    min-width: 0;
    display: flex; flex-direction: column;
    gap: 4px;
}
.rld-app .rld-2b-device-tag {
    display: inline-block;
    align-self: flex-start;
    font-size: 10px; font-weight: 800;
    color: var(--green) !important;
    background: var(--green-soft);
    padding: 3px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: var(--rld-font, 'Plus Jakarta Sans'), sans-serif;
    line-height: 1.4;
}
.rld-app .rld-2b-device-title {
    font-family: var(--rld-font-display, 'Plus Jakarta Sans'), sans-serif;
    font-size: 24px; font-weight: 800;
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--ink) !important;
}
.rld-app .rld-2b-device-sub {
    font-size: 13px;
    color: #6b6b7d !important;
    margin: 0;
    display: flex; align-items: center; gap: 8px;
    font-weight: 500;
}
.rld-app .rld-2b-dot {
    width: 11px; height: 11px;
    border-radius: 50%;
    background: #d05600;
    border: 1.5px solid rgba(0,0,0,0.1);
    display: inline-block;
    flex-shrink: 0;
}

@media (max-width: 720px) {
    .rld-app .rld-2b-device { padding: 14px 16px; gap: 12px; grid-template-columns: 56px 1fr; }
    .rld-app .rld-2b-device-photo { width: 56px; height: 70px; }
    .rld-app .rld-2b-device-title { font-size: 20px; }
    .rld-app .rld-2b-device .device-color-btn { grid-column: 1 / -1; align-self: flex-start; margin-top: 4px; }
}

/* La sticky bar est par défaut cachée ; elle apparaît uniquement en step 2b */
.rld-app .rld-sticky-bar {
    display: none;
}
/* Sur la page contact (appareils hors téléphone), pas de panier → sticky bar masquée */
.rld-app.rld-step-2b.rld-contact-page .rld-sticky-bar {
    display: none !important;
}
.rld-app.rld-step-2b .rld-sticky-bar {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    background: rgba(255,255,255,0.94);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border-top: 1.5px solid #d8d8e3;
    box-shadow: 0 -8px 32px rgba(var(--navy-rgb), 0.06);
}
.rld-app .rld-sticky-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 14px 24px;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 22px;
    align-items: center;
}
.rld-app .rld-sticky-cart {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: #f7f7fb !important;
    color: var(--ink) !important;
    border: 1.5px solid #d8d8e3;
    border-radius: 12px;
    font-family: var(--rld-font, 'Plus Jakarta Sans'), sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1.2;
}
.rld-app .rld-sticky-cart:hover {
    border-color: var(--green);
    background: #fff !important;
}
.rld-app .rld-sticky-cart-count {
    background: var(--green);
    color: var(--ink) !important;
    font-family: var(--rld-font-display, 'Plus Jakarta Sans'), sans-serif;
    font-size: 11px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
    min-width: 22px;
    text-align: center;
    display: inline-block;
    line-height: 1.4;
}
.rld-app .rld-sticky-summary {
    display: flex; flex-direction: column;
    min-width: 0;
}
.rld-app .rld-sticky-summary-label {
    font-size: 10.5px; font-weight: 800;
    color: #646980 !important;
    text-transform: uppercase; letter-spacing: 0.08em;
    margin-bottom: 2px;
    font-family: var(--rld-font, 'Plus Jakarta Sans'), sans-serif;
}
.rld-app .rld-sticky-summary-items {
    font-size: 12.5px;
    color: #646980 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--rld-font, 'Plus Jakarta Sans'), sans-serif;
}
.rld-app .rld-sticky-summary-items strong {
    color: var(--ink) !important;
    font-weight: 700;
}
.rld-app .rld-sticky-total {
    display: flex; flex-direction: column;
    align-items: flex-end;
}
.rld-app .rld-sticky-total-label {
    font-size: 10.5px; font-weight: 800;
    color: #646980 !important;
    text-transform: uppercase; letter-spacing: 0.08em;
    font-family: var(--rld-font, 'Plus Jakarta Sans'), sans-serif;
}
.rld-app .rld-sticky-total-amount {
    font-family: var(--rld-font-display, 'Plus Jakarta Sans'), sans-serif;
    font-size: 26px; font-weight: 800;
    color: var(--ink) !important;
    letter-spacing: -0.02em;
    line-height: 1;
    margin-top: 2px;
}
.rld-app .rld-sticky-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--green) !important;
    color: var(--ink) !important;
    border: none;
    border-radius: 14px;
    padding: 15px 26px;
    font-family: var(--rld-font, 'Plus Jakarta Sans'), sans-serif;
    font-size: 15px; font-weight: 800;
    cursor: pointer;
    transition: all 0.2s;
}
.rld-app .rld-sticky-cta:hover:not(:disabled) {
    background: var(--green-2) !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(var(--green-rgb),0.45);
}
.rld-app .rld-sticky-cta:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--green-soft) !important;
}

/* Mobile */
@media (max-width: 720px) {
    .rld-app .rld-sticky-inner {
        padding: 12px 16px;
        gap: 10px;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "cart summary total"
            "cta cta cta";
    }
    .rld-app .rld-sticky-cart { grid-area: cart; padding: 8px 12px; font-size: 12px; }
    .rld-app .rld-sticky-summary { grid-area: summary; min-width: 0; }
    .rld-app .rld-sticky-total { grid-area: total; min-width: 0; max-width: 130px; }
    .rld-app .rld-sticky-cta {
        grid-area: cta;
        padding: 12px 16px;
        font-size: 14px;
    }
    .rld-app .rld-sticky-summary-items { display: none; } /* trop étroit sur mobile */
    .rld-app .rld-sticky-total-amount {
        font-size: 22px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .rld-app.rld-step-2b { padding-bottom: 150px; }
    .rld-app.rld-step-2b.rld-contact-page { padding-bottom: 24px; }
}

/* ── Mini cart drawer ──────────────────────────────────────────────────────── */
.rld-cart-drawer-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(var(--navy-rgb), 0.45);
    z-index: 9998;
    backdrop-filter: blur(2px);
}
.rld-cart-drawer-backdrop.open { display: block; }

.rld-cart-drawer {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 9999;
    background: #fff;
    border-radius: 20px 20px 0 0;
    padding: 0 0 env(safe-area-inset-bottom, 16px);
    box-shadow: 0 -8px 40px rgba(var(--navy-rgb), 0.18);
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.32,0.72,0,1);
    max-height: 80vh;
    display: flex; flex-direction: column;
}
.rld-cart-drawer.open { transform: translateY(0); }

.rld-cart-drawer-handle {
    width: 40px; height: 4px;
    background: #e5e7eb;
    border-radius: 99px;
    margin: 12px auto 0;
    flex-shrink: 0;
}
.rld-cart-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px 12px;
    border-bottom: 1px solid #f1f1f5;
    flex-shrink: 0;
}
.rld-cart-drawer-title {
    font-family: var(--rld-font, 'Plus Jakarta Sans'), sans-serif;
    font-weight: 800; font-size: 17px;
    color: var(--ink);
}
.rld-cart-drawer-close {
    background: #f3f4f6; border: none;
    border-radius: 99px; width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #374151;
    transition: background 0.15s;
}
.rld-cart-drawer-close:hover { background: #e5e7eb; }

.rld-cart-drawer-lines {
    padding: 12px 20px;
    overflow-y: auto; flex: 1;
    display: flex; flex-direction: column; gap: 10px;
}
.rld-cart-drawer-empty {
    color: #9ca3af;
    font-family: var(--rld-font, 'Plus Jakarta Sans'), sans-serif;
    font-size: 14px;
    text-align: center;
    padding: 16px 0;
    margin: 0;
}
.rld-cart-drawer-line {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: #f9fafb;
    border-radius: 12px;
    padding: 12px 14px;
}
.rld-cart-drawer-line-name {
    font-family: var(--rld-font, 'Plus Jakarta Sans'), sans-serif;
    font-weight: 600; font-size: 14px;
    color: var(--ink); flex: 1; min-width: 0;
}
.rld-cart-drawer-line-price {
    font-family: var(--rld-font, 'Plus Jakarta Sans'), sans-serif;
    font-weight: 700; font-size: 14px;
    color: var(--ink); white-space: nowrap;
}
.rld-cart-drawer-line-remove {
    background: none; border: none; cursor: pointer;
    color: #9ca3af; padding: 0;
    display: flex; align-items: center;
    transition: color 0.15s;
}
.rld-cart-drawer-line-remove:hover { color: #ef4444; }

.rld-cart-drawer-footer {
    padding: 14px 20px 20px;
    border-top: 1px solid #f1f1f5;
    display: flex; flex-direction: column; gap: 12px;
    flex-shrink: 0;
}
.rld-cart-drawer-total {
    display: flex; align-items: center; justify-content: space-between;
    font-family: var(--rld-font, 'Plus Jakarta Sans'), sans-serif;
    font-size: 14px; color: #6b7280;
}
.rld-cart-drawer-total strong {
    font-size: 22px; font-weight: 800;
    color: var(--ink);
    font-family: var(--rld-font-display, 'Plus Jakarta Sans'), sans-serif;
    letter-spacing: -0.02em;
}
.rld-cart-drawer-cta {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    background: var(--green);
    color: var(--ink);
    border: none; border-radius: 14px;
    padding: 15px 24px;
    font-family: var(--rld-font, 'Plus Jakarta Sans'), sans-serif;
    font-size: 15px; font-weight: 800;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
}
.rld-cart-drawer-cta:hover:not(:disabled) { background: var(--green-2); }
.rld-cart-drawer-cta:disabled { opacity: 0.5; cursor: not-allowed; background: var(--green-soft); }

/* ── Bandeau frais de déplacement (#travel-fee-box) ───────────────────────── */
.rld-app .rld-tfb {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 14px;
    padding: 12px 16px;
    border-radius: 12px;
    font-family: var(--rld-font, 'Plus Jakarta Sans'), sans-serif;
    font-size: 13px;
    line-height: 1.45;
    border: 1.5px solid transparent;
}
.rld-app .rld-tfb-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    margin-top: 1px;
}
.rld-app .rld-tfb-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.rld-app .rld-tfb-title {
    font-size: 13px;
    font-weight: 700;
}
.rld-app .rld-tfb-dist {
    color: inherit;
    opacity: 0.85;
    font-size: 12px;
}
.rld-app .rld-tfb-fee {
    margin-left: 8px;
    font-weight: 800;
    font-size: 13px;
    opacity: 1;
}

/* État loading (calcul en cours) */
.rld-app .rld-tfb-loading {
    background: rgba(100, 105, 128, 0.06);
    border-color: rgba(100, 105, 128, 0.2);
    color: #646980;
}
.rld-app .rld-tfb-loading .rld-tfb-icon {
    background: rgba(100, 105, 128, 0.12);
    color: #646980;
}

/* Palier OK (zone de base) — vert */
.rld-app .rld-tfb-ok {
    background: rgba(var(--green-rgb), 0.08);
    border-color: rgba(var(--green-rgb), 0.35);
    color: var(--green-2);
}
.rld-app .rld-tfb-ok .rld-tfb-icon {
    background: rgba(var(--green-rgb), 0.18);
    color: var(--green-2);
}

/* Palier warn (zone éloignée) — orange */
.rld-app .rld-tfb-warn {
    background: rgba(255, 160, 0, 0.08);
    border-color: rgba(255, 160, 0, 0.35);
    color: #7a4800;
}
.rld-app .rld-tfb-warn .rld-tfb-icon {
    background: rgba(255, 160, 0, 0.18);
    color: #b36200;
}

/* Palier KO (hors zone) — rouge */
.rld-app .rld-tfb-ko {
    background: rgba(220, 53, 69, 0.07);
    border-color: rgba(220, 53, 69, 0.3);
    color: #8b1a23;
}
.rld-app .rld-tfb-ko .rld-tfb-icon {
    background: rgba(220, 53, 69, 0.15);
    color: #c0202d;
}

/* Badge "Hors zone" sur la carte Domicile */
.mode-tag-ko {
    background: rgba(220, 53, 69, 0.10);
    color: #c0202d;
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
}

/* ── Modale hors-zone ───────────────────────────────────────────────────────── */
.rld-oz-overlay {
    position: fixed; inset: 0; z-index: 99999;
    background: rgba(var(--navy-rgb), 0.55);
    backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    animation: rldOzFadeIn 0.18s ease;
}
@keyframes rldOzFadeIn { from { opacity: 0; } to { opacity: 1; } }

.rld-oz-dialog {
    position: relative;
    background: #fff;
    border-radius: 20px;
    padding: 36px 28px 28px;
    max-width: 380px; width: 100%;
    box-shadow: 0 24px 64px rgba(var(--navy-rgb), 0.18);
    text-align: center;
    animation: rldOzSlideUp 0.22s cubic-bezier(.22,.68,0,1.2);
}
@keyframes rldOzSlideUp { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.rld-oz-icon {
    width: 60px; height: 60px; border-radius: 50%;
    background: rgba(220, 53, 69, 0.09);
    color: #c0202d;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
}
.rld-oz-title {
    font-family: var(--rld-font-display, 'Plus Jakarta Sans'), sans-serif;
    font-size: 18px; font-weight: 800;
    color: var(--navy, var(--navy));
    margin: 0 0 10px;
}
.rld-oz-body {
    font-size: 14px; color: #555; line-height: 1.55;
    margin: 0 0 22px;
}
.rld-oz-actions {
    display: flex; flex-direction: column; gap: 10px;
}
.rld-oz-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    border: none; border-radius: 12px; padding: 13px 20px;
    font-size: 14px; font-weight: 700; cursor: pointer;
    transition: transform 0.12s, box-shadow 0.12s;
}
.rld-oz-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.12); }
.rld-oz-btn-shop { background: var(--navy, var(--navy)); color: #fff; }
.rld-oz-btn-mail { background: var(--green-soft, #e8fdf0); color: var(--navy, var(--navy)); }
.rld-oz-close {
    position: absolute; top: 14px; right: 16px;
    background: none; border: none; font-size: 16px;
    color: #aaa; cursor: pointer; padding: 4px 8px;
    border-radius: 6px; line-height: 1;
}
.rld-oz-close:hover { background: var(--gray-100, #f5f5f5); color: var(--navy, var(--navy)); }

/* ── Modale envoi par courrier ──────────────────────────────────────────────── */
.rld-mail-dialog {
    text-align: left;
    max-width: 440px;
    padding: 28px 28px 24px;
    max-height: 90vh;
    overflow-y: auto;
}
.rld-mail-header { text-align: center; margin-bottom: 20px; }
.rld-mail-icon {
    width: 56px; height: 56px; border-radius: 50%;
    background: rgba(var(--green-rgb), 0.10);
    color: var(--green, var(--green));
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 12px;
}
.rld-mail-steps { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.rld-mail-step {
    display: flex; align-items: flex-start; gap: 12px;
    background: var(--gray-100, #f7f7f9);
    border-radius: 12px; padding: 12px 14px;
}
.rld-mail-step-num {
    flex-shrink: 0;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--navy, var(--navy)); color: #fff;
    font-size: 11px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    margin-top: 1px;
}
.rld-mail-step-body { display: flex; flex-direction: column; gap: 2px; }
.rld-mail-step-body strong { font-size: 13px; color: var(--navy, var(--navy)); font-weight: 700; }
.rld-mail-step-body span { font-size: 12px; color: #666; line-height: 1.45; }
.rld-mail-addr-box {
    display: flex; align-items: flex-start; gap: 10px;
    background: #fff;
    border: 1.5px solid var(--green, var(--green));
    border-radius: 12px; padding: 12px 14px;
    margin-bottom: 14px;
    color: var(--navy, var(--navy));
}
.rld-mail-addr-box svg { flex-shrink: 0; margin-top: 2px; color: var(--green, var(--green)); }
.rld-mail-addr-box div { display: flex; flex-direction: column; gap: 2px; }
.rld-mail-addr-box strong { font-size: 13px; font-weight: 700; }
.rld-mail-addr-box span { font-size: 12px; color: #555; }
.rld-mail-contact { font-size: 12px; color: #777; text-align: center; margin: 0 0 16px; }
.rld-mail-contact a { color: var(--navy, var(--navy)); font-weight: 600; text-decoration: none; }
.rld-mail-contact a:hover { text-decoration: underline; }
.rld-mail-confirm-btn {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    width: 100%; border: none; border-radius: 12px; padding: 14px 20px;
    background: var(--navy, var(--navy)); color: #fff;
    font-size: 14px; font-weight: 700; cursor: pointer;
    transition: transform 0.12s, box-shadow 0.12s;
}
.rld-mail-confirm-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(var(--navy-rgb), 0.18); }

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

/* ── Device type selection (step 0) ── */
/* ── Étape APPAREIL — cartes premium (icône en "chip", coche, halo, cascade) ── */
.rld-device-type-section { padding: 18px 0 8px; text-align: center; }
.rld-device-type-eyebrow {
    display: inline-block; font-family: var(--rld-font, 'Plus Jakarta Sans'), sans-serif;
    font-size: 11.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--green-2); background: rgba(var(--green-rgb), 0.10);
    padding: 6px 13px; border-radius: 999px; margin-bottom: 16px;
}
.rld-device-type-title { font-family: var(--rld-font-display, 'Plus Jakarta Sans'), sans-serif; font-size: clamp(23px, 3.4vw, 32px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.12; color: var(--ink) !important; margin: 0 0 10px !important; text-align: center; }
.rld-device-type-lead { color: var(--gray-500); font-size: 15px; font-weight: 500; margin: 0 auto 34px; max-width: 470px; }
.rld-device-type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(164px, 1fr)); gap: 16px; max-width: 780px; margin: 0 auto; }

.rld-device-type-card {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px;
    padding: 26px 18px 22px; background: #fff; border: 1.5px solid var(--gray-200); border-radius: 20px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(var(--navy-rgb), 0.04), 0 6px 16px rgba(var(--navy-rgb), 0.05);
    transition: transform 0.24s cubic-bezier(0.23,1,0.32,1), box-shadow 0.24s cubic-bezier(0.23,1,0.32,1), border-color 0.2s ease, background 0.2s ease;
    opacity: 0; transform: translateY(10px);
    animation: rldCardRise 0.5s cubic-bezier(0.23,1,0.32,1) forwards;
}
.rld-device-type-card:nth-child(1){animation-delay:.04s}
.rld-device-type-card:nth-child(2){animation-delay:.10s}
.rld-device-type-card:nth-child(3){animation-delay:.16s}
.rld-device-type-card:nth-child(4){animation-delay:.22s}
.rld-device-type-card:nth-child(5){animation-delay:.28s}
@keyframes rldCardRise { to { opacity:1; transform:translateY(0); } }
.rld-device-type-card::before {
    content:''; position:absolute; inset:0; pointer-events:none;
    background: radial-gradient(90% 60% at 50% 0%, rgba(var(--green-rgb),0.10), transparent 70%);
    opacity:0; transition: opacity 0.25s ease;
}
.rld-device-type-icon {
    position: relative; width: 60px; height: 60px; border-radius: 17px;
    display: grid; place-items: center; flex-shrink: 0;
    background: linear-gradient(150deg, var(--gray-50), var(--gray-100)); color: var(--ink);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -8px 16px rgba(var(--navy-rgb), 0.03);
    transition: background 0.25s cubic-bezier(0.23,1,0.32,1), color 0.25s ease, box-shadow 0.25s ease, transform 0.24s cubic-bezier(0.23,1,0.32,1);
}
.rld-device-type-icon svg { width: 30px; height: 30px; }
.rld-device-type-label { display: flex; flex-direction: column; gap: 4px; }
.rld-device-type-name { font-size: 16.5px; font-weight: 800; letter-spacing: -0.015em; color: var(--ink); }
.rld-device-type-sub { font-size: 12px; font-weight: 600; color: var(--gray-500); transition: color 0.2s ease; }
.rld-device-type-check {
    position: absolute; top: 12px; right: 12px; width: 24px; height: 24px; border-radius: 50%;
    background: var(--green); color: #fff; display: grid; place-items: center;
    transform: scale(0.5); opacity: 0;
    transition: transform 0.28s cubic-bezier(0.23,1,0.32,1), opacity 0.2s ease;
    box-shadow: 0 3px 8px rgba(var(--green-rgb),0.4);
}
.rld-device-type-check svg { width: 13px; height: 13px; }
@media (hover: hover) and (pointer: fine) {
    .rld-device-type-card:hover {
        transform: translateY(-5px); border-color: rgba(var(--green-rgb),0.55);
        box-shadow: 0 2px 4px rgba(var(--navy-rgb), 0.05), 0 16px 34px rgba(var(--green-rgb),0.16);
    }
    .rld-device-type-card:hover::before { opacity: 1; }
    .rld-device-type-card:hover .rld-device-type-icon {
        background: linear-gradient(150deg, var(--green), var(--green-2)); color: #fff;
        transform: scale(1.06); box-shadow: 0 8px 20px rgba(var(--green-rgb),0.35);
    }
    .rld-device-type-card:hover .rld-device-type-sub { color: var(--ink); }
}
.rld-device-type-card:active { transform: scale(0.98) translateY(-2px); transition-duration: 0.1s; }
.rld-device-type-card.selected {
    border-color: var(--green); background: rgba(var(--green-rgb),0.05);
    box-shadow: 0 0 0 4px rgba(var(--green-rgb),0.14), 0 12px 30px rgba(var(--green-rgb),0.14);
}
.rld-device-type-card.selected::before { opacity: 1; }
.rld-device-type-card.selected .rld-device-type-icon {
    background: linear-gradient(150deg, var(--green), var(--green-2)); color: #fff;
    box-shadow: 0 8px 20px rgba(var(--green-rgb),0.35);
}
.rld-device-type-card.selected .rld-device-type-check { transform: scale(1); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .rld-device-type-card { animation: none; opacity: 1; transform: none; }
    .rld-device-type-card, .rld-device-type-icon, .rld-device-type-check, .rld-device-type-card::before { transition-duration: 0.01ms; }
}