/* ══════════════════════════════════════════════════════════════════════════
   Mondial Parts — Véhicule (Lot D, 15/09 · refonte tiroir 16/09)
   1) .mp-vp     : sélecteur recherchable Marque → Modèle → Motorisation
   2) .mp-gar    : menu « Mon Garage » du header (bascule de véhicule)
   3) .mp-vinfo  : panneau latéral « Informations du véhicule »
   4) .mp-vehd   : tiroir latéral « Identifiez votre véhicule » (16/09)
   5) .mp-vinres : résultats d'un décodage VIN / plaque (16/09)

   POURQUOI un fichier dédié : ces trois briques vivent à la fois dans le thème
   (header) et dans le module tecalliance_connector (widget accueil). Un seul
   fichier = un seul jeu de règles, toujours scopé mp-vp / mp-gar / mp-vinfo
   pour ne rien déborder sur le reste du site.
   ══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────── 1) Sélecteur véhicule ───────────────────────── */

.mp-vp {
    display: flex;
    gap: 12px;
    align-items: stretch;
    width: 100%;
    font-family: var(--mp-font-body, 'Plus Jakarta Sans', system-ui, sans-serif);
}

.mp-vp__step {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
}

.mp-vp__label {
    display: none; /* le placeholder suffit en ligne ; repris en plein écran mobile */
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 6px;
}

.mp-vp__control {
    position: relative;
}

.mp-vp__input {
    width: 100%;
    height: 48px;
    padding: 0 36px 0 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: border-color .2s, background .2s, box-shadow .2s;
    text-overflow: ellipsis;
}

.mp-vp__input:focus {
    outline: none;
}

.mp-vp__input:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.mp-vp__caret {
    position: absolute;
    right: 14px;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: 12px;
    transition: transform .18s;
}

.mp-vp__step.is-open .mp-vp__caret {
    transform: rotate(180deg);
}

/* Chargement d'une étape : le caret devient un spinner */
.mp-vp__step.is-loading .mp-vp__caret {
    background-image: none;
    border: 2px solid rgba(230, 168, 23, .25);
    border-top-color: var(--mp-accent, #e6a817);
    border-radius: 50%;
    animation: mpVpSpin .6s linear infinite;
}

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

.mp-vp__panel {
    position: absolute;
    z-index: 2147483001; /* au-dessus de la modale véhicule du header */
    top: calc(100% + 6px);
    left: 0;
    right: auto;
    /* 16/09 : dans le widget compact de l'accueil le champ fait ~120 px, la liste
       héritait de cette largeur et « 208 I (CA_, CC_) » se réduisait à « 2 ». */
    width: max(100%, 340px);
    max-height: 340px;
    /* 16/09 : `overflow: hidden auto` ICI + `overflow-y: auto` sur la liste
       faisaient DEUX zones défilantes imbriquées — d'où la barre blanche épaisse
       du retour user. Le panneau ne fait plus que rogner, la liste seule défile. */
    overflow: hidden;
    overscroll-behavior: contain;
    border-radius: 10px;
    box-shadow: 0 16px 44px rgba(0, 0, 0, .35);
    animation: mpVpIn .13s ease-out;
}

.mp-vp__panel[hidden] { display: none; }

@keyframes mpVpIn {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mp-vp__close {
    display: none; /* visible seulement en plein écran mobile */
}

.mp-vp__list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    max-height: 340px;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Ascenseur fin, aux couleurs du panneau (Firefox + WebKit) : la barre
       système par-dessus un panneau sombre affichait un bloc blanc. */
    scrollbar-width: thin;
}
.mp-vp__list::-webkit-scrollbar { width: 10px; }
.mp-vp__list::-webkit-scrollbar-track { background: transparent; }
.mp-vp__list::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background-clip: content-box;
}

/* Cale de défilement : voir fitPanel() dans vehicle-picker.js. Elle ne prend de
   la hauteur que pendant qu'une liste est ouverte, pour que le champ puisse
   remonter en haut du tiroir et que la liste ait toujours 7-8 lignes visibles. */
.mp-vp__spacer { display: none; }
.mp-vp--stacked.is-listing .mp-vp__spacer { display: block; flex: 0 0 340px; height: 340px; }

.mp-vp__grouphead {
    padding: 8px 14px 4px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--mp-accent, #e6a817);
}

.mp-vp__row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 9px 14px;
    font-size: 13.5px;
    cursor: pointer;
    scroll-margin: 4px;
}

.mp-vp__row--opt.is-child {
    padding-left: 30px;
}

.mp-vp__rowlabel {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-vp__rowmeta {
    flex: 0 0 auto;
    font-size: 11.5px;
    opacity: .68;
}

.mp-vp__chev {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    opacity: .55;
    transition: transform .15s;
    align-self: center;
}

.mp-vp__row--group.is-open .mp-vp__chev {
    transform: rotate(45deg);
}

.mp-vp__row--group .mp-vp__rowlabel {
    font-weight: 700;
}

.mp-vp__empty {
    padding: 16px 14px;
    font-size: 13px;
    opacity: .65;
}

/* ── Variante sombre (widget d'accueil, bande de recherche) ── */
.mp-vp--dark .mp-vp__input {
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .06);
    color: var(--mp-text-on-dark, #f5f5f4);
}
.mp-vp--dark .mp-vp__input::placeholder { color: rgba(255, 255, 255, .45); }
.mp-vp--dark .mp-vp__input:hover:not(:disabled) { border-color: rgba(230, 168, 23, .3); }
.mp-vp--dark .mp-vp__input:focus {
    border-color: var(--mp-accent, #e6a817);
    box-shadow: 0 0 0 3px rgba(230, 168, 23, .15);
}
.mp-vp--dark .mp-vp__label { color: rgba(255, 255, 255, .6); }
.mp-vp--dark .mp-vp__caret {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.45)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
.mp-vp--dark .mp-vp__panel {
    background: var(--mp-bg-deep, #141414);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #f0f0f0;
}
.mp-vp--dark .mp-vp__row:hover,
.mp-vp--dark .mp-vp__row.is-cursor { background: rgba(230, 168, 23, .16); }
.mp-vp--dark .mp-vp__list { scrollbar-color: rgba(255, 255, 255, .28) transparent; }
.mp-vp--dark .mp-vp__list::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, .28); }
.mp-vp--dark .mp-vp__list:hover::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, .45); }

/* ── Variante claire (modale header, fond blanc) ── */
.mp-vp--light .mp-vp__input {
    border: 1px solid #d8dbe0;
    background: #fff;
    color: #1a1a1a;
}
.mp-vp--light .mp-vp__input::placeholder { color: #9aa0a6; }
.mp-vp--light .mp-vp__input:hover:not(:disabled) { border-color: #b9a05a; }
.mp-vp--light .mp-vp__input:focus {
    border-color: var(--mp-accent, #e6a817);
    box-shadow: 0 0 0 3px rgba(230, 168, 23, .18);
}
.mp-vp--light .mp-vp__label { color: #6b7280; }
.mp-vp--light .mp-vp__caret {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
.mp-vp--light .mp-vp__panel {
    background: #fff;
    border: 1px solid #e3e6ea;
    color: #1a1a1a;
}
.mp-vp--light .mp-vp__grouphead { color: var(--mp-accent-text, #7a5a00); }
.mp-vp--light .mp-vp__row:hover,
.mp-vp--light .mp-vp__row.is-cursor { background: #fdf6e3; }
.mp-vp--light .mp-vp__row[aria-selected="true"] { background: #fdf6e3; font-weight: 700; }
.mp-vp--light .mp-vp__list { scrollbar-color: #c9ced6 transparent; }
.mp-vp--light .mp-vp__list::-webkit-scrollbar-thumb { background-color: #c9ced6; }
.mp-vp--light .mp-vp__list:hover::-webkit-scrollbar-thumb { background-color: #aeb5bf; }

/* ── Variante empilée (tiroir « Identifiez votre véhicule », 16/09) ──
   Champs pleine largeur de 52 px, libellé au-dessus, liste large et haute :
   c'est la seule disposition où l'on choisit un véhicule depuis le 16/09. */
.mp-vp--stacked {
    flex-direction: column;
    gap: 18px;
}
.mp-vp--stacked .mp-vp__label {
    display: block;
    font-size: 11px;
    letter-spacing: .07em;
    margin-bottom: 7px;
}
.mp-vp--light.mp-vp--stacked .mp-vp__label { color: #4b5563; }
.mp-vp--stacked .mp-vp__input {
    height: 52px;
    padding: 0 42px 0 16px;
    font-size: 15px;
    border-radius: 10px;
}
.mp-vp--stacked .mp-vp__caret { right: 16px; }
.mp-vp--stacked .mp-vp__panel {
    width: 100%;
    max-height: 380px;
}
.mp-vp--stacked .mp-vp__list { max-height: 380px; }
.mp-vp--stacked .mp-vp__row { padding: 11px 16px; font-size: 14px; }
.mp-vp--stacked .mp-vp__row--opt.is-child { padding-left: 34px; }
.mp-vp--stacked .mp-vp__grouphead { padding: 10px 16px 5px; }
/* État verrouillé lisible : un champ à 40 % d'opacité sur fond blanc disparaît. */
.mp-vp--light.mp-vp--stacked .mp-vp__input:disabled {
    opacity: 1;
    background: #f4f5f7;
    border-color: #e3e6ea;
    color: #9aa0a6;
}

/* ── Mobile : la liste ouverte passe en plein écran ── */
@media (max-width: 640px) {
    .mp-vp { flex-direction: column; }

    .mp-vp__step.is-open {
        position: fixed;
        inset: 0;
        z-index: 2147483002;
        display: flex;
        flex-direction: column;
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
        background: var(--mp-bg-deep, #141414);
    }
    .mp-vp--light .mp-vp__step.is-open { background: #fff; }

    .mp-vp__step.is-open .mp-vp__label { display: block; }

    .mp-vp__step.is-open .mp-vp__panel {
        position: static;
        flex: 1 1 auto;
        max-height: none;
        margin-top: 10px;
        border-radius: 0;
        box-shadow: none;
        border: 0;
        border-top: 1px solid rgba(128, 128, 128, .25);
        display: flex;
        flex-direction: column;
    }
    .mp-vp__step.is-open .mp-vp__list { max-height: none; flex: 1 1 auto; }

    /* 16/09 (retour user : « sur téléphone la recherche par modèle ne marche pas ») :
       dans le TIROIR (variante empilée), on n'ouvre plus la liste en plein écran
       `position: fixed` — le tiroir est lui-même fixe et animé en transform, ce qui
       peut confiner ou masquer un enfant fixe. La liste reste simplement sous son
       champ, dans le corps défilant du tiroir : rien à calculer, rien à cacher. */
    .mp-vp--stacked .mp-vp__step.is-open {
        position: static;
        inset: auto;
        z-index: auto;
        display: block;
        padding: 0;
        background: transparent;
    }
    .mp-vp--stacked .mp-vp__step.is-open .mp-vp__panel {
        position: static;
        display: block;
        margin-top: 8px;
        border: 1px solid #e3e6ea;
        border-radius: 10px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
        max-height: none;
    }
    .mp-vp--stacked .mp-vp__step.is-open .mp-vp__list { max-height: 320px; overflow-y: auto; }
    .mp-vp--stacked .mp-vp__step.is-open .mp-vp__close { display: none; }

    .mp-vp__step.is-open .mp-vp__close {
        display: block;
        align-self: flex-end;
        order: 2;
        margin-top: 8px;
        padding: 12px 18px;
        border: 0;
        border-radius: 8px;
        background: var(--mp-accent, #e6a817);
        color: #141414;
        font: inherit;
        font-weight: 800;
        cursor: pointer;
    }
    .mp-vp__row { padding: 13px 12px; font-size: 15px; }
}

/* ───────────────────────── 2) Menu « Mon Garage » ───────────────────────── */

.mp-gar-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
}
.mp-gar-trigger:hover { background: rgba(230, 168, 23, .14); }
.mp-gar-trigger__caret {
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    opacity: .7;
}

/* Intégration dans le bandeau véhicule et le chip de la bande de recherche :
   le libellé est passé de <span> à <button>, on lui rend son apparence de texte
   et on laisse le <span> intérieur porter la troncature (un conteneur flex ne
   tronque pas son contenu). */
.mp-vehicle-bar__value.mp-gar-trigger { color: #fff; font-weight: 700; }
.mp-gar-trigger > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

@media (max-width: 640px) {
    .mp-vehicle-bar__value.mp-gar-trigger { flex: 1 1 auto; min-width: 0; }
    .mp-vehicle-bar__value.mp-gar-trigger > span:first-child {
        white-space: normal;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }
}

.mp-gar {
    /* fixed : le menu est ancré sur un déclencheur d'en-tête sticky et suit le
       scroll via positionMenu() — pas de calcul de scrollY à maintenir. */
    position: fixed;
    z-index: 2147482900;
    min-width: 290px;
    max-width: min(360px, 92vw);
    background: #fff;
    color: #1a1a1a;
    border: 1px solid #e3e6ea;
    border-radius: 12px;
    box-shadow: 0 18px 46px rgba(0, 0, 0, .28);
    padding: 8px 0;
    font-family: var(--mp-font-body, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-size: 13.5px;
}
.mp-gar[hidden] { display: none; }

.mp-gar__head {
    padding: 6px 14px 8px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--mp-accent-text, #7a5a00);
}

.mp-gar__list { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; }

.mp-gar__item {
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* la confirmation de suppression prend toute la ligne dessous */
    gap: 8px;
    padding: 8px 10px 8px 14px;
}
.mp-gar__item + .mp-gar__item { border-top: 1px solid #f1f2f4; }
.mp-gar__item.is-active { background: #fdf6e3; }

.mp-gar__pick {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    padding: 2px 0;
    color: inherit;
}

.mp-gar__radio {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid #c4c8cf;
}
.mp-gar__item.is-active .mp-gar__radio {
    border-color: var(--mp-accent, #e6a817);
    background: radial-gradient(circle, var(--mp-accent, #e6a817) 0 45%, transparent 46%);
}

.mp-gar__txt { flex: 1 1 auto; min-width: 0; } /* 16/09 : sinon le nom du véhicule déborde du menu */
.mp-gar__name { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-gar__eng { display: block; font-size: 11.5px; color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mp-gar__del {
    flex: 0 0 auto;
    border: 0;
    background: none;
    cursor: pointer;
    color: #9aa0a6;
    padding: 6px;
    border-radius: 6px;
    line-height: 0;
}
.mp-gar__del:hover { color: var(--mp-danger, #dc2626); background: #fdf0ef; }

.mp-gar__confirm {
    flex: 1 0 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px -10px -8px -14px;
    padding: 8px 14px;
    background: #fdf0ef;
    font-size: 12.5px;
}
.mp-gar__confirm[hidden] { display: none; }
.mp-gar__confirm b { font-weight: 700; }
.mp-gar__confirm button {
    border: 0;
    border-radius: 6px;
    padding: 5px 11px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.mp-gar__yes { background: var(--mp-danger, #dc2626); color: #fff; }
.mp-gar__no { background: #e9ebee; color: #444; }

.mp-gar__sep { height: 1px; background: #eceef1; margin: 6px 0; }

.mp-gar__action {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 14px;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    color: #1a1a1a;
    text-decoration: none;
    cursor: pointer;
}
.mp-gar__action:hover { background: #f6f7f9; color: #1a1a1a; }
.mp-gar__action--add { font-weight: 700; color: var(--mp-accent-text, #7a5a00); }

.mp-gar__empty { padding: 10px 14px; color: #6b7280; }

/* ───────────────────── 3) Panneau « Informations véhicule » ───────────────────── */

.mp-vinfo {
    position: fixed;
    inset: 0;
    z-index: 2147483100;
    font-family: var(--mp-font-body, 'Plus Jakarta Sans', system-ui, sans-serif);
}
.mp-vinfo[hidden] { display: none; }

.mp-vinfo__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(13, 13, 13, .5);
}

.mp-vinfo__box {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 94vw);
    background: #fff;
    color: #1a1a1a;
    box-shadow: -14px 0 44px rgba(0, 0, 0, .3);
    display: flex;
    flex-direction: column;
    animation: mpVinfoIn .18s ease-out;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

@keyframes mpVinfoIn {
    from { transform: translateX(28px); opacity: .4; }
    to   { transform: translateX(0); opacity: 1; }
}

.mp-vinfo__head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 18px 18px 12px;
    border-bottom: 1px solid #eceef1;
}
.mp-vinfo__title { margin: 0; font-size: 1.05rem; font-weight: 800; }
.mp-vinfo__sub { margin: 3px 0 0; font-size: .82rem; color: #6b7280; }
.mp-vinfo__x {
    margin-left: auto;
    border: 0;
    background: none;
    font-size: 26px;
    line-height: 1;
    color: #8b9096;
    cursor: pointer;
}

.mp-vinfo__body { flex: 1 1 auto; overflow-y: auto; padding: 8px 18px 20px; }

.mp-vinfo__row {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f2f3f5;
    font-size: .88rem;
}
.mp-vinfo__row:last-child { border-bottom: 0; }
.mp-vinfo__k { flex: 0 0 44%; color: #6b7280; }
.mp-vinfo__v { flex: 1 1 auto; font-weight: 700; word-break: break-word; }

.mp-vinfo__msg { padding: 18px 0; color: #6b7280; font-size: .88rem; }

/* ═════════ 4) Tiroir latéral « Identifiez votre véhicule » (16/09) ═════════
   POURQUOI : la boîte modale de 440 px du header et les trois champs côte à côte
   du widget d'accueil donnaient des champs de ~120 px et une liste coupée par le
   bas de la carte (retour user du 16/09). Un tiroir pleine hauteur donne la place
   d'empiler Marque / Modèle / Motorisation en pleine largeur et de dérouler une
   liste de 7-8 lignes sans jamais la rogner. C'est désormais le SEUL endroit du
   site où l'on choisit un véhicule. */

.mp-vehd {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    font-family: var(--mp-font-body, 'Plus Jakarta Sans', system-ui, sans-serif);
}
.mp-vehd[hidden] { display: none; }

.mp-vehd__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(13, 13, 13, .55);
    animation: mpVehdFade .18s ease-out;
}

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

.mp-vehd__box {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(480px, 100vw);
    display: flex;
    flex-direction: column;
    background: #fff;
    color: #1a1a1a;
    box-shadow: -16px 0 50px rgba(0, 0, 0, .32);
    animation: mpVehdIn .2s ease-out;
}

@keyframes mpVehdIn {
    from { transform: translateX(34px); opacity: .5; }
    to   { transform: translateX(0); opacity: 1; }
}

.mp-vehd__badge { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 12px; display: block; }
.mp-vehd__head > div:not(.mp-vehd__badge) { flex: 1 1 auto; min-width: 0; }
.mp-vehd__head {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: calc(20px + env(safe-area-inset-top, 0px)) 24px 14px;
    border-bottom: 1px solid #eceef1;
}

.mp-vehd__title {
    margin: 0;
    font-family: var(--mp-font-display, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-size: 1.22rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #14161a;
}

.mp-vehd__sub {
    margin: 4px 0 0;
    font-size: .84rem;
    line-height: 1.45;
    color: #6b7280;
}

.mp-vehd__x {
    margin-left: auto;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 8px;
    background: #f4f5f7;
    color: #6b7280;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.mp-vehd__x:hover { background: #e9ebee; color: #1a1a1a; }
.mp-vehd__x:focus-visible { outline: 2px solid var(--mp-accent, #e6a817); outline-offset: 2px; }

/* Bandeau d'information : rappelle à quoi sert le choix du véhicule. */
.mp-vehd__note {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 14px 24px 0;
    padding: 11px 13px;
    border: 1px solid #f0d9a0;
    border-radius: 10px;
    background: #fdf6e3;
    font-size: .8rem;
    line-height: 1.45;
    color: #6b5316;
}
.mp-vehd__note svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; color: var(--mp-accent, #e6a817); }

/* Sélecteur segmenté Modèle / N° VIN (+ immatriculation grisée). */
.mp-vehd__seg {
    flex: 0 0 auto;
    display: flex;
    gap: 4px;
    margin: 16px 24px 0;
    padding: 4px;
    border-radius: 999px;
    background: #f1f2f4;
}

.mp-vehd__segbtn {
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap; /* 16/09 : « Immatriculation » se coupait en « matriculation » sur téléphone */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    padding: 0 10px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font: inherit;
    font-size: .84rem;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    white-space: nowrap;
    transition: background .18s, color .18s, box-shadow .18s;
}
.mp-vehd__segbtn:hover:not(:disabled) { color: #1a1a1a; }
.mp-vehd__segbtn.is-active {
    background: #fff;
    color: #14161a;
    font-weight: 800;
    box-shadow: 0 1px 3px rgba(13, 13, 13, .14);
}
.mp-vehd__segbtn:focus-visible { outline: 2px solid var(--mp-accent, #e6a817); outline-offset: 1px; }
/* Plaque : le service n'est pas branché — bouton inerte et annoncé comme tel,
   jamais un faux onglet actif. */
.mp-vehd__segbtn:disabled { color: #a9aeb6; cursor: not-allowed; }
.mp-vehd__soon {
    font-size: .62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 2px 6px;
    border-radius: 999px;
    background: #e4e6ea;
    color: #7b818a;
}

.mp-vehd__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #c9ced6 transparent;
    padding: 20px 24px calc(24px + env(safe-area-inset-bottom, 0px));
}
.mp-vehd__body::-webkit-scrollbar { width: 10px; }
.mp-vehd__body::-webkit-scrollbar-track { background: transparent; }
.mp-vehd__body::-webkit-scrollbar-thumb {
    background-color: #c9ced6;
    border: 3px solid transparent;
    border-radius: 999px;
    background-clip: content-box;
}

.mp-vehd__pane[hidden] { display: none; }

.mp-vehd__go {
    display: block;
    width: 100%;
    height: 52px;
    margin-top: 22px;
    border: 0;
    border-radius: 10px;
    background: var(--mp-accent, #e6a817);
    color: #1a1a1a;
    font: inherit;
    font-size: .95rem;
    font-weight: 800;
    cursor: pointer;
    transition: background .18s, box-shadow .18s;
}
.mp-vehd__go:hover:not(:disabled) { background: #d99a0d; box-shadow: 0 6px 18px rgba(230, 168, 23, .35); }
.mp-vehd__go:disabled {
    background: #eceef1;
    color: #9aa0a6;
    cursor: not-allowed;
}
.mp-vehd__go:focus-visible { outline: 2px solid #14161a; outline-offset: 2px; }

.mp-vehd__ghost {
    display: block;
    width: 100%;
    height: 46px;
    margin-top: 10px;
    border: 1px solid #dfe2e7;
    border-radius: 10px;
    background: #fff;
    font: inherit;
    font-size: .86rem;
    font-weight: 700;
    color: var(--mp-accent-text, #7a5a00);
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.mp-vehd__ghost:hover:not(:disabled) { background: #fdf6e3; border-color: #f0d9a0; }
.mp-vehd__ghost:disabled { color: #a9aeb6; cursor: not-allowed; }
.mp-vehd__ghost.is-done { color: #15803d; border-color: #bbf7d0; background: #f0fdf4; }

.mp-vehd__link {
    display: block;
    margin-top: 16px;
    text-align: center;
    font-size: .82rem;
    color: #6b7280;
    text-decoration: underline;
}
.mp-vehd__link:hover { color: var(--mp-accent-text, #7a5a00); }

.mp-vehd__label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #4b5563;
    margin-bottom: 7px;
}

.mp-vehd__inline { display: flex; gap: 10px; align-items: stretch; }

.mp-vehd__vin {
    flex: 1 1 auto;
    min-width: 0;
    height: 52px;
    padding: 0 14px;
    border: 1px solid #d8dbe0;
    border-radius: 10px;
    background: #fff;
    color: #1a1a1a;
    font-family: var(--mp-font-mono, ui-monospace, monospace);
    font-size: 15px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.mp-vehd__vin::placeholder { color: #b6bbc2; letter-spacing: 1px; }
.mp-vehd__vin:focus {
    outline: none;
    border-color: var(--mp-accent, #e6a817);
    box-shadow: 0 0 0 3px rgba(230, 168, 23, .18);
}

.mp-vehd__arrow {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: var(--mp-accent, #e6a817);
    color: #1a1a1a;
    cursor: pointer;
    transition: background .18s;
}
.mp-vehd__arrow:hover:not(:disabled) { background: #d99a0d; }
.mp-vehd__arrow:disabled { background: #eceef1; color: #9aa0a6; cursor: not-allowed; }
.mp-vehd__arrow:focus-visible { outline: 2px solid #14161a; outline-offset: 2px; }

.mp-vehd__hint {
    margin: 10px 0 0;
    font-size: .78rem;
    line-height: 1.5;
    color: #6b7280;
}

/* Mobile : plein écran, la carte n'a plus de marge à perdre. */
@media (max-width: 640px) {
    .mp-vehd__box { width: 100%; box-shadow: none; }
    .mp-vehd__head { padding-left: 16px; padding-right: 16px; }
    .mp-vehd__note,
    .mp-vehd__seg { margin-left: 16px; margin-right: 16px; }
    .mp-vehd__body { padding-left: 16px; padding-right: 16px; }
    .mp-vehd__segbtn { font-size: .8rem; padding: 0 6px; }
    .mp-vehd__soon { display: none; }
}

/* ═════════ 5) Résultats d'un décodage VIN / plaque (16/09) ═════════
   Rendu partagé (MpVehiclePicker.vin) : fond sombre dans le widget d'accueil,
   fond clair dans le tiroir. Un seul balisage, deux variantes. */

.mp-vinres { margin-top: 14px; font-size: 13px; }
.mp-vinres:empty { display: none; }

.mp-vinres__ok { font-size: 13px; font-weight: 700; margin-bottom: 12px; color: #16a34a; }
.mp-vinres__err { font-size: 13px; font-weight: 600; color: var(--mp-danger, #dc2626); padding: 4px 0; }
.mp-vinres__wait { font-size: 13px; color: var(--mp-accent, #e6a817); padding: 6px 0; }
.mp-vinres__hint { font-size: 12px; color: #6b7280; margin-top: 4px; }

.mp-vinres__list { display: flex; flex-direction: column; gap: 10px; }

.mp-vinres__card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 15px;
    border-radius: 10px;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.mp-vinres__txt { flex: 1 1 auto; min-width: 0; }
.mp-vinres__name { display: block; font-size: 14.5px; font-weight: 700; }
.mp-vinres__desc { display: block; font-size: 12px; margin-top: 2px; color: var(--mp-accent, #e6a817); }
.mp-vinres__specs { display: block; font-size: 11.5px; margin-top: 4px; opacity: .72; }

.mp-vinres__go {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: .5;
}

.mp-vinres--dark .mp-vinres__card { background: #1a1a1a; border: 1px solid #333; color: #f0f0f0; }
.mp-vinres--dark .mp-vinres__card:hover { background: #222; border-color: var(--mp-accent, #e6a817); }

.mp-vinres--light .mp-vinres__card { background: #fff; border: 1px solid #e3e6ea; color: #1a1a1a; }
.mp-vinres--light .mp-vinres__card:hover { background: #fdf6e3; border-color: #f0d9a0; }
.mp-vinres--light .mp-vinres__desc { color: var(--mp-accent-text, #7a5a00); }