/*
 * Theme « Groovy » par-dessus Bootstrap 5.3 (maquettes stitch_groovy_merchant_pwa).
 *
 * Rien n'est charge d'un CDN : la police Outfit est servie depuis assets/fonts
 * (licence OFL a cote), les icones sont des SVG en ligne. On ne reecrit pas
 * Bootstrap, on change ses variables, puis on retouche ce qu'il code en dur.
 *
 * La couleur principale est celle de l'utilisateur connecte : la cell
 * ThemeStyle redefinit les variables --g-primary* juste apres cette feuille.
 * Les valeurs ci-dessous sont le violet par defaut, celui de la page de
 * connexion et de tout compte qui n'a rien choisi. Tout le CSS qui porte la
 * couleur passe donc par ces variables, jamais par une valeur ecrite en dur.
 */

@font-face {
    font-family: "Outfit";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("fonts/outfit-latin-wght-normal.woff2") format("woff2-variations"),
         url("fonts/outfit-latin-wght-normal.woff2") format("woff2");
}

:root {
    --g-primary: #6C2BD9;
    --g-primary-rgb: 108, 43, 217;
    --g-primary-hover: #5C25B8;
    --g-primary-deep: #3B1877;
    --g-primary-soft: #F3EEFC;
    --g-primary-border: #DACAF6;

    --g-amber: #FFA41B;
    --g-ink: #1E1630;
    --g-muted: #64748B;
    --g-line: #EDE9FE;
    --g-field: #E4DEF3;
    --g-surface: #F8F9FD;
    --g-success: #10B981;
    --g-danger: #EF4444;

    --g-radius: 16px;
    --g-radius-sm: 12px;
    --g-shadow: 0 4px 20px -2px rgba(var(--g-primary-rgb), .06), 0 2px 6px -1px rgba(0, 0, 0, .04);
    --g-shadow-btn: 0 6px 20px -2px rgba(var(--g-primary-rgb), .35);
    --g-focus: 0 0 0 3px rgba(var(--g-primary-rgb), .15);
    --g-sidebar: 270px;

    --bs-body-font-family: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-color: var(--g-ink);
    --bs-body-color-rgb: 30, 22, 48;
    --bs-body-bg: var(--g-surface);
    --bs-emphasis-color: var(--g-ink);
    --bs-secondary-color: var(--g-muted);
    --bs-tertiary-bg: var(--g-surface);
    --bs-border-color: var(--g-line);
    --bs-border-radius: var(--g-radius-sm);
    --bs-border-radius-sm: 10px;
    --bs-border-radius-lg: var(--g-radius);

    --bs-primary: var(--g-primary);
    --bs-primary-rgb: var(--g-primary-rgb);
    --bs-primary-text-emphasis: var(--g-primary-deep);
    --bs-primary-bg-subtle: var(--g-primary-soft);
    --bs-primary-border-subtle: var(--g-primary-border);
    --bs-link-color: var(--g-primary);
    --bs-link-color-rgb: var(--g-primary-rgb);
    --bs-link-hover-color: var(--g-primary-hover);
    --bs-link-hover-color-rgb: var(--g-primary-rgb);
    --bs-focus-ring-color: rgba(var(--g-primary-rgb), .15);

    --bs-success: var(--g-success);
    --bs-success-rgb: 16, 185, 129;
    --bs-danger: var(--g-danger);
    --bs-danger-rgb: 239, 68, 68;
    --bs-warning: var(--g-amber);
    --bs-warning-rgb: 255, 164, 27;
}

body {
    background-color: var(--g-surface);
    -webkit-font-smoothing: antialiased;
}

/* --- Titres ------------------------------------------------------------- */

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--g-ink);
}

h6, .h6 {
    font-weight: 600;
}

/* Les titres de groupe (« À répondre », « Historique ») : petits, espaces. */
.h6.text-uppercase {
    font-size: .75rem;
    letter-spacing: .08em;
    color: var(--g-muted) !important;
}

a {
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* --- Cartes et listes ---------------------------------------------------- */

.card {
    --bs-card-border-color: var(--g-line);
    --bs-card-border-radius: var(--g-radius);
    --bs-card-inner-border-radius: calc(var(--g-radius) - 1px);
    --bs-card-cap-bg: transparent;
}

.shadow-sm {
    box-shadow: var(--g-shadow) !important;
}

.card-body {
    padding: 1.25rem;
}

/*
 * Une liste d'elements devient une pile de cartes espacees, comme dans les
 * maquettes. Les listes « flush », rangees a l'interieur d'une carte, restent
 * des lignes separees d'un filet.
 */
.list-group:not(.list-group-flush) {
    gap: .625rem;
    border-radius: 0;
}

.list-group.shadow-sm {
    box-shadow: none !important;
}

.list-group:not(.list-group-flush) > .list-group-item {
    border: 1px solid var(--g-line) !important;
    border-radius: var(--g-radius) !important;
    box-shadow: var(--g-shadow);
    padding: .9rem 1rem;
}

.list-group-item {
    --bs-list-group-border-color: var(--g-line);
    --bs-list-group-active-bg: var(--g-primary);
    --bs-list-group-active-border-color: var(--g-primary);
    --bs-list-group-action-hover-bg: var(--g-primary-soft);
    --bs-list-group-action-active-bg: var(--g-primary-soft);
}

.list-group-item-action {
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}

.list-group-item-action:active {
    transform: scale(.99);
}

/* Carte a liseré gauche, pour marquer un groupe (acheteur qui attend…). */
.g-accent {
    border-left: 4px solid var(--g-primary) !important;
}

.g-accent-danger {
    border-left: 4px solid var(--g-danger) !important;
}

.g-accent-amber {
    border-left: 4px solid var(--g-amber) !important;
}

/* Avatar a initiales. */
.g-avatar {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--g-primary-soft);
    color: var(--g-primary);
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
}

/* Vignette produit : carre arrondi. */
.g-thumb {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: var(--g-radius-sm);
    object-fit: cover;
    background: var(--g-primary-soft);
    color: var(--g-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Pastille d'icone en tete de carte (Réglages, Livraison). */
.g-card-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--g-radius-sm);
    background: var(--g-primary-soft);
    color: var(--g-primary);
}

.g-card-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
}

.g-card-head > :last-child {
    margin-bottom: 0;
}

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

.btn {
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: .7rem;
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--g-radius-sm);
    --bs-btn-focus-box-shadow: var(--g-focus);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    transition: transform .12s ease, background-color .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.btn:active {
    transform: scale(.98);
}

.btn-sm {
    --bs-btn-padding-x: .85rem;
    --bs-btn-padding-y: .4rem;
    --bs-btn-font-size: .875rem;
    --bs-btn-border-radius: 10px;
}

.btn-lg {
    --bs-btn-padding-y: .8rem;
    --bs-btn-font-size: 1.0625rem;
    --bs-btn-border-radius: var(--g-radius-sm);
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--g-primary);
    --bs-btn-border-color: var(--g-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--g-primary-hover);
    --bs-btn-hover-border-color: var(--g-primary-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--g-primary-hover);
    --bs-btn-active-border-color: var(--g-primary-hover);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--g-primary);
    --bs-btn-disabled-border-color: var(--g-primary);
    box-shadow: var(--g-shadow-btn);
}

.btn-outline-primary {
    --bs-btn-color: var(--g-primary);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--g-primary-border);
    --bs-btn-hover-color: var(--g-primary);
    --bs-btn-hover-bg: var(--g-primary-soft);
    --bs-btn-hover-border-color: var(--g-primary);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--g-primary);
    --bs-btn-active-border-color: var(--g-primary);
}

/* Le bouton secondaire des maquettes : blanc, filet, encre. */
.btn-outline-secondary {
    --bs-btn-color: var(--g-ink);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--g-field);
    --bs-btn-hover-color: var(--g-primary);
    --bs-btn-hover-bg: var(--g-primary-soft);
    --bs-btn-hover-border-color: var(--g-primary-border);
    --bs-btn-active-color: var(--g-primary);
    --bs-btn-active-bg: var(--g-primary-soft);
    --bs-btn-active-border-color: var(--g-primary);
}

.btn-outline-danger {
    --bs-btn-color: var(--g-danger);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #FBD5D5;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--g-danger);
    --bs-btn-hover-border-color: var(--g-danger);
}

.btn-danger {
    --bs-btn-bg: var(--g-danger);
    --bs-btn-border-color: var(--g-danger);
    --bs-btn-hover-bg: #DC2626;
    --bs-btn-hover-border-color: #DC2626;
}

.btn-success {
    --bs-btn-bg: var(--g-success);
    --bs-btn-border-color: var(--g-success);
    --bs-btn-hover-bg: #059669;
    --bs-btn-hover-border-color: #059669;
}

.btn-dark {
    --bs-btn-bg: var(--g-ink);
    --bs-btn-border-color: var(--g-ink);
}

/* --- Pilules de filtre (statuts, periodes) ------------------------------- */

.g-chips {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding-bottom: .25rem;
    scrollbar-width: none;
}

.g-chips::-webkit-scrollbar {
    display: none;
}

.g-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .9rem;
    border-radius: 999px;
    border: 1px solid var(--g-field);
    background: #fff;
    color: var(--g-ink);
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.g-chip:hover {
    border-color: var(--g-primary-border);
    color: var(--g-primary);
}

.g-chip.active {
    background: var(--g-primary);
    border-color: var(--g-primary);
    color: #fff;
    box-shadow: var(--g-shadow-btn);
}

.g-chip.active .badge {
    background: rgba(255, 255, 255, .22) !important;
    color: #fff !important;
}

/* Bascule segmentee (« Commandes | Demandes perso. », onglets Produits). */
.g-segmented {
    display: flex;
    padding: 4px;
    gap: 4px;
    border-radius: var(--g-radius-sm);
    background: var(--g-primary-soft);
}

.g-segmented > a {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .5rem .5rem;
    border-radius: 9px;
    color: var(--g-muted);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.g-segmented > a.active {
    background: #fff;
    color: var(--g-primary);
    box-shadow: 0 1px 4px rgba(30, 22, 48, .08);
}

/* --- Badges -------------------------------------------------------------- */

.badge {
    --bs-badge-font-weight: 600;
    --bs-badge-padding-x: .6em;
    --bs-badge-padding-y: .35em;
    border-radius: 999px;
}

/* Les etats se lisent en teinte douce ; le compteur d'alerte reste plein. */
.text-bg-primary {
    background-color: var(--g-primary) !important;
    color: #fff !important;
}

.text-bg-light {
    background-color: var(--g-primary-soft) !important;
    color: var(--g-primary) !important;
}

.text-bg-info {
    background-color: #E0F2FE !important;
    color: #0369A1 !important;
}

.text-bg-success {
    background-color: #D1FAE5 !important;
    color: #047857 !important;
}

.text-bg-warning {
    background-color: #FFF1DB !important;
    color: #B45309 !important;
}

.text-bg-secondary {
    background-color: #F1F5F9 !important;
    color: var(--g-muted) !important;
}

.text-bg-dark {
    background-color: var(--g-ink) !important;
    color: #fff !important;
}

.text-bg-danger {
    background-color: var(--g-danger) !important;
    color: #fff !important;
}

.text-danger {
    color: var(--g-danger) !important;
}

.text-success {
    color: #059669 !important;
}

.bg-primary-subtle {
    background-color: var(--g-primary-soft) !important;
}

/* --- Alertes ------------------------------------------------------------- */

.alert {
    --bs-alert-border-radius: var(--g-radius-sm);
    border: 0;
    font-size: .9375rem;
}

.alert-success {
    --bs-alert-bg: #ECFDF5;
    --bs-alert-color: #047857;
}

.alert-danger {
    --bs-alert-bg: #FEF2F2;
    --bs-alert-color: #B91C1C;
}

.alert-warning {
    --bs-alert-bg: #FFF7E8;
    --bs-alert-color: #92400E;
}

.alert-info,
.alert-primary {
    --bs-alert-bg: var(--g-primary-soft);
    --bs-alert-color: var(--g-primary-deep);
}

/* --- Champs -------------------------------------------------------------- */

.form-label {
    font-weight: 600;
    font-size: .875rem;
    color: var(--g-ink);
}

.form-control,
.form-select {
    min-height: 48px;
    padding: .7rem 1rem;
    border-color: var(--g-field);
    border-radius: var(--g-radius-sm);
    background-color: #fff;
    color: var(--g-ink);
}

.form-select {
    padding-right: 2.5rem;
}

textarea.form-control {
    min-height: 0;
}

.form-control::placeholder {
    color: #A3A9B8;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--g-primary);
    box-shadow: var(--g-focus);
}

.form-control-sm,
.form-select-sm,
.input-group-sm > .form-control,
.input-group-sm > .form-select {
    min-height: 40px;
    padding: .45rem .85rem;
    font-size: .9375rem;
    border-radius: 10px;
}

.input-group-sm > .btn {
    border-radius: 10px;
}

.form-control-lg {
    min-height: 52px;
    border-radius: var(--g-radius-sm);
}

.form-text {
    color: var(--g-muted);
}

.form-check-input {
    border-color: #C9C2DB;
}

.form-check-input:checked {
    background-color: var(--g-primary);
    border-color: var(--g-primary);
}

.form-check-input:focus {
    border-color: var(--g-primary);
    box-shadow: var(--g-focus);
}

.form-switch .form-check-input {
    width: 2.75em;
    height: 1.5em;
}

/* --- Navigation Bootstrap ------------------------------------------------ */

.nav-pills {
    --bs-nav-pills-border-radius: 999px;
    --bs-nav-pills-link-active-bg: var(--g-primary);
    --bs-nav-pills-link-active-color: #fff;
    --bs-nav-link-color: var(--g-muted);
    --bs-nav-link-hover-color: var(--g-primary);
}

.dropdown-menu {
    --bs-dropdown-border-color: var(--g-line);
    --bs-dropdown-border-radius: var(--g-radius-sm);
    --bs-dropdown-link-active-bg: var(--g-primary);
    box-shadow: var(--g-shadow);
}

.pagination {
    --bs-pagination-active-bg: var(--g-primary);
    --bs-pagination-active-border-color: var(--g-primary);
    --bs-pagination-color: var(--g-primary);
}

.table {
    --bs-table-border-color: var(--g-line);
}

/* --- Coque de l'application --------------------------------------------- */

.container-narrow {
    max-width: 26rem;
    margin-inline: auto;
    padding-inline: 1rem;
}

.g-topbar {
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--g-line);
    min-height: 60px;
}

.g-brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
    color: var(--g-ink);
    font-weight: 700;
    text-decoration: none;
}

.g-brand:hover {
    color: var(--g-ink);
}

.g-brand-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* La marque « g » : un carre arrondi en degrade de la couleur principale. */
.g-logo {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--g-primary), var(--g-primary-deep));
    color: #fff;
    font-weight: 800;
    font-size: 1.25rem;
    line-height: 1;
    padding-bottom: 3px;
    box-shadow: var(--g-shadow-btn);
}

.g-logo::after {
    content: "";
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--g-amber);
}

.g-logo-lg {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    font-size: 2rem;
}

.g-logo-lg::after {
    right: 9px;
    bottom: 9px;
    width: 8px;
    height: 8px;
}

.g-user {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .5rem .25rem .25rem;
    border: 1px solid var(--g-line);
    border-radius: 999px;
    background: #fff;
    color: var(--g-ink);
    font-weight: 600;
    font-size: .875rem;
}

.g-user .g-avatar {
    width: 30px;
    height: 30px;
    font-size: .8125rem;
}

.g-user::after {
    margin-left: .1rem;
}

.g-icon {
    flex-shrink: 0;
    width: 1.25em;
    height: 1.25em;
}

/*
 * Barre du bas : a portee du pouce, contrairement a un menu haut. Icone sur
 * libelle, l'onglet actif dans la couleur principale et marque d'un point
 * ambre. Sur grand ecran (992 px et plus), la meme barre devient la colonne
 * de gauche des maquettes de bureau.
 */
.bottom-nav {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    display: flex;
    z-index: 1030;
    height: calc(64px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #fff;
    border-top: 1px solid var(--g-line);
    box-shadow: 0 -4px 20px -6px rgba(30, 22, 48, .08);
}

.bottom-nav-brand {
    display: none;
}

.bottom-nav-item {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 2px 8px;
    font-size: .6875rem;
    font-weight: 500;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    color: var(--g-muted);
    -webkit-tap-highlight-color: transparent;
}

.bottom-nav-icon {
    position: relative;
    display: inline-flex;
}

.bottom-nav-icon .g-icon {
    width: 24px;
    height: 24px;
}

.bottom-nav-icon .badge {
    position: absolute;
    top: -6px;
    left: 14px;
    min-width: 18px;
    padding: .25em .45em;
    font-size: .625rem;
    border: 2px solid #fff;
}

.bottom-nav-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* « Conversations » en gras tient dans un cinquième de 375 px. */
@media (max-width: 380px) {
    .bottom-nav-item {
        padding-left: 0;
        padding-right: 0;
        font-size: .65rem;
        letter-spacing: -.01em;
    }
}

.bottom-nav-item:hover {
    color: var(--g-primary);
}

.bottom-nav-item.active {
    color: var(--g-primary);
    font-weight: 700;
}

.bottom-nav-item.active::after {
    content: "";
    position: absolute;
    bottom: 3px;
    left: 50%;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: var(--g-amber);
}

/* Laisse la place a la barre du bas, pour que rien ne finisse dessous. */
.has-bottom-nav main {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 992px) {
    .bottom-nav {
        top: 0;
        right: auto;
        width: var(--g-sidebar);
        height: auto;
        flex-direction: column;
        gap: .25rem;
        padding: 1.25rem 1rem;
        border-top: 0;
        border-right: 1px solid var(--g-line);
        box-shadow: none;
    }

    .bottom-nav-brand {
        display: flex;
        margin: 0 .5rem 1.5rem;
    }

    .bottom-nav-item {
        flex: 0 0 auto;
        flex-direction: row;
        justify-content: flex-start;
        gap: .85rem;
        padding: .8rem 1rem;
        border-radius: var(--g-radius-sm);
        font-size: .9375rem;
        font-weight: 500;
    }

    .bottom-nav-item:hover {
        background: var(--g-primary-soft);
    }

    .bottom-nav-item.active {
        background: var(--g-primary-soft);
        font-weight: 700;
    }

    .bottom-nav-item.active::after {
        top: 50%;
        bottom: auto;
        left: auto;
        right: 1rem;
        width: 6px;
        height: 6px;
        margin: -3px 0 0;
    }

    .bottom-nav-icon .g-icon {
        width: 22px;
        height: 22px;
    }

    .has-bottom-nav .g-topbar,
    .has-bottom-nav main {
        margin-left: var(--g-sidebar);
    }

    .has-bottom-nav main {
        padding: 2rem 2.5rem 3rem;
    }

    .g-topbar .g-brand-mobile {
        visibility: hidden;
    }

    .g-page {
        max-width: 60rem;
    }
}

/* --- Ecran de connexion -------------------------------------------------- */

.g-auth {
    min-height: 100vh;
    background:
        radial-gradient(60rem 30rem at 110% -10%, rgba(var(--g-primary-rgb), .14), transparent 60%),
        radial-gradient(40rem 24rem at -20% 110%, rgba(255, 164, 27, .12), transparent 60%),
        var(--g-surface);
}

/* --- Couleur principale (Réglages) -------------------------------------- */

.g-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}

.g-swatch {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}

.g-swatch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.g-swatch span {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px var(--g-field);
    transition: box-shadow .15s ease, transform .12s ease;
}

.g-swatch input:checked + span {
    box-shadow: 0 0 0 2px var(--g-ink);
    transform: scale(1.06);
}

.g-swatch input:focus-visible + span {
    box-shadow: 0 0 0 2px var(--g-ink), 0 0 0 6px rgba(var(--g-primary-rgb), .25);
}

.g-swatch-custom input[type="color"] {
    position: static;
    opacity: 1;
    pointer-events: auto;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px dashed var(--g-field);
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}

.g-swatch-custom input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 4px;
}

.g-swatch-custom input[type="color"]::-webkit-color-swatch {
    border: 0;
    border-radius: 50%;
}

.g-swatch-custom input[type="color"]::-moz-color-swatch {
    border: 0;
    border-radius: 50%;
}

/* Sur telephone, iOS zoome sur un champ dont la police est sous 16 px. */
@media (max-width: 575.98px) {
    .form-control,
    .form-select {
        font-size: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn,
    .list-group-item-action,
    .g-chip,
    .g-swatch span {
        transition: none;
    }
}

/* --- Fil d'une conversation ---------------------------------------------- */

.g-thread {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.g-bubble {
    max-width: 85%;
    padding: .6rem .85rem;
    border-radius: 18px;
    font-size: .9375rem;
    overflow-wrap: anywhere;
}

.g-bubble-meta {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .15rem;
    font-size: .75rem;
    opacity: .75;
}

/* L'acheteur a gauche, comme dans Messenger ; la boutique a droite. */
.g-bubble-in {
    align-self: flex-start;
    background: #fff;
    border: 1px solid var(--g-line);
    border-bottom-left-radius: 6px;
}

.g-bubble-bot {
    align-self: flex-end;
    background: var(--g-primary-soft);
    color: var(--g-ink);
    border-bottom-right-radius: 6px;
}

.g-bubble-out {
    align-self: flex-end;
    background: var(--g-primary);
    color: #fff;
    border-bottom-right-radius: 6px;
}

.g-card-head .form-label {
    font-size: 1rem;
}