/* product-modal.css — Modal de création / édition d'un produit.
   Repris du handoff design_handoff_add_product_modal.
   Tout est scopé sous .product-modal pour ne pas entrer en conflit avec
   les styles .btn/.input/.field/.modal des pages hôtes. */

.product-modal {
    /* Tokens locaux à la modal (le design system du site utilise --mm-*) */
    --pm-indigo-50:  #eef2ff;
    --pm-indigo-100: #e0e7ff;
    --pm-indigo-300: #a5b4fc;
    --pm-indigo-400: #818cf8;
    --pm-indigo-500: #6366f1;
    --pm-indigo-600: #5b6cf0;
    --pm-indigo-700: #4338ca;
    --pm-gold-400:   oklch(82% 0.16 86);
    --pm-ink:        #1a202c;
    --pm-ink-2:      #4a5568;
    --pm-muted:      #94a3b8;
    --pm-muted-2:    #cbd5e0;
    --pm-hairline:   #e2e8f0;
    --pm-surface:    #fbfbfd;
    --pm-surface-2:  #f6f7f9;
    --pm-surface-3:  #eef2f7;
    --pm-white:      #ffffff;
    --pm-radius-sm:  8px;
    --pm-radius:     14px;
    --pm-radius-lg:  20px;
    --pm-radius-xl:  24px;
    --pm-danger:     oklch(58% 0.18 25);

    /* ===== OVERLAY ===== */
    display: none;
    position: fixed;
    /* Hauteur EXPLICITE : dans certaines WebView Android, inset:0 + display:grid
       ne donne pas de hauteur au conteneur → le max-height:% du sheet vaut 0
       et la modale est invisible (page figée). On fixe top/left/right/bottom ET
       width/height à 100% pour garantir une hauteur réelle. */
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    z-index: 1000;
    background: rgba(15, 10, 30, 0.55);
    place-items: center;
    padding: 24px 16px;
    overflow-y: auto;
    font-family: var(--mm-font-ui, "Plus Jakarta Sans", system-ui, sans-serif);
}
.product-modal.active {
    display: grid;
    animation: pm-fade .15s ease-out;
}
@keyframes pm-fade { from { opacity: 0; } to { opacity: 1; } }

/* ===== SHEET ===== */
.product-modal .modal-sheet {
    background: var(--pm-white);
    border: 1px solid var(--pm-hairline);
    border-radius: var(--pm-radius-xl);
    width: 100%;
    max-width: 860px;
    /* max-height en % SEULEMENT : vh ET dvh se calculent à 0 dans cette WebView
       Android (constaté), ce qui écrasait la sheet à une hauteur nulle et
       figeait la page. Le parent .product-modal a désormais height:100% donc
       le % est fiable. */
    max-height: 92%;
    /* height:auto explicite : sans ça, le sheet flex + overflow:hidden se
       calcule à ~2px de haut dans cette WebView Android (contenu écrasé,
       modale invisible → page figée). */
    height: auto;
    display: flex; flex-direction: column;
    box-shadow: 0 2px 4px rgba(20,16,40,0.06), 0 30px 60px -25px rgba(20,16,40,0.35);
    /* overflow:visible (au lieu de hidden) : hidden combiné au bug flex ci-dessus
       masquait tout le contenu. Le scroll interne est géré par .modal-body. */
    overflow: visible;
    animation: pm-pop .25s cubic-bezier(.2,.8,.2,1);
}
@keyframes pm-pop {
    from { opacity: 0; transform: translateY(12px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

/* ===== HEAD ===== */
.product-modal .modal-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    padding: 20px 26px;
    border-bottom: 1px solid var(--pm-hairline);
    background: var(--pm-surface);
    flex-shrink: 0;
}
.product-modal .modal-head h2 {
    font-family: var(--mm-font-display, inherit);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--pm-ink);
}
.product-modal .modal-head .sub { font-size: 13px; color: var(--pm-muted); margin-top: 2px; }
.product-modal .modal-head .sub strong { color: var(--pm-ink); }
.product-modal .modal-close {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--pm-surface-2);
    border: 1px solid var(--pm-hairline);
    display: grid; place-items: center;
    cursor: pointer;
    color: var(--pm-muted);
    flex-shrink: 0;
    transition: background .15s, color .15s;
}
.product-modal .modal-close:hover { background: var(--pm-surface-3); color: var(--pm-ink); }

/* ===== BODY ===== */
.product-modal .modal-body {
    overflow-y: auto;
    padding: 22px 26px;
    flex: 1;
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 28px;
}

/* ===== FOOT ===== */
.product-modal .modal-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 16px 26px;
    border-top: 1px solid var(--pm-hairline);
    background: var(--pm-surface);
    flex-shrink: 0;
}
.product-modal .req-note {
    font-size: 12px; color: var(--pm-muted);
    display: inline-flex; align-items: center; gap: 6px;
}
.product-modal .req-note .req,
.product-modal .field-label .req { color: var(--pm-danger); font-weight: 700; }
.product-modal .modal-foot .actions { display: flex; gap: 10px; }

/* ===== LEFT : image ===== */
.product-modal .modal-side { display: flex; flex-direction: column; gap: 12px; }
.product-modal .image-drop {
    aspect-ratio: 3/4;
    border-radius: var(--pm-radius-lg);
    border: 2px dashed var(--pm-hairline);
    background: var(--pm-surface-2);
    display: grid; place-items: center;
    text-align: center;
    padding: 18px;
    color: var(--pm-muted);
    cursor: pointer;
    transition: all .15s;
    width: 100%;
    font-family: inherit;
}
.product-modal .image-drop:hover {
    border-color: var(--pm-indigo-400);
    background: var(--pm-indigo-50);
    color: var(--pm-indigo-700);
}
.product-modal .image-drop .icon-circle {
    width: 48px; height: 48px;
    border-radius: 14px;
    background: var(--pm-white);
    border: 1px solid var(--pm-hairline);
    display: grid; place-items: center;
    margin: 0 auto 10px;
    color: var(--pm-indigo-600);
}
.product-modal .image-drop .title { font-weight: 700; font-size: 13px; color: var(--pm-ink); }
.product-modal .image-drop .desc { font-size: 11px; margin-top: 4px; line-height: 1.4; }

/* Note : image de la référence utilisée par défaut */
.product-modal .image-ref-hint {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 9px 11px;
    border-radius: 10px;
    background: color-mix(in oklab, oklch(70% 0.16 150), transparent 90%);
    border: 1px solid color-mix(in oklab, oklch(70% 0.16 150), transparent 72%);
    color: oklch(38% 0.12 150);
    font-size: 11.5px;
    line-height: 1.4;
    font-weight: 500;
}
.product-modal .image-ref-hint svg { flex-shrink: 0; margin-top: 1px; }

.product-modal .image-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.product-modal .image-thumbs .thumb {
    aspect-ratio: 1;
    border-radius: 8px;
    background: var(--pm-surface-3);
    border: 1px solid var(--pm-hairline);
    overflow: hidden;
    position: relative;
}
.product-modal .image-thumbs .thumb img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
}
.product-modal .image-thumbs .thumb.is-primary { border-color: var(--pm-indigo-500); }
.product-modal .image-thumbs .thumb .thumb-star {
    position: absolute; top: 3px; left: 3px;
    background: var(--pm-indigo-600); color: white;
    font-size: 9px; font-weight: 700;
    padding: 1px 5px; border-radius: 4px;
}
.product-modal .image-thumbs .thumb .thumb-badge {
    position: absolute; bottom: 3px; left: 3px;
    background: rgba(0,0,0,0.65); color: white;
    font-size: 9px; font-weight: 700;
    padding: 1px 6px; border-radius: 4px;
    letter-spacing: 0.2px;
}
.product-modal .image-thumbs .thumb .thumb-actions {
    position: absolute; top: 3px; right: 3px;
    display: flex; gap: 3px;
}
.product-modal .image-thumbs .thumb .thumb-actions button {
    width: 20px; height: 20px;
    border: 0; border-radius: 5px;
    background: rgba(255,255,255,0.92);
    cursor: pointer;
    font-size: 10px;
    display: grid; place-items: center;
    padding: 0;
}
.product-modal .image-thumbs .thumb .thumb-actions button:hover { background: white; }
.product-modal .image-thumbs .thumb.add {
    border-style: dashed;
    display: grid; place-items: center;
    cursor: pointer;
    color: var(--pm-muted);
    font-size: 22px;
}
.product-modal .image-thumbs .thumb.add:hover {
    border-color: var(--pm-indigo-400);
    color: var(--pm-indigo-600);
    background: var(--pm-indigo-50);
}

/* ===== FIELDS ===== */
.product-modal .modal-fields { display: flex; flex-direction: column; gap: 18px; }

.product-modal .field-section-title {
    display: flex; align-items: center; gap: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pm-muted);
    margin: 4px 0 0;
}
.product-modal .field-section-title .line { flex: 1; height: 1px; background: var(--pm-hairline); }

.product-modal .field { display: flex; flex-direction: column; gap: 6px; }
.product-modal .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.product-modal .field-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--pm-ink-2);
    display: flex; align-items: center; gap: 6px;
    flex-wrap: wrap;
}
.product-modal .field-label .help { color: var(--pm-muted); font-weight: 500; font-size: 12px; }

/* Inputs */
.product-modal .input,
.product-modal .select,
.product-modal .textarea {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    font-family: inherit;
    color: var(--pm-ink);
    background: var(--pm-white);
    border: 1px solid var(--pm-hairline);
    border-radius: 10px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
.product-modal .input:hover,
.product-modal .select:hover { border-color: var(--pm-muted-2); }
.product-modal .input:focus,
.product-modal .select:focus,
.product-modal .textarea:focus {
    border-color: var(--pm-indigo-400);
    box-shadow: 0 0 0 4px rgba(99,102,241,0.12);
}
.product-modal .input::placeholder,
.product-modal .textarea::placeholder { color: var(--pm-muted-2); }
.product-modal .select { cursor: pointer; }

.product-modal .input-suffix,
.product-modal .input-prefix { position: relative; display: flex; align-items: center; }
.product-modal .input-suffix .input { padding-right: 36px; }
.product-modal .input-suffix .suffix {
    position: absolute; right: 14px;
    color: var(--pm-muted); font-size: 14px;
    pointer-events: none; font-weight: 600;
}
.product-modal .input-prefix { flex: 1; }
.product-modal .input-prefix .input { padding-left: 38px; }
.product-modal .input-prefix .prefix {
    position: absolute; left: 14px;
    color: var(--pm-muted); pointer-events: none;
    display: flex; align-items: center;
}
.product-modal .field-with-action { display: flex; gap: 8px; }

/* Cascade catégories (plusieurs selects empilés) */
.product-modal .cascade { display: flex; flex-direction: column; gap: 6px; }
.product-modal .cascade select {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    font-family: inherit;
    color: var(--pm-ink);
    background: var(--pm-white);
    border: 1px solid var(--pm-hairline);
    border-radius: 10px;
    outline: none;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.product-modal .cascade select:hover { border-color: var(--pm-muted-2); }
.product-modal .cascade select:focus {
    border-color: var(--pm-indigo-400);
    box-shadow: 0 0 0 4px rgba(99,102,241,0.12);
}

/* ===== BUTTONS ===== */
.product-modal .btn {
    padding: 9px 16px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    border: 1px solid transparent;
    background: var(--pm-surface-2);
    color: var(--pm-ink);
    transition: all .15s;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    line-height: 1;
}
.product-modal .btn:hover { background: var(--pm-surface-3); }
.product-modal .btn-primary {
    background: var(--pm-indigo-600);
    color: white;
    box-shadow: 0 1px 0 0 var(--pm-indigo-700) inset,
                0 6px 20px -8px var(--pm-indigo-500);
}
.product-modal .btn-primary:hover { background: var(--pm-indigo-700); }
.product-modal .btn-ghost { background: transparent; border-color: var(--pm-hairline); }
.product-modal .btn-ghost:hover { background: var(--pm-surface-2); }
.product-modal .btn:disabled { opacity: 0.6; cursor: wait; }

/* ===== CONDITION RADIOS ===== */
.product-modal .condition-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.product-modal .cond-radio {
    border: 1px solid var(--pm-hairline);
    background: var(--pm-white);
    border-radius: 10px;
    padding: 10px 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pm-ink-2);
    cursor: pointer;
    text-align: center;
    transition: all .15s;
    font-family: inherit;
}
.product-modal .cond-radio:hover { border-color: var(--pm-indigo-300); background: var(--pm-surface-2); }
.product-modal .cond-radio[aria-checked="true"] {
    border-color: var(--pm-indigo-500);
    background: var(--pm-indigo-50);
    color: var(--pm-indigo-700);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}
.product-modal .cond-radio .dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

/* ===== MODAL COMPACTE (signalement) ===== */
.product-modal.modal-sm .modal-sheet { max-width: 480px; }
.product-modal.modal-sm .modal-body { display: block; }

/* Note "signaler" sous un scan-match trouvé */
.product-modal .scan-report-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 9px 12px;
    border-radius: 10px;
    background: var(--pm-surface-2);
    border: 1px solid var(--pm-hairline);
    font-size: 12px;
    color: var(--pm-ink-2);
    line-height: 1.4;
}
.product-modal .scan-report-note span { flex: 1; min-width: 0; }
.product-modal .scan-report-note .btn-report {
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--pm-hairline);
    background: var(--pm-white);
    color: var(--pm-ink);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s;
}
.product-modal .scan-report-note .btn-report:hover {
    border-color: oklch(62% 0.2 25);
    color: oklch(55% 0.2 25);
    background: color-mix(in oklab, oklch(62% 0.2 25), transparent 94%);
}

/* Champ en lecture seule (code-barre du signalement) */
.product-modal .input[readonly] {
    background: var(--pm-surface-2);
    color: var(--pm-ink-2);
    cursor: default;
}

/* ===== SCAN MATCH ===== */
.product-modal .scan-match {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: color-mix(in oklab, oklch(70% 0.16 150), transparent 88%);
    border: 1px solid color-mix(in oklab, oklch(70% 0.16 150), transparent 60%);
    animation: pm-scan-pop .25s cubic-bezier(.2,.8,.2,1);
    margin-top: 6px;
}
.product-modal .scan-match.not-found {
    background: color-mix(in oklab, oklch(80% 0.13 75), transparent 86%);
    border-color: color-mix(in oklab, oklch(80% 0.13 75), transparent 55%);
}
.product-modal .scan-match.error {
    background: color-mix(in oklab, oklch(62% 0.2 25), transparent 90%);
    border-color: color-mix(in oklab, oklch(62% 0.2 25), transparent 65%);
}
.product-modal .scan-match.error .check { background: oklch(58% 0.2 25); }
.product-modal .scan-match.error .text { color: oklch(42% 0.16 25); }
.product-modal .scan-match.error .text strong { color: oklch(34% 0.16 25); }
@keyframes pm-scan-pop {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}
.product-modal .scan-match .check {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: oklch(58% 0.16 150);
    color: white;
    display: grid; place-items: center;
    flex-shrink: 0;
}
.product-modal .scan-match.not-found .check { background: oklch(62% 0.15 75); }
.product-modal .scan-match .text {
    flex: 1; min-width: 0;
    font-size: 13px;
    color: oklch(40% 0.13 150);
    font-weight: 500;
    line-height: 1.4;
}
.product-modal .scan-match.not-found .text { color: oklch(40% 0.1 70); }
.product-modal .scan-match .text strong {
    color: oklch(28% 0.13 150);
    font-weight: 700;
    display: block;
    font-size: 14px;
    font-family: var(--mm-font-display, inherit);
    letter-spacing: -0.01em;
    margin-bottom: 2px;
}
.product-modal .scan-match.not-found .text strong { color: oklch(32% 0.1 70); }
.product-modal .scan-match .btn-primary {
    background: oklch(48% 0.16 150);
    box-shadow: 0 6px 18px -8px oklch(50% 0.16 150);
    flex-shrink: 0;
}
.product-modal .scan-match .btn-primary:hover { background: oklch(40% 0.16 150); }

/* ===== SCAN MATCH — DÉSAMBIGUÏSATION ===== */
/* Liste affichée quand un même code-barre matche plusieurs références. */
.product-modal .ref-pick-list {
    display: flex; flex-direction: column; gap: 8px;
    margin-top: 8px;
    animation: pm-scan-pop .25s cubic-bezier(.2,.8,.2,1);
}
.product-modal .ref-pick-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    background: var(--pm-white);
    border: 1px solid var(--pm-hairline);
    border-radius: 12px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    transition: border-color .15s, background .15s, transform .15s;
}
.product-modal .ref-pick-row:hover {
    border-color: color-mix(in oklab, var(--pm-indigo-500, oklch(58% 0.18 280)), transparent 50%);
    background: color-mix(in oklab, var(--pm-indigo-500, oklch(58% 0.18 280)), transparent 96%);
}
.product-modal .ref-pick-row:active { transform: translateY(1px); }
.product-modal .ref-pick-thumb {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: var(--pm-soft, #f1f3f7);
    object-fit: cover;
    flex-shrink: 0;
}
.product-modal .ref-pick-thumb.placeholder {
    display: grid; place-items: center;
    color: oklch(70% 0.02 280);
    font-size: 18px;
}
.product-modal .ref-pick-body { flex: 1; min-width: 0; }
.product-modal .ref-pick-name {
    font-family: var(--mm-font-display, inherit);
    font-weight: 700;
    font-size: 14px;
    color: var(--pm-ink, #2d3748);
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.product-modal .ref-pick-meta {
    font-size: 12px;
    color: var(--pm-muted, #718096);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}
.product-modal .ref-pick-cat {
    color: var(--pm-indigo-700, oklch(40% 0.18 280));
    font-weight: 600;
}
.product-modal .ref-pick-chevron {
    color: var(--pm-indigo-500, oklch(58% 0.18 280));
    font-weight: 700;
    font-size: 18px;
    flex-shrink: 0;
    transition: transform .15s;
}
.product-modal .ref-pick-row:hover .ref-pick-chevron { transform: translateX(2px); }

/* ===== PRIVATE SECTION ===== */
.product-modal .private-section {
    border-radius: var(--pm-radius);
    background: color-mix(in oklab, var(--pm-gold-400), transparent 90%);
    border: 1px solid color-mix(in oklab, var(--pm-gold-400), transparent 70%);
    padding: 16px 18px;
    display: flex; flex-direction: column; gap: 14px;
}
.product-modal .private-head { display: flex; align-items: center; gap: 12px; }
.product-modal .lock-icon {
    width: 32px; height: 32px;
    border-radius: 9px;
    background: oklch(70% 0.13 75);
    color: white;
    display: grid; place-items: center;
    flex-shrink: 0;
}
.product-modal .private-title {
    font-family: var(--mm-font-display, inherit);
    font-weight: 700;
    font-size: 14px;
    color: oklch(35% 0.1 70);
    letter-spacing: -0.01em;
}
.product-modal .private-sub {
    font-size: 12px;
    color: oklch(45% 0.08 70);
    margin-top: 1px;
    font-weight: 500;
}
.product-modal .private-section .input { background: var(--pm-white); }

/* ===== CHAMPS SPÉCIFIQUES ===== */
.product-modal .cf-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.product-modal .cf-field:last-child { margin-bottom: 0; }
.product-modal .cf-field.boolean {
    flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem;
}
.product-modal .cf-field .field-label { margin: 0; }

/* Toggle booléen */
.product-modal .tgl {
    width: 44px; height: 24px;
    border-radius: 999px;
    background: var(--pm-muted-2);
    border: 0;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: background 0.2s;
    padding: 0;
}
.product-modal .tgl::before {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    transition: transform 0.2s;
}
.product-modal .tgl.on { background: var(--pm-indigo-600); }
.product-modal .tgl.on::before { transform: translateX(20px); }

/* ===== COLLECTION FIELD (édition) ===== */
.product-modal .collection-row { display: flex; gap: 8px; align-items: center; }
.product-modal .collection-row .select { flex: 1; }
.product-modal .collection-warning {
    font-size: 12px;
    color: oklch(55% 0.13 50);
    margin-top: 2px;
}

/* ===== ÉDITEUR DESCRIPTION ===== */
/* L'éditeur (editor.js) injecte sa propre structure .rt-editor ; on le
   neutralise visuellement pour qu'il colle au style de la modal. */
.product-modal .rt-editor {
    border: 1px solid var(--pm-hairline) !important;
    border-radius: 10px !important;
}
.product-modal .rt-editor:focus-within {
    border-color: var(--pm-indigo-400) !important;
    box-shadow: 0 0 0 4px rgba(99,102,241,0.12);
}
.product-modal textarea.input {
    min-height: 80px;
    resize: vertical;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 720px) {
    /* Unités % SEULEMENT (pas de vh/dvh : ils valent 0 dans cette WebView
       Android et écrasent la hauteur → modale invisible / page figée).
       Le parent est fixed height:100%, donc % = plein écran. */
    .product-modal { padding: 0; height: 100%; }
    .product-modal .modal-sheet {
        max-width: none;
        max-height: 100%;
        height: 100%;
        border-radius: 0;
    }
    .product-modal .modal-body {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 18px 18px 24px;
    }
    /* Mobile : le formulaire d'abord, l'ajout d'image en fin de modal */
    .product-modal .modal-fields { order: 1; }
    .product-modal .modal-side { order: 2; }
    .product-modal .image-drop { aspect-ratio: 16/9; }
    /* Sur mobile, les vignettes apparaissent AU-DESSUS du bouton « Ajouter
       une photo » : les utilisateurs ne défilent pas toujours, et plaçaient
       déjà une photo sans s'en rendre compte. */
    .product-modal .modal-side .image-drop { order: 2; }
    .product-modal .modal-side .image-thumbs { order: 1; }
    /* Idem pour les hints / galeries éventuelles (cas reference-form). */
    .product-modal .modal-side .image-ref-hint,
    .product-modal .modal-side .rfm-gallery { order: 1; }
    .product-modal .field-row { grid-template-columns: 1fr; gap: 16px; }
    .product-modal .condition-grid { grid-template-columns: repeat(2, 1fr); }
    .product-modal .modal-head { padding: 16px 18px; }
    .product-modal .modal-head h2 { font-size: 19px; }
    .product-modal .modal-foot { padding: 12px 18px; flex-wrap: wrap; }
    .product-modal .req-note { width: 100%; }
    .product-modal .modal-foot .actions { width: 100%; }
    .product-modal .modal-foot .actions .btn { flex: 1; }
    .product-modal .scan-match { flex-wrap: wrap; }
    .product-modal .scan-match .text { flex: 1 0 60%; }
}

/* ============================================================
   Recherche de références sur le champ Nom (add-product-modal)
   Dropdown de suggestions sous l'input, ~10 résultats visibles
   puis scroll. Repris du style de my-tops, en position absolue
   (la modale a un .modal-body scrollable → pas de position:fixed).
   ============================================================ */
.product-modal .search-ref { position: relative; }
.product-modal .search-ref-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    /* ~10 items (chaque item ≈ 44px) puis scrollbar. */
    max-height: 440px;
    overflow-y: auto;
    z-index: 50;
    box-shadow: 0 12px 32px rgba(0,0,0,0.15);
    display: none;
}
.product-modal .search-ref-results.active { display: block; }
.product-modal .search-ref-item {
    padding: 0.6rem 0.9rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: #1a202c;
    border-bottom: 1px solid #eef1f5;
    transition: background 0.12s;
}
.product-modal .search-ref-item:hover { background: #f6f7f9; }
.product-modal .search-ref-item:last-child { border-bottom: 0; }
.product-modal .search-ref-item small {
    color: #94a3b8;
    margin-left: 0.4rem;
    font-size: 0.78rem;
}

/* Meta inline sous le nom d'un résultat + popover de détail au survol
   (repris de my-tops, style aligné). */
.product-modal .search-ref-item-meta {
    margin-top: 0.3rem;
    color: #94a3b8;
    font-size: 0.78rem;
    line-height: 1.45;
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.45rem;
}
.product-modal .search-ref-item-meta > span { display: inline-block; }
.product-modal .search-ref-item-meta .meta-sep { color: #cbd5e0; }
@media (max-width: 600px) {
    .product-modal .search-ref-item-meta { flex-direction: column; gap: 0.1rem; }
    .product-modal .search-ref-item-meta .meta-sep { display: none; }
}

/* Popover créé sur document.body (hors .product-modal) → pas de préfixe. */
.search-ref-popover {
    position: fixed;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.15);
    padding: 0.85rem 1rem;
    font-size: 0.85rem;
    color: #4a5568;
    line-height: 1.5;
    z-index: 100000;
    max-width: 320px;
    min-width: 220px;
    pointer-events: none;
}
.search-ref-popover .pop-title {
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.35rem;
    word-wrap: break-word;
}
.search-ref-popover .pop-row { display: flex; gap: 0.4rem; margin-top: 0.15rem; }
.search-ref-popover .pop-key { color: #94a3b8; min-width: 90px; }
.search-ref-popover .pop-val { color: #1a202c; word-break: break-word; }

/* Vignette de l'image de la référence au préremplissage (colonne image). */
.product-modal .ref-image-preview {
    position: relative;
    margin-top: 10px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    background: #f6f7f9;
}
.product-modal .ref-image-preview img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 220px;
    object-fit: contain;
    background: #fff;
}
.product-modal .ref-image-preview .ref-image-badge {
    position: absolute;
    left: 8px;
    bottom: 8px;
    background: rgba(102,126,234,0.95);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    letter-spacing: 0.02em;
}