/*
    MME 2026-10-02: Mise en page et contrôles de index.html, alignés sur l'apparence actuelle de l'admin Shopify.
    Les contrôles natifs (input, select, textarea, button) sont stylés ici : le JS de la page les lit et les modifie
    directement avec leurs id, il n'y a pas de composants à initialiser.
*/

:root {
    --bs-bg: #f1f1f1;
    --bs-surface: #ffffff;
    --bs-surface-subdued: #f7f7f7;
    --bs-text: #303030;
    --bs-text-subdued: #616161;
    --bs-text-disabled: #b5b5b5;
    --bs-border: #8a8a8a;
    --bs-border-subdued: #e3e3e3;
    --bs-divider: #ebebeb;
    --bs-focus: #005bd3;
    --bs-link: #005bd3;
    --bs-critical: #c70a24;
    --bs-critical-text: #8e1f0b;
    --bs-critical-surface: #fee9e8;
    --bs-success-surface: #cdfee1;
    --bs-success-text: #0c5132;
    --bs-info-surface: #eaf4ff;
    --bs-radius: 12px;
    --bs-radius-control: 8px;
    --bs-gap: 16px;
    --bs-font: -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --bs-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

html, body {
    background: var(--bs-bg);
}

body.bs-ui {
    margin: 0;
    color: var(--bs-text);
    font-family: var(--bs-font);
    font-size: 13px;
    font-weight: 450;
    line-height: 20px;
    -webkit-font-smoothing: antialiased;
}

.bs-ui *, .bs-ui *::before, .bs-ui *::after {
    box-sizing: border-box;
}

.bs-ui [hidden] {
    display: none !important;
}

.bs-ui h1, .bs-ui h2, .bs-ui h3, .bs-ui p {
    margin: 0;
}

.bs-ui a {
    color: var(--bs-link);
}

/* ---------- Mise en page ---------- */

.bs-page {
    max-width: 62.375rem;
    margin: 0 auto;
    padding: 20px 24px 64px;
}

.bs-stack > * + * {
    margin-top: var(--bs-gap);
}

.bs-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bs-gap);
    align-items: stretch;
}

/* Deux colonnes égales, l'une sous l'autre quand la page est étroite */
.bs-row > .bs-half {
    flex: 1 1 20rem;
    min-width: 0;
}

.bs-row > .bs-third {
    flex: 1 1 15rem;
    min-width: 0;
}

.bs-card {
    background: var(--bs-surface);
    border-radius: var(--bs-radius);
    box-shadow: 0 1px 0 0 rgba(26, 26, 26, 0.07), 0 0 0 1px rgba(26, 26, 26, 0.05);
    padding: 16px;
}

.bs-card--flex {
    display: flex;
    flex-direction: column;
}

.bs-card--flex > .bs-card__footer {
    margin-top: auto;
}

.bs-card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 12px;
}

.bs-card__header > div {
    min-width: 0;
}

.bs-card__section + .bs-card__section {
    border-top: 1px solid var(--bs-divider);
    margin: 16px -16px 0;
    padding: 16px 16px 0;
}

.bs-card__footer {
    padding-top: 16px;
}

.bs-title {
    font-size: 14px;
    font-weight: 650;
    line-height: 20px;
}

.bs-title-lg {
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
}

.bs-subtitle {
    font-size: 13px;
    font-weight: 650;
    line-height: 20px;
}

.bs-subdued {
    color: var(--bs-text-subdued);
}

.bs-text-critical {
    color: var(--bs-critical-text);
}

.bs-text-success {
    color: var(--bs-success-text);
}

/* Section de réglages : titre et description à gauche, carte à droite (modèle des réglages Shopify) */
.bs-settings-heading {
    padding-top: 12px;
}

.bs-annotated {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    padding-top: 20px;
}

.bs-annotated + .bs-annotated {
    border-top: 1px solid #e3e3e3;
    margin-top: 20px;
}

.bs-annotated__intro {
    flex: 1 1 15rem;
    min-width: 0;
    padding-top: 4px;
}

.bs-annotated__intro .bs-subdued {
    margin-top: 4px;
}

.bs-annotated__content {
    flex: 2 1 30rem;
    min-width: 0;
}

/* ---------- Formulaires ---------- */

.bs-ui .bs-form > * + * {
    margin-top: 16px;
}

.bs-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.bs-label {
    font-weight: 550;
}

.bs-help {
    color: var(--bs-text-subdued);
}

.bs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 12px 16px;
}

.bs-grid--3 {
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.bs-inline {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.bs-inline > input {
    flex: 1 1 auto;
    min-width: 0;
}

.bs-ui input[type="text"],
.bs-ui input[type="number"],
.bs-ui select,
.bs-ui textarea {
    width: 100%;
    min-height: 32px;
    margin: 0;
    padding: 5px 12px;
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-radius-control);
    background: var(--bs-surface);
    color: var(--bs-text);
    font: inherit;
}

.bs-ui textarea {
    min-height: 96px;
    resize: vertical;
    font-family: var(--bs-mono);
    font-size: 12px;
}

.bs-ui select {
    appearance: none;
    padding-right: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%234a4a4a' d='M10.884 4.323a1.25 1.25 0 0 0-1.768 0l-2.646 2.647a.75.75 0 0 0 1.06 1.06l2.47-2.47 2.47 2.47a.75.75 0 1 0 1.06-1.06zm-4.413 8.708 2.646 2.647a1.25 1.25 0 0 0 1.768 0l2.646-2.647a.75.75 0 1 0-1.06-1.06l-2.47 2.47-2.47-2.47a.75.75 0 0 0-1.06 1.06'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 20px;
    text-overflow: ellipsis;
}

.bs-ui input[type="text"]:hover,
.bs-ui input[type="number"]:hover,
.bs-ui select:hover,
.bs-ui textarea:hover {
    border-color: #616161;
}

.bs-ui input:focus-visible,
.bs-ui select:focus-visible,
.bs-ui textarea:focus-visible,
.bs-ui button:focus-visible,
.bs-ui summary:focus-visible,
.bs-ui a:focus-visible {
    outline: 2px solid var(--bs-focus);
    outline-offset: 1px;
}

.bs-ui input:disabled,
.bs-ui select:disabled,
.bs-ui textarea:disabled {
    border-color: #cccccc;
    background-color: var(--bs-surface-subdued);
    color: var(--bs-text-disabled);
    cursor: default;
}

.bs-ui input::placeholder,
.bs-ui textarea::placeholder {
    color: #8a8a8a;
}

.bs-w-xs {
    max-width: 5rem;
}

.bs-w-sm {
    max-width: 9rem;
}

.bs-w-md {
    max-width: 20rem;
}

/* Cases à cocher et boutons radio : la case et le libellé sur une ligne, l'aide et les champs liés en dessous */
.bs-ui fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.bs-ui legend {
    padding: 0;
    margin-bottom: 8px;
}

.bs-choices > .bs-choice + .bs-choice {
    margin-top: 8px;
}

.bs-choice {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    column-gap: 8px;
    align-items: start;
}

.bs-choice > label {
    cursor: pointer;
}

.bs-choice > .bs-help,
.bs-choice > .bs-reveal {
    grid-column: 2;
}

.bs-choice > input:disabled + label {
    color: var(--bs-text-disabled);
    cursor: default;
}

.bs-reveal {
    margin-top: 8px;
}

.bs-ui input[type="checkbox"],
.bs-ui input[type="radio"] {
    appearance: none;
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    border: 1px solid var(--bs-border);
    border-radius: 4px;
    background: var(--bs-surface) no-repeat center / 12px;
    cursor: pointer;
    flex: none;
}

.bs-ui input[type="radio"] {
    border-radius: 50%;
}

.bs-ui input[type="checkbox"]:hover:not(:disabled),
.bs-ui input[type="radio"]:hover:not(:disabled) {
    border-color: #4a4a4a;
}

.bs-ui input[type="checkbox"]:checked {
    border-color: var(--bs-text);
    background-color: var(--bs-text);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23fff' d='M15.78 5.97a.75.75 0 0 1 0 1.06l-6.5 6.5a.75.75 0 0 1-1.06 0l-3.25-3.25a.75.75 0 1 1 1.06-1.06l2.72 2.72 5.97-5.97a.75.75 0 0 1 1.06 0'/%3E%3C/svg%3E");
}

.bs-ui input[type="radio"]:checked {
    border-color: var(--bs-text);
    background: radial-gradient(circle, #ffffff 0 3px, var(--bs-text) 3.5px);
}

.bs-ui input[type="checkbox"]:disabled,
.bs-ui input[type="radio"]:disabled {
    border-color: #cccccc;
    background-color: var(--bs-surface-subdued);
    cursor: default;
}

.bs-ui input[type="checkbox"]:checked:disabled {
    border-color: var(--bs-text-disabled);
    background-color: var(--bs-text-disabled);
}

.bs-ui input[type="radio"]:checked:disabled {
    border-color: var(--bs-text-disabled);
    background: radial-gradient(circle, #ffffff 0 3px, var(--bs-text-disabled) 3.5px);
}

/* ---------- Boutons ---------- */

.bs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 28px;
    margin: 0;
    padding: 4px 12px;
    border: 0;
    border-radius: var(--bs-radius-control);
    background: var(--bs-surface);
    color: var(--bs-text);
    font: 650 12px/16px var(--bs-font);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: inset 0 -1px 0 0 #b5b5b5, inset 0 0 0 1px rgba(0, 0, 0, 0.1), inset 0 0.5px 0 1.5px #ffffff;
}

.bs-btn:hover {
    background: #fafafa;
}

.bs-btn:active {
    background: #f7f7f7;
    box-shadow: inset 0 2px 1px 0 rgba(26, 26, 26, 0.2);
}

.bs-btn--primary {
    background: var(--bs-text);
    color: #ffffff;
    box-shadow: inset 0 -1px 0 1px rgba(0, 0, 0, 0.8), inset 0 0 0 1px #303030, inset 0 0.5px 0 1.5px rgba(255, 255, 255, 0.25);
}

.bs-btn--primary:hover {
    background: #1a1a1a;
}

.bs-btn--primary:active {
    background: #1a1a1a;
    box-shadow: inset 0 3px 0 0 #000000;
}

.bs-btn--critical {
    background: var(--bs-critical);
    color: #ffffff;
    box-shadow: inset 0 -1px 0 1px #8e0b21, inset 0 0 0 1px #a30a24, inset 0 0.5px 0 1.5px rgba(255, 255, 255, 0.35);
}

.bs-btn--critical:hover {
    background: #a30a24;
}

.bs-btn--plain,
.bs-btn--plain:hover,
.bs-btn--plain:active {
    min-height: 0;
    padding: 0;
    background: none;
    box-shadow: none;
    color: var(--bs-link);
    font-weight: 550;
}

.bs-btn--plain:hover {
    text-decoration: underline;
}

.bs-btn--plain.bs-btn--critical {
    color: var(--bs-critical-text);
}

.bs-btn--block {
    width: 100%;
}

.bs-btn:disabled,
.bs-btn:disabled:hover {
    background: #f2f2f2;
    color: var(--bs-text-disabled);
    box-shadow: none;
    cursor: default;
}

.bs-btn--plain:disabled,
.bs-btn--plain:disabled:hover {
    background: none;
    text-decoration: none;
}

.bs-btn-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.bs-btn-group__separator {
    width: 1px;
    align-self: stretch;
    background: var(--bs-divider);
    margin: 0 4px;
}

/* ---------- Bannière, badge, progression, chargement ---------- */

.bs-banner {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-radius: var(--bs-radius);
    background: var(--bs-info-surface);
}

.bs-banner--critical {
    background: var(--bs-critical-surface);
}

.bs-banner__icon {
    flex: none;
    width: 20px;
    height: 20px;
}

.bs-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 8px;
    background: #e3e3e3;
    color: #616161;
    font-size: 12px;
    font-weight: 550;
    line-height: 16px;
}

.bs-badge--success {
    background: var(--bs-success-surface);
    color: var(--bs-success-text);
}

.bs-badge--critical {
    background: #fedad9;
    color: var(--bs-critical-text);
}

.bs-progress {
    height: 8px;
    border-radius: 4px;
    background: #e3e3e3;
    overflow: hidden;
}

.bs-progress > span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 4px;
    background: var(--bs-text);
    transition: width 0.3s ease;
}

.bs-progress--critical > span {
    background: var(--bs-critical);
}

.bs-spinner {
    flex: none;
    width: 20px;
    height: 20px;
    border: 2px solid #e3e3e3;
    border-top-color: var(--bs-text);
    border-radius: 50%;
    animation: bs-spin 0.8s linear infinite;
}

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

.bs-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.bs-kv {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    margin: 0;
}

.bs-kv dt {
    color: var(--bs-text-subdued);
}

.bs-kv dd {
    margin: 0;
    font-family: var(--bs-mono);
    font-size: 12px;
    word-break: break-all;
}

/* ---------- Tableaux ---------- */

.bs-table-wrap {
    border: 1px solid var(--bs-border-subdued);
    border-radius: var(--bs-radius-control);
    overflow: auto;
}

.bs-table {
    width: 100%;
    border-collapse: collapse;
}

.bs-table th {
    padding: 8px 12px;
    background: var(--bs-surface-subdued);
    border-bottom: 1px solid var(--bs-border-subdued);
    color: var(--bs-text-subdued);
    font-weight: 550;
    text-align: left;
    white-space: nowrap;
}

.bs-table td {
    padding: 8px 12px;
    border-top: 1px solid var(--bs-divider);
    vertical-align: middle;
}

.bs-table tbody tr:first-child td {
    border-top: 0;
}

.bs-table .bs-cell-actions {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

.bs-table .bs-cell-actions .bs-btn + .bs-btn {
    margin-left: 8px;
}

.bs-table .bs-cell-mono {
    font-family: var(--bs-mono);
    font-size: 12px;
    word-break: break-all;
}

/* MME 2026-10-06: Import errors, la colonne EAN contient au moins 13 caracteres sans retour a la ligne */
.bs-table .logs-ean-cell {
    min-width: 13ch;
    white-space: nowrap;
    word-break: normal;
}

.bs-table .bs-empty {
    padding: 24px 12px;
    color: var(--bs-text-subdued);
    text-align: center;
}

/* ---------- Plans ---------- */

.bs-price {
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
}

.bs-price small {
    color: var(--bs-text-subdued);
    font-size: 13px;
    font-weight: 450;
}

/* ---------- Fenêtres (élément <dialog>) ---------- */

.bs-modal {
    width: min(760px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    padding: 0;
    border: 0;
    border-radius: 16px;
    background: var(--bs-surface);
    color: var(--bs-text);
    box-shadow: 0 20px 20px -8px rgba(26, 26, 26, 0.28), 0 0 0 1px rgba(26, 26, 26, 0.08);
}

.bs-modal--small {
    width: min(460px, calc(100vw - 32px));
}

.bs-modal[open] {
    display: flex;
    flex-direction: column;
}

.bs-modal::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.bs-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 12px 12px 16px;
    background: #f3f3f3;
    border-bottom: 1px solid var(--bs-divider);
}

.bs-modal__body {
    flex: 1 1 auto;
    padding: 16px;
    overflow: auto;
}

.bs-modal__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--bs-divider);
}

.bs-modal__footer > .bs-push {
    margin-right: auto;
}

.bs-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: var(--bs-radius-control);
    background: none;
    color: var(--bs-text-subdued);
    cursor: pointer;
}

.bs-icon-btn:hover {
    background: rgba(0, 0, 0, 0.06);
}

.bs-icon-btn--small {
    width: 24px;
    height: 24px;
    border-radius: 6px;
}

.bs-inline-icon {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* Infobulle (élément #bsTooltip positionné par showTooltip) */
.bs-tooltip {
    position: fixed;
    z-index: 1000;
    max-width: min(420px, calc(100vw - 16px));
    padding: 6px 10px;
    border-radius: var(--bs-radius-control);
    background: var(--bs-surface);
    color: var(--bs-text);
    box-shadow: 0 4px 6px -2px rgba(26, 26, 26, 0.2), 0 0 0 1px rgba(26, 26, 26, 0.08);
    font-family: var(--bs-mono);
    font-size: 12px;
    line-height: 18px;
    white-space: pre-wrap;
    word-break: break-all;
    pointer-events: none;
}

.bs-tree {
    min-height: 160px;
    max-height: 240px;
    padding: 8px;
    overflow: auto;
    border: 1px solid var(--bs-border-subdued);
    border-radius: var(--bs-radius-control);
    background: var(--bs-surface);
}

/* MME 2026-11-06: les nœuds jsTree n'ont plus de href (voir index.html) : on garde le curseur d'un lien */
.bs-tree .jstree-anchor {
    cursor: pointer;
}

.bs-details > summary {
    cursor: pointer;
    font-weight: 550;
}

.bs-details[open] > summary {
    margin-bottom: 8px;
}

.bs-code {
    margin: 4px 0 12px;
    padding: 8px 12px;
    border-radius: var(--bs-radius-control);
    background: var(--bs-surface-subdued);
    font-family: var(--bs-mono);
    font-size: 12px;
    line-height: 18px;
    white-space: pre-wrap;
    word-break: break-all;
    user-select: all;
}

/* CKEditor : coins et bordure comme les autres champs */
.bs-ui .cke_chrome {
    border-color: var(--bs-border-subdued);
    border-radius: var(--bs-radius-control);
    overflow: hidden;
    box-shadow: none;
}

@media (max-width: 30em) {
    .bs-page {
        padding: 16px 12px 48px;
    }

    .bs-card__section + .bs-card__section {
        margin-left: -16px;
        margin-right: -16px;
    }
}