/*
 * Kinshop - couche visuelle "marketplace" (chargee apres style.css).
 * Inspiree des grands e-commerces : recherche dominante, categories visibles,
 * cartes produit denses, typographie sobre, tableau de bord avec menu lateral.
 */

:root {
    --bg: #f3f6f5;
    --surface: #ffffff;
    --surface-2: #f7f9f9;
    --ink: #0f2524;
    --muted: #5d6f6d;
    --line: #e1e8e6;
    --line-strong: #cfd9d7;
    --teal: #0f625e;
    --teal-dark: #0a4a47;
    --teal-deep: #052f2d;
    --teal-soft: #e3f4f1;
    --orange: #ff7a1a;
    --orange-dark: #e2620a;
    --orange-soft: #fff1e6;
    --success: #12805c;
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 18px;
    --shadow-sm: 0 1px 2px rgba(15, 37, 36, .06);
    --shadow: 0 8px 24px rgba(15, 37, 36, .08);
    --shadow-lg: 0 18px 40px rgba(15, 37, 36, .14);
    /* Mode sombre : couleurs de texte separees des fonds de marque (memes valeurs en clair). */
    --teal-text: var(--teal);
    --teal-dark-text: var(--teal-dark);
    --teal-deep-text: var(--teal-deep);
    --orange-text: var(--orange-dark);
    --glass-rgb: 255 255 255;
    --mint-rgb: 201 243 233;
    --mint-2-rgb: 226 251 246;
    --sage-rgb: 214 230 226;
    --cream-bg: var(--cream);
    /* Couleurs ponctuelles (t = texte, b = fond, l = bordure), redefinies en mode sombre. */
    --k-16a34a-t: #16a34a;
    --k-17803f-b: #17803f;
    --k-17803f-l: #17803f;
    --k-1c5f97-t: #1c5f97;
    --k-1f6fbf-t: #1f6fbf;
    --k-1f9d55-b: #1f9d55;
    --k-1f9d55-l: #1f9d55;
    --k-34474a-t: #34474a;
    --k-3b97f0-l: #3b97f0;
    --k-3b97f0-t: #3b97f0;
    --k-4535a8-t: #4535a8;
    --k-5b3fb8-b: #5b3fb8;
    --k-5b3fb8-l: #5b3fb8;
    --k-5b3fb8-t: #5b3fb8;
    --k-8a9a98-t: #8a9a98;
    --k-b42318-t: #b42318;
    --k-bfe3d4-l: #bfe3d4;
    --k-c0392b-b: #c0392b;
    --k-c0392b-l: #c0392b;
    --k-c0392b-t: #c0392b;
    --k-d4ede9-b: #d4ede9;
    --k-d92d20-l: #d92d20;
    --k-d9d0f7-l: #d9d0f7;
    --k-dcf3e8-b: #dcf3e8;
    --k-e3f0fb-b: #e3f0fb;
    --k-e8e6fb-b: #e8e6fb;
    --k-eaf3fe-b: #eaf3fe;
    --k-eaf7f1-b: #eaf7f1;
    --k-ebe5fb-l: #ebe5fb;
    --k-ede9fe-b: #ede9fe;
    --k-eef1f4-b: #eef1f4;
    --k-f1b9b2-l: #f1b9b2;
    --k-f5a524-b: #f5a524;
    --k-f5a524-t: #f5a524;
    --k-f6d3b8-l: #f6d3b8;
    --k-faf8ff-b: #faf8ff;
    --k-fbfcfc-b: #fbfcfc;
    --k-fdecea-b: #fdecea;
    --k-fee4e2-b: #fee4e2;
    --k-ff8a33-b: #ff8a33;
    --k-ffb27a-t: #ffb27a;
    --k-fff7e6-b: #fff7e6;
}

/* ---------- Base ---------- */

body,
.internal-body {
    background: var(--bg);
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
}

.container {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
}

h1,
h2,
h3 {
    color: var(--ink);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
}

h1 {
    margin-top: 12px;
    font-size: clamp(28px, 3vw, 40px);
    max-width: 820px;
}

h2 {
    font-size: clamp(20px, 1.9vw, 26px);
}

h3 {
    font-size: 17px;
}

.lead {
    margin-top: 10px;
    max-width: 680px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.6;
}

.eyebrow {
    padding: 5px 10px;
    border: 0;
    border-radius: 999px;
    background: var(--teal-soft);
    color: var(--teal-text);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
}

.section {
    padding: 40px 0;
}

.section-tight {
    padding: 28px 0;
}

.section-head {
    align-items: end;
    margin-bottom: 18px;
}

.section-head p {
    margin-top: 4px;
    color: var(--muted);
}

.shop-name {
    color: var(--muted);
    font-weight: 500;
}

.ui-icon {
    flex: 0 0 auto;
}

/* ---------- Boutons, badges, formulaires ---------- */

.btn {
    gap: 8px;
    min-height: 42px;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: none;
}

.btn:hover {
    transform: none;
    box-shadow: none;
    filter: brightness(.96);
}

.btn-orange {
    background: var(--orange);
    color: #fff;
}

.btn-orange:hover {
    background: var(--orange-dark);
    filter: none;
}

.btn-soft {
    background: var(--surface);
    border: 1px solid var(--line-strong);
    color: var(--ink);
}

.btn-soft:hover {
    background: var(--surface-2);
    filter: none;
}

.btn-sm {
    min-height: 36px;
    padding: 7px 12px;
    font-size: 13px;
}

.btn-lg {
    min-height: 50px;
    padding: 12px 24px;
    font-size: 15px;
}

.btn-ghost-light {
    border: 1px solid rgba(255, 255, 255, .45);
    background: transparent;
    color: #fff;
}

.btn-ghost-light:hover {
    background: rgba(255, 255, 255, .12);
    filter: none;
}

.badge {
    padding: 4px 9px;
    border-radius: 6px;
    background: var(--teal-soft);
    color: var(--teal-dark-text);
    font-size: 12px;
    font-weight: 600;
}

.badge-orange {
    background: var(--orange-soft);
    color: var(--orange-text);
}

label {
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
}

.form-control,
select.form-control,
textarea.form-control {
    min-height: 44px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: var(--surface);
    color: var(--ink);
    font-weight: 400;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control:focus {
    border-color: var(--teal);
    outline: none;
    box-shadow: 0 0 0 3px rgba(15, 98, 94, .15);
}

.form-control::placeholder {
    color: var(--k-8a9a98-t);
    font-weight: 400;
}

.flash {
    border: 1px solid var(--k-f6d3b8-l);
    border-left: 4px solid var(--orange);
    border-radius: 10px;
    background: var(--orange-soft);
    color: var(--ink);
    font-weight: 500;
}

.panel,
.stat,
.category-tile,
.detail-box,
.auth-card,
.pricing-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.empty-state {
    padding: 28px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--muted);
    text-align: center;
}

.link-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    color: var(--teal-text);
    font-weight: 600;
    white-space: nowrap;
}

.link-more:hover {
    color: var(--orange-text);
}

.link-more .ui-icon {
    width: 16px;
    height: 16px;
}

/* ---------- En-tete boutique (public) ---------- */

.store-header {
    position: sticky;
    top: 0;
    z-index: 60;
    border: 0;
    background: transparent;
    box-shadow: 0 2px 10px rgba(5, 47, 45, .18);
    backdrop-filter: none;
}

.store-topbar {
    background: var(--teal-deep);
    color: #fff;
}

.store-topbar-inner {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 68px;
}

.store-header .brand {
    margin-right: 0;
    color: #fff;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.store-header .brand-mark {
    width: 40px;
    height: 40px;
    box-shadow: none;
}

.deliver-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.15;
    white-space: nowrap;
}

.deliver-chip small,
.store-action small {
    display: block;
    color: rgba(255, 255, 255, .7);
    font-size: 12px;
    font-weight: 400;
}

.store-search {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    border-radius: 10px;
    background: var(--surface);
    overflow: hidden;
    box-shadow: 0 0 0 2px transparent;
    transition: box-shadow .15s ease;
}

.store-search:focus-within {
    box-shadow: 0 0 0 3px var(--orange);
}

.store-search select {
    flex: 0 0 auto;
    max-width: 170px;
    min-height: 0;
    padding: 0 10px;
    border: 0;
    border-right: 1px solid var(--line);
    border-radius: 0;
    background: var(--surface-2);
    color: var(--ink);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.store-search input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 14px;
    border: 0;
    outline: none;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 15px;
}

.store-search button {
    flex: 0 0 56px;
    display: grid;
    place-items: center;
    border: 0;
    background: var(--orange);
    color: #fff;
    cursor: pointer;
}

.store-search button:hover {
    background: var(--orange-dark);
}

.store-search button .ui-icon {
    width: 22px;
    height: 22px;
}

.store-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.store-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 4px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.15;
    white-space: nowrap;
}

.store-action:hover,
.store-header .cart-pill:hover {
    border-color: rgba(255, 255, 255, .35);
}

.store-header .cart-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 46px;
    padding: 4px 12px 4px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.store-header .cart-pill .ui-icon {
    width: 26px;
    height: 26px;
}

.cart-count {
    position: absolute;
    top: 3px;
    left: 24px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--orange);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 19px;
    text-align: center;
}

.cart-pill.is-bumped .cart-count {
    animation: cart-bump .45s ease;
}

@keyframes cart-bump {
    40% { transform: scale(1.35); }
}

.cart-menu {
    border-radius: var(--radius);
    color: var(--ink);
    box-shadow: var(--shadow-lg);
}

.store-navbar {
    background: var(--teal);
}

.store-navbar-inner {
    display: flex;
    align-items: center;
    gap: 2px;
    min-height: 42px;
    overflow-x: auto;
    scrollbar-width: none;
}

.store-navbar-inner::-webkit-scrollbar {
    display: none;
}

.store-navbar a {
    position: relative;
    flex: 0 0 auto;
    padding: 10px 12px;
    border-radius: 6px;
    color: rgba(255, 255, 255, .92);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.store-navbar a:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.store-navbar a.is-active {
    color: #fff;
    font-weight: 700;
}

.store-navbar a.is-active::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 3px;
    height: 2px;
    border-radius: 2px;
    background: var(--orange);
}

.store-navbar-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    margin-left: auto;
    padding-left: 16px;
    color: rgba(255, 255, 255, .85);
    font-size: 13px;
    white-space: nowrap;
}

.store-navbar-note .ui-icon {
    width: 18px;
    height: 18px;
}

/* ---------- Accueil ---------- */

.home-hero {
    padding: 24px 0 8px;
}

.home-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) minmax(280px, 1fr);
    gap: 16px;
}

.home-hero-main {
    position: relative;
    overflow: hidden;
    padding: clamp(28px, 4vw, 56px);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 85% 20%, rgba(255, 122, 26, .28), transparent 42%),
        radial-gradient(circle at 10% 110%, rgba(201, 243, 233, .18), transparent 45%),
        linear-gradient(135deg, var(--teal-deep), var(--teal) 120%);
    color: #fff;
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

.hero-kicker .ui-icon {
    width: 16px;
    height: 16px;
}

.home-hero-main h1 {
    max-width: 640px;
    margin-top: 18px;
    color: #fff;
    font-size: clamp(32px, 4.2vw, 54px);
    line-height: 1.05;
}

.home-hero-main p {
    max-width: 540px;
    margin: 14px 0 0;
    color: rgba(255, 255, 255, .82);
    font-size: 17px;
    line-height: 1.6;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

.hero-actions .ui-icon {
    width: 18px;
    height: 18px;
}

.hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin: 32px 0 0;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.hero-stats div {
    margin: 0;
}

.hero-stats dt {
    color: #fff;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.hero-stats dd {
    margin: 2px 0 0;
    color: rgba(255, 255, 255, .72);
    font-size: 13px;
}

.home-hero-side {
    display: grid;
    gap: 16px;
}

.promo-tile {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--ink);
    transition: box-shadow .18s ease, transform .18s ease;
}

.promo-tile:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.promo-tile strong {
    font-size: 21px;
    line-height: 1.2;
    letter-spacing: -.01em;
}

.promo-label {
    color: var(--teal-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.promo-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--teal-text);
    font-size: 14px;
    font-weight: 600;
}

.promo-link .ui-icon {
    width: 16px;
    height: 16px;
}

.promo-tile-orange {
    border-color: transparent;
    background: linear-gradient(135deg, var(--k-ff8a33-b), var(--orange-dark));
    color: #fff;
}

.promo-tile-orange .promo-label,
.promo-tile-orange .promo-link {
    color: #fff;
}

.trust-strip {
    padding: 16px 0 0;
}

.trust-strip-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--line);
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: var(--surface);
}

.trust-item > .ui-icon {
    width: 40px;
    height: 40px;
    padding: 9px;
    border-radius: 10px;
    background: var(--teal-soft);
    color: var(--teal-text);
}

.trust-item strong {
    display: block;
    font-size: 14px;
}

.trust-item span {
    color: var(--muted);
    font-size: 13px;
}

.category-rail {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.category-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 18px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.category-chip:hover {
    border-color: var(--teal);
    box-shadow: var(--shadow);
}

.category-chip-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--teal-soft);
    color: var(--teal-text);
}

.category-chip-icon .ui-icon {
    width: 26px;
    height: 26px;
}

.shop-rail {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
}

.shop-tile {
    display: grid;
    justify-items: start;
    gap: 6px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.shop-tile:hover {
    border-color: var(--teal);
    box-shadow: var(--shadow);
}

.shop-tile img {
    width: 56px;
    height: 56px;
    margin-bottom: 6px;
    border: 1px solid var(--line);
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-2);
}

.shop-tile strong {
    font-size: 15px;
}

.shop-tile span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--muted);
    font-size: 13px;
}

.shop-tile span .ui-icon {
    width: 14px;
    height: 14px;
}

.cta-band {
    margin-top: 24px;
    margin-bottom: 48px;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 90% 0%, rgba(255, 122, 26, .25), transparent 40%),
        linear-gradient(135deg, var(--teal-deep), var(--teal));
}

.cta-band h2 {
    color: #fff;
    font-size: clamp(24px, 2.6vw, 34px);
}

/* ---------- Cartes produit ---------- */

.product-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}

.product-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: none;
    transition: box-shadow .18s ease, border-color .18s ease;
}

.product-card:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow);
    transform: none;
}

.product-image {
    aspect-ratio: 1 / 1;
    background: var(--surface-2);
}

.product-image img {
    transition: transform .3s ease;
}

.product-card:hover .product-image img {
    transform: scale(1.04);
}

.product-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px 14px;
}

.product-category {
    color: var(--teal-text);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.product-title {
    display: -webkit-box;
    min-height: 0;
    overflow: hidden;
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.product-title:hover {
    color: var(--teal-text);
}

.product-shop {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--muted);
    font-size: 13px;
}

.product-shop .ui-icon {
    width: 15px;
    height: 15px;
}

.product-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    margin-top: auto;
    padding-top: 6px;
}

.product-price .price {
    color: var(--ink);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.01em;
    white-space: nowrap;
}

.price-alt {
    color: var(--muted);
    font-size: 13px;
    white-space: nowrap;
}

.btn-cart {
    width: 100%;
    min-height: 40px;
    margin-top: 8px;
    border: 1px solid var(--teal);
    background: var(--surface);
    color: var(--teal-text);
}

.btn-cart:hover {
    background: var(--teal);
    color: #fff;
    filter: none;
}

.btn-cart .ui-icon {
    width: 18px;
    height: 18px;
}

.btn-cart.is-added {
    border-color: var(--success);
    background: var(--success);
    color: #fff;
}

/* ---------- Pied de page ---------- */

.site-footer {
    margin-top: 32px;
    background: var(--teal-deep);
}

/* ---------- Espaces internes (admin, vendeur, agent) ---------- */

.app-header {
    position: sticky;
    top: 0;
    z-index: 60;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    box-shadow: none;
    backdrop-filter: none;
}

.app-header .header-inner {
    min-height: 64px;
    max-width: none;
}

.app-header .brand {
    color: var(--ink);
    font-weight: 800;
}

.app-header .brand-mark {
    width: 38px;
    height: 38px;
    box-shadow: none;
    border: 1px solid var(--line);
}

.brand-tag {
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--teal-soft);
    color: var(--teal-text);
    font-size: 12px;
    font-weight: 600;
}

.app-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-header-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 10px;
    border-radius: 8px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
}

.app-header-link:hover {
    background: var(--surface-2);
    color: var(--ink);
}

.user-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 3px 12px 3px 3px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
}

.user-chip:hover {
    border-color: var(--line-strong);
}

.user-avatar {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--teal);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.app-header .btn .ui-icon {
    width: 16px;
    height: 16px;
}

/* Menu de l'espace : ligne defilante par defaut, colonne laterale sur grand ecran. */
.admin-nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
}

.admin-nav::-webkit-scrollbar {
    display: none;
}

.admin-nav a {
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.admin-nav a:hover {
    border-color: var(--line-strong);
}

.admin-nav a.is-active {
    border-color: var(--teal);
    background: var(--teal);
    color: #fff;
    font-weight: 600;
}

.stat {
    padding: 16px 20px;
}

.stat .shop-name {
    font-size: 13px;
}

.stat h2 {
    margin-top: 6px;
    font-size: 28px;
    letter-spacing: -.02em;
}

.data-table th {
    background: var(--surface-2);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
}

.data-table td {
    font-size: 14px;
}

.data-table tbody tr:hover td {
    background: var(--k-fbfcfc-b);
}

.internal-footer {
    border-top: 1px solid var(--line);
    background: var(--surface);
    color: var(--muted);
}

@media (min-width: 1041px) {
    .internal-body:has(.admin-nav) main,
    .internal-body:has(.admin-nav) .internal-footer {
        padding-left: 248px;
    }

    .internal-body .admin-nav {
        position: fixed;
        top: 65px;
        bottom: 0;
        left: 0;
        z-index: 40;
        flex-direction: column;
        gap: 2px;
        width: 248px;
        margin: 0;
        padding: 18px 12px;
        overflow-x: hidden;
        overflow-y: auto;
        border-right: 1px solid var(--line);
        background: var(--surface);
    }

    .internal-body .admin-nav a {
        display: flex;
        align-items: center;
        min-height: 40px;
        padding: 9px 12px;
        border: 0;
        background: transparent;
        color: var(--muted);
    }

    .internal-body .admin-nav a:hover {
        background: var(--surface-2);
        color: var(--ink);
    }

    .internal-body .admin-nav a.is-active {
        background: var(--teal-soft);
        color: var(--teal-deep-text);
    }

    .internal-body .section {
        padding-top: 28px;
    }
}

/* ---------- Tablette ---------- */

@media (max-width: 1040px) {
    .home-hero-grid {
        grid-template-columns: 1fr;
    }

    .home-hero-side {
        grid-template-columns: 1fr 1fr;
    }

    .trust-strip-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .deliver-chip {
        display: none;
    }

    .store-action span,
    .cart-label {
        display: none;
    }
}

/* ---------- Mobile ---------- */

@media (max-width: 768px) {
    body,
    .internal-body {
        font-size: 15px;
    }

    .section {
        padding: 28px 0;
    }

    .section-tight {
        padding: 20px 0;
    }

    .store-topbar-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px 8px;
        min-height: 0;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .store-search {
        grid-column: 1 / -1;
        grid-row: 2;
        height: 44px;
    }

    .store-search select {
        display: none;
    }

    .store-search input {
        font-size: 16px;
    }

    .store-actions {
        grid-column: 2;
        grid-row: 1;
    }

    .store-action,
    .store-header .cart-pill {
        min-height: 44px;
        padding: 4px 8px;
    }

    .store-header .brand {
        width: auto;
        font-size: 18px;
    }

    .store-navbar-inner {
        padding-left: 8px;
        padding-right: 8px;
    }

    .store-navbar-note {
        display: none;
    }

    .home-hero {
        padding-top: 14px;
    }

    .home-hero-main {
        padding: 26px 20px;
    }

    .home-hero-main h1 {
        font-size: 32px;
    }

    .home-hero-main p {
        font-size: 15px;
    }

    .hero-actions .btn {
        flex: 1 1 100%;
    }

    .hero-stats {
        gap: 18px;
        margin-top: 24px;
    }

    .hero-stats dt {
        font-size: 22px;
    }

    .home-hero-side {
        grid-template-columns: 1fr;
    }

    .promo-tile {
        padding: 18px;
    }

    .promo-tile strong {
        font-size: 18px;
    }

    .trust-strip-grid {
        grid-template-columns: 1fr 1fr;
    }

    .trust-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 14px;
    }

    .category-rail,
    .shop-rail {
        display: flex;
        gap: 10px;
        margin: 0 -16px;
        padding: 2px 16px 8px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    .category-rail::-webkit-scrollbar,
    .shop-rail::-webkit-scrollbar {
        display: none;
    }

    .category-chip {
        flex: 0 0 112px;
        padding: 14px 8px;
        font-size: 13px;
        scroll-snap-align: start;
    }

    .shop-tile {
        flex: 0 0 200px;
        scroll-snap-align: start;
    }

    .section-head {
        flex-direction: row;
        align-items: end;
        justify-content: space-between;
        gap: 12px;
    }

    .section-head p {
        font-size: 14px;
    }

    /* Deux produits par ligne, comme les applis marchandes. */
    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .product-body {
        gap: 4px;
        padding: 10px;
    }

    .product-title {
        font-size: 14px;
    }

    .product-shop {
        font-size: 12px;
    }

    .product-price .price {
        font-size: 17px;
    }

    .btn-cart {
        min-height: 40px;
        padding: 8px;
        font-size: 13px;
    }

    .btn-cart span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cta-band {
        margin-left: 16px;
        margin-right: 16px;
        width: auto;
        padding: 26px 20px;
    }

    .app-header .header-inner {
        min-height: 58px;
        padding-top: 8px;
        padding-bottom: 8px;
        flex-wrap: nowrap;
    }

    .app-header .brand {
        flex: 1 1 auto;
        width: auto;
    }

    .brand-tag,
    .app-header-link span,
    .user-chip-name,
    .app-header .btn span {
        display: none;
    }

    .user-chip {
        padding: 3px;
    }

    .app-header .btn {
        width: 40px;
        padding: 0;
    }
}

@media (max-width: 380px) {
    .store-action {
        display: none;
    }
}

@media (max-width: 768px) {
    .store-header .cart-box,
    .store-header .cart-pill {
        width: auto;
    }

    .store-header .cart-menu {
        right: 0;
        left: auto;
    }
}

.category-chip-all {
    border-style: dashed;
    color: var(--teal-text);
}

.category-chip-all .category-chip-icon {
    background: var(--teal);
    color: #fff;
}

@media (max-width: 768px) {
    .hero-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .hero-stats dd {
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    .category-rail,
    .shop-rail {
        scroll-padding-inline: 16px;
    }

    .trust-item {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        padding: 12px;
    }

    .trust-item > .ui-icon {
        width: 34px;
        height: 34px;
        padding: 7px;
    }

    .trust-item strong {
        font-size: 13px;
        line-height: 1.25;
    }

    .trust-item span {
        display: none;
    }
}

.label-short {
    display: none;
}

@media (max-width: 768px) {
    .btn-cart .label-long {
        display: none;
    }

    .btn-cart .label-short {
        display: inline;
    }
}

/* ---------- Fiche produit ---------- */

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
    color: var(--muted);
    font-size: 13px;
}

.breadcrumb a {
    color: var(--teal-text);
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb [aria-current] {
    color: var(--ink);
}

.pdp-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 320px;
    gap: 28px;
    align-items: start;
}

.pdp-main-image {
    overflow: hidden;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.pdp-main-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pdp-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    overflow-x: auto;
}

.pdp-thumbs button {
    flex: 0 0 68px;
    height: 68px;
    padding: 0;
    overflow: hidden;
    border: 2px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    cursor: pointer;
}

.pdp-thumbs button.is-active,
.pdp-thumbs button:hover {
    border-color: var(--orange);
}

.pdp-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pdp-info h1 {
    margin-top: 6px;
    font-size: clamp(24px, 2.4vw, 32px);
}

.pdp-shop {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    color: var(--teal-text);
    font-size: 14px;
}

.pdp-shop:hover strong {
    text-decoration: underline;
}

.pdp-shop .ui-icon {
    width: 18px;
    height: 18px;
}

.pdp-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin: 18px 0;
    padding: 16px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.pdp-price .price {
    color: var(--ink);
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.pdp-description h2 {
    margin-bottom: 8px;
    font-size: 17px;
}

.pdp-description p {
    margin: 0;
    color: var(--k-34474a-t);
    line-height: 1.7;
}

.pdp-buybox {
    position: sticky;
    top: 130px;
    display: grid;
    gap: 10px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.pdp-buybox-price {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.stock-status {
    font-size: 14px;
    font-weight: 600;
}

.stock-status.is-in {
    color: var(--success);
}

.stock-status.is-out {
    color: var(--k-c0392b-t);
}

.btn-block {
    width: 100%;
}

.btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

.pdp-assurances {
    display: grid;
    gap: 10px;
    margin: 8px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--line);
    list-style: none;
}

.pdp-assurances li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: 13px;
}

.pdp-assurances .ui-icon {
    width: 18px;
    height: 18px;
    color: var(--teal-text);
}

.pdp-seller {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.pdp-seller img {
    width: 72px;
    height: 72px;
    border: 1px solid var(--line);
    border-radius: 50%;
    object-fit: cover;
}

.pdp-seller h2 {
    margin: 4px 0;
    font-size: 19px;
}

.pdp-seller p {
    margin: 0;
    color: var(--muted);
}

.pdp-seller-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 8px;
    font-size: 14px;
}

.pdp-seller-meta span,
.pdp-seller-meta a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pdp-seller-meta .ui-icon {
    width: 16px;
    height: 16px;
}

.form-hint {
    margin: -6px 0 4px;
    color: var(--muted);
    font-size: 14px;
}

@media (max-width: 1180px) {
    .pdp-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .pdp-buybox {
        position: static;
        grid-column: 2;
    }
}

@media (max-width: 768px) {
    .pdp-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .pdp-buybox {
        grid-column: auto;
    }

    .pdp-buybox-price {
        display: none;
    }

    .pdp-price .price {
        font-size: 28px;
    }

    .pdp-seller {
        grid-template-columns: 56px minmax(0, 1fr);
    }

    .pdp-seller img {
        width: 56px;
        height: 56px;
    }

    .pdp-seller .btn {
        grid-column: 1 / -1;
    }
}

/* Titres des espaces internes : sobres, comme un back-office. */
.internal-body h1 {
    margin-top: 10px;
    font-size: clamp(24px, 2.4vw, 32px);
    letter-spacing: -.02em;
}

.internal-body .lead {
    margin-top: 6px;
    font-size: 15px;
}

.internal-body .dashboard-grid {
    margin-top: 22px;
}

.app-header .brand {
    flex: 1 1 0;
    min-width: 0;
}

.app-header-actions {
    flex: 0 0 auto;
}

@media (max-width: 768px) {
    .app-header .brand .brand-tag {
        display: none;
    }

    .app-header .brand {
        overflow: hidden;
    }
}

/* ---------- Page tarifs : onglets de paiement ---------- */

.billing-toggle {
    border-color: var(--line-strong);
}

.billing-toggle button {
    min-height: 42px;
    padding: 9px 22px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--teal-dark-text);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.billing-toggle button:hover {
    background: var(--teal-soft);
}

.billing-toggle button.active {
    background: var(--teal-deep);
    color: #fff;
}

.billing-toggle button:focus-visible {
    outline: 3px solid var(--orange);
    outline-offset: 2px;
}

[data-billing-panel][hidden] {
    display: none !important;
}

.billing-intro {
    max-width: 640px;
    margin: -12px auto 22px;
    color: var(--muted);
    text-align: center;
}

.mobile-money-steps {
    margin: 0 0 24px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.mobile-money-steps h2 {
    margin-bottom: 16px;
    font-size: 20px;
}

.mobile-money-steps ol {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.mobile-money-steps li {
    position: relative;
    display: grid;
    gap: 4px;
    padding: 46px 14px 14px;
    border-radius: 10px;
    background: var(--surface-2);
    counter-increment: step;
}

.mobile-money-steps li::before {
    content: counter(step);
    position: absolute;
    top: 12px;
    left: 14px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--orange);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.mobile-money-steps li strong {
    font-size: 14px;
}

.mobile-money-steps li span {
    color: var(--muted);
    font-size: 13px;
}

.mobile-money-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0;
    color: var(--teal-dark-text);
    font-size: 14px;
    font-weight: 500;
}

.mobile-money-note .ui-icon {
    width: 18px;
    height: 18px;
}

@media (max-width: 1040px) {
    .mobile-money-steps ol {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .billing-toggle {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .billing-toggle button {
        padding: 9px 8px;
        font-size: 13px;
    }

    .mobile-money-steps {
        padding: 18px;
    }

    .mobile-money-steps ol {
        grid-template-columns: 1fr;
    }

    .billing-intro {
        margin-top: -8px;
        text-align: left;
    }
}

/* ---------- En-tete pleine largeur ---------- */

.store-header .container {
    max-width: none;
}

@media (min-width: 1041px) {
    /* Les liens occupent toute la largeur de la barre, sans vide a droite ni a gauche. */
    .store-navbar-inner {
        justify-content: space-between;
    }

    .store-navbar-note {
        margin-left: 0;
    }
}

/* Pages publiques : contenu aligne sur les memes bords que l'en-tete, d'un bout a l'autre de l'ecran. */
.public-body .container {
    max-width: none;
}

/* ---------- Date et heure des espaces internes ---------- */

.dashboard-welcome {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
    margin: 18px 0 4px;
    padding: 18px 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 122, 26, .10), transparent 45%),
        var(--surface);
}

.dashboard-greeting {
    display: block;
    font-size: 18px;
    letter-spacing: -.01em;
}

.dashboard-last-login {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px;
}

.dashboard-clock {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dashboard-clock > .ui-icon {
    width: 42px;
    height: 42px;
    padding: 10px;
    border-radius: 12px;
    background: var(--teal-soft);
    color: var(--teal-text);
}

.dashboard-clock-time {
    display: block;
    color: var(--ink);
    font-size: 26px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    line-height: 1.1;
}

.dashboard-clock-date {
    display: block;
    color: var(--muted);
    font-size: 13px;
}

.dashboard-clock-date::first-letter {
    text-transform: uppercase;
}

.app-header-clock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 10px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.app-header-clock .ui-icon {
    width: 16px;
    height: 16px;
}

@media (max-width: 768px) {
    .app-header-clock {
        display: none;
    }

    .dashboard-welcome {
        padding: 16px;
    }

    .dashboard-clock-time {
        font-size: 22px;
    }
}

/* ---------- Parametres admin ---------- */

.settings-tabs {
    display: flex;
    gap: 6px;
    margin: 18px 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.settings-tabs::-webkit-scrollbar {
    display: none;
}

.settings-tabs a {
    flex: 0 0 auto;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.settings-tabs a:hover {
    border-color: var(--teal);
    color: var(--teal-text);
}

.settings-stack {
    display: grid;
    gap: 18px;
}

.settings-section {
    scroll-margin-top: 90px;
    padding: 22px;
}

.settings-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px 18px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.settings-section-head h2 {
    font-size: 19px;
}

.settings-section-head p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.settings-updated {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
}

.settings-section label > span:first-child {
    font-weight: 600;
}

.settings-input {
    position: relative;
    display: block;
}

.settings-input.has-suffix .form-control {
    padding-right: 64px;
}

.settings-suffix {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    pointer-events: none;
}

.field-help {
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
}

.field-error {
    color: var(--k-c0392b-t);
    font-size: 12px;
    font-weight: 600;
}

.has-error .form-control {
    border-color: var(--k-c0392b-l);
    box-shadow: 0 0 0 3px rgba(192, 57, 43, .12);
}

.settings-switch {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-2);
}

.settings-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
}

.flash-success {
    border-color: var(--k-bfe3d4-l);
    border-left-color: var(--success);
    background: var(--k-eaf7f1-b);
}

.maintenance-bar {
    padding: 8px 16px;
    background: var(--k-c0392b-b);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.maintenance-bar a {
    color: #fff;
    text-decoration: underline;
}

.internal-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 16px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
}

.internal-note > .ui-icon {
    color: var(--teal-text);
}

.internal-note div {
    flex: 1 1 auto;
    display: grid;
    gap: 2px;
    font-size: 14px;
}

.internal-note span {
    color: var(--muted);
}

.internal-note a {
    color: var(--teal-text);
    font-size: 13px;
    font-weight: 600;
}

/* ---------- Mobile Money et livraison (public) ---------- */

.mobile-money-box {
    padding: 16px;
    border: 1px solid var(--k-f6d3b8-l);
    border-radius: var(--radius);
    background: var(--orange-soft);
}

.mobile-money-box-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
}

.mobile-money-box-title .ui-icon {
    color: var(--orange-text);
}

.mobile-money-box ul {
    display: grid;
    gap: 6px;
    margin: 12px 0;
    padding: 0;
    list-style: none;
}

.mobile-money-box li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--surface);
}

.mobile-money-box li strong {
    font-size: 16px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    user-select: all;
}

.mobile-money-box p {
    margin: 6px 0 0;
    color: var(--ink);
    font-size: 13px;
}

[data-payment-mobile][hidden] {
    display: none !important;
}

.payment-mobile-fields {
    gap: 14px;
}

.delivery-info {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--teal-soft);
    color: var(--teal-dark-text);
    font-size: 13px;
}

.delivery-info .ui-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

.footer-contact span {
    color: rgba(255, 255, 255, .7);
    font-size: 13px;
}

@media (max-width: 768px) {
    .settings-section {
        padding: 16px;
    }

    .settings-actions .btn {
        width: 100%;
    }
}

/* ---------- Badge de verification (boutique / vendeur en ligne) ---------- */

.verified-badge {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    margin-left: .3em;
    color: var(--k-3b97f0-t);
    vertical-align: -.12em;
    line-height: 0;
    cursor: help;
}

.verified-badge svg {
    width: .95em;
    height: .95em;
    min-width: 14px;
    min-height: 14px;
}

h1 .verified-badge svg {
    width: .7em;
    height: .7em;
}

.product-shop {
    min-width: 0;
}

.product-shop-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-shop .verified-badge {
    margin-left: 2px;
}

/* Boutiques et vendeurs : bleu ; utilisateurs (admin compris) : vert. */
.verified-badge.is-shop {
    color: var(--k-3b97f0-t);
}

.verified-badge.is-user {
    color: var(--k-16a34a-t);
}

.verified-badge svg {
    width: 1em;
    height: 1em;
}

h1 .verified-badge svg {
    width: .75em;
    height: .75em;
}

/* ---------- Admin > Vendeurs : verification ---------- */

.verification-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.verification-select {
    width: auto;
    min-width: 128px;
    min-height: 36px;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 600;
}

.verification-select.is-verified {
    border-color: var(--k-3b97f0-l);
    background: var(--k-eaf3fe-b);
    color: var(--k-1f6fbf-t);
}

.verification-select.is-pending {
    border-color: var(--k-f6d3b8-l);
    background: var(--orange-soft);
    color: var(--orange-text);
}

.verification-select.is-rejected {
    border-color: var(--k-f1b9b2-l);
    background: var(--k-fdecea-b);
    color: var(--k-c0392b-t);
}

/* ---------- Guide photos vendeurs ---------- */

.guide-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
    gap: 24px;
    align-items: center;
    padding: clamp(22px, 3vw, 36px);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 122, 26, .12), transparent 45%),
        var(--surface);
}

.guide-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.guide-hero-actions .ui-icon {
    width: 18px;
    height: 18px;
}

.guide-facts {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.guide-facts li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--surface-2);
}

.guide-facts .ui-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    padding: 8px;
    border-radius: 10px;
    background: var(--teal-soft);
    color: var(--teal-text);
}

.guide-facts strong {
    display: block;
    font-size: 14px;
}

.guide-facts span {
    color: var(--muted);
    font-size: 13px;
}

.guide-rules {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 14px;
}

.guide-rule {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.guide-rule-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.guide-rule-icon {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--teal-soft);
    color: var(--teal-text);
}

.guide-rule-number {
    color: var(--line-strong);
    font-size: 26px;
    font-weight: 800;
}

.guide-rule h3 {
    margin-top: 4px;
}

.guide-rule p {
    margin: 0;
    color: var(--k-34474a-t);
    font-size: 14px;
    line-height: 1.6;
}

.guide-rule .guide-tip {
    margin-top: auto;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--orange-soft);
    color: var(--ink);
    font-size: 13px;
}

.guide-sequence {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: shot;
}

.guide-sequence li {
    position: relative;
    display: grid;
    gap: 6px;
    padding: 50px 16px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    counter-increment: shot;
}

.guide-sequence li::before {
    content: counter(shot);
    position: absolute;
    top: 14px;
    left: 16px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--teal);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.guide-sequence li:first-child::before {
    background: var(--orange);
}

.guide-sequence span {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.guide-categories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.guide-category {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.guide-category h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.guide-category ul,
.guide-list ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.guide-category li,
.guide-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    line-height: 1.45;
}

.guide-category li .ui-icon,
.guide-list li .ui-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 1px;
}

.guide-category li .ui-icon {
    color: var(--success);
}

.guide-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.guide-list {
    padding: 20px;
    border-radius: var(--radius);
}

.guide-list h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 19px;
}

.guide-list.is-do {
    border: 1px solid var(--k-bfe3d4-l);
    background: var(--k-eaf7f1-b);
}

.guide-list.is-do .ui-icon {
    color: var(--success);
}

.guide-list.is-dont {
    border: 1px solid var(--k-f1b9b2-l);
    background: var(--k-fdecea-b);
}

.guide-list.is-dont .ui-icon {
    color: var(--k-c0392b-t);
}

.guide-checklist {
    display: grid;
    gap: 16px;
    padding: clamp(20px, 3vw, 32px);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--teal-deep), var(--teal));
    color: #fff;
}

.guide-checklist h2 {
    color: #fff;
}

.guide-checklist p {
    margin: 6px 0 0;
    color: rgba(255, 255, 255, .82);
}

.guide-checklist .promo-label {
    color: var(--k-ffb27a-t);
}

.guide-checklist ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.guide-checklist label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-weight: 500;
    cursor: pointer;
}

.guide-checklist input[type="checkbox"] {
    accent-color: var(--orange);
}

.guide-checklist input:checked + span {
    text-decoration: line-through;
    opacity: .75;
}

.guide-checklist-done {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--surface);
    color: var(--success) !important;
    font-weight: 700;
}

.guide-checklist-done[hidden] {
    display: none;
}

.guide-checklist .btn {
    justify-self: start;
}

@media (max-width: 1040px) {
    .guide-hero {
        grid-template-columns: 1fr;
    }

    .guide-sequence {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .guide-sequence,
    .guide-compare {
        grid-template-columns: 1fr;
    }

    .guide-sequence li {
        padding: 14px 14px 14px 56px;
    }

    .guide-sequence li::before {
        top: 14px;
        left: 14px;
    }

    .guide-hero-actions .btn,
    .guide-checklist .btn {
        width: 100%;
    }

    .photo-tips-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- Guide photos : galerie d'exemples ---------- */

.example-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    overflow-x: auto;
    scrollbar-width: none;
}

.example-filters::-webkit-scrollbar {
    display: none;
}

.example-filters button {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.example-filters button:hover {
    border-color: var(--teal);
}

.example-filters button.is-active {
    border-color: var(--teal);
    background: var(--teal);
    color: #fff;
}

.example-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.example-card {
    display: flex;
    flex-direction: column;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.example-card[hidden] {
    display: none;
}

.example-image {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--surface-2);
}

.example-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.example-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 9px;
    border-radius: 6px;
    background: rgb(var(--glass-rgb) / .92);
    color: var(--teal-dark-text);
    font-size: 11px;
    font-weight: 700;
}

.example-card figcaption {
    display: grid;
    gap: 6px;
    padding: 12px 14px 14px;
}

.example-card figcaption strong {
    font-size: 15px;
}

.example-why {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    color: var(--k-34474a-t);
    font-size: 13px;
    line-height: 1.45;
}

.example-why .ui-icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    color: var(--success);
}

@media (max-width: 768px) {
    .example-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .example-card figcaption {
        padding: 10px;
    }

    .example-card figcaption strong {
        font-size: 14px;
    }

    .example-why {
        font-size: 12px;
    }
}

.settings-tabs a.is-active {
    border-color: var(--teal);
    background: var(--teal);
    color: #fff;
}

.photo-admin-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* ---------- Vitrine des vendeurs ---------- */

.feature-form {
    display: grid;
    gap: 10px;
    margin-top: 10px;
    min-width: 240px;
}

.feature-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
}

.feature-photos legend {
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
}

.feature-photo {
    position: relative;
    display: block;
    min-height: 0;
    cursor: pointer;
}

.feature-photo input {
    position: absolute;
    opacity: 0;
}

.feature-photo img {
    width: 58px;
    height: 58px;
    border: 2px solid var(--line);
    border-radius: 8px;
    object-fit: cover;
}

.feature-photo input:checked + img {
    border-color: var(--orange);
    box-shadow: 0 0 0 2px var(--orange-soft);
}

.feature-photo input:focus-visible + img {
    outline: 3px solid var(--teal);
}

.example-shop {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--muted);
    font-size: 13px;
}

.example-shop .ui-icon {
    width: 15px;
    height: 15px;
}

.example-product-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--teal-text);
    font-size: 13px;
    font-weight: 600;
}

.example-product-link .ui-icon {
    width: 14px;
    height: 14px;
}

.seller-featured {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 16px 0 0;
    padding: 16px 18px;
    border: 1px solid var(--k-f6d3b8-l);
    border-radius: var(--radius);
    background: var(--orange-soft);
}

.seller-featured > .ui-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 8px;
    border-radius: 10px;
    background: var(--orange);
    color: #fff;
}

.seller-featured strong {
    display: block;
    font-size: 15px;
}

.seller-featured p {
    margin: 4px 0 0;
    font-size: 14px;
}

.seller-featured a {
    color: var(--teal-text);
    font-weight: 600;
}


/* ---------- Tarifs : etiquette des nouveaux avantages ---------- */

.new-tag {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--orange-soft);
    color: var(--orange-text);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    vertical-align: 1px;
    white-space: nowrap;
}

/* ---------- Compte client ---------- */

.account-auth {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 28px;
    align-items: start;
}

.account-benefits {
    display: grid;
    gap: 10px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.account-benefits li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
}

.account-benefits .ui-icon {
    width: 36px;
    height: 36px;
    padding: 8px;
    border-radius: 10px;
    background: var(--teal-soft);
    color: var(--teal-text);
}

.account-form {
    padding: 22px;
}

.account-terms {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 500;
}

.account-terms input {
    margin-top: 2px;
}

.account-terms a,
.account-switch a,
.account-checkout-note a {
    color: var(--teal-text);
    font-weight: 600;
    text-decoration: underline;
}

.account-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
}

.account-head .btn .ui-icon {
    width: 16px;
    height: 16px;
}

.account-tabs {
    display: flex;
    gap: 6px;
    margin: 20px 0 16px;
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
}

.account-tabs::-webkit-scrollbar {
    display: none;
}

.account-tabs a {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 12px 14px;
    border-bottom: 3px solid transparent;
    color: var(--muted);
    font-weight: 600;
    white-space: nowrap;
}

.account-tabs a.is-active {
    border-bottom-color: var(--orange);
    color: var(--ink);
}

.account-orders {
    display: grid;
    gap: 14px;
}

.account-order {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.account-order-head,
.account-order-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px 14px;
}

.account-order-head strong {
    display: block;
    font-size: 15px;
    overflow-wrap: anywhere;
}

.account-order-foot {
    padding-top: 12px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 14px;
}

.account-order-foot strong {
    color: var(--ink);
}

.order-status {
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--orange-soft);
    color: var(--orange-text);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.order-status.is-accepted,
.order-status.is-preparing,
.order-status.is-ready {
    background: var(--teal-soft);
    color: var(--teal-dark-text);
}

.order-status.is-delivered {
    background: var(--k-eaf7f1-b);
    color: var(--success);
}

.order-status.is-rejected,
.order-status.is-cancelled {
    background: var(--k-fdecea-b);
    color: var(--k-c0392b-t);
}

.order-progress {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.order-progress li {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 12px;
    text-align: center;
    counter-increment: step;
}

.order-progress li::before {
    content: "";
    z-index: 1;
    width: 14px;
    height: 14px;
    border: 2px solid var(--line-strong);
    border-radius: 50%;
    background: var(--surface);
}

.order-progress li::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--line);
}

.order-progress li:last-child::after {
    display: none;
}

.order-progress li.is-done {
    color: var(--ink);
    font-weight: 600;
}

.order-progress li.is-done::before {
    border-color: var(--teal);
    background: var(--teal);
}

.order-progress li.is-done::after {
    background: var(--teal);
}

.account-order-items {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.account-order-items li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
}

.account-order-call {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
}

.account-order-call .ui-icon {
    width: 16px;
    height: 16px;
}

.account-empty {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 36px 20px;
}

.account-empty > .ui-icon {
    width: 44px;
    height: 44px;
    color: var(--teal-text);
}

.account-checkout-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--teal-soft);
    color: var(--teal-dark-text);
    font-size: 14px;
}

.account-checkout-note .ui-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

@media (max-width: 900px) {
    .account-auth {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .account-form,
    .account-order {
        padding: 16px;
    }

    .account-head .btn {
        width: 100%;
    }

    .order-progress li {
        font-size: 11px;
    }
}

/* Petits ecrans : on garde l'acces au compte, seul "Devenir vendeur" disparait de l'en-tete. */
@media (max-width: 380px) {
    .store-action {
        display: inline-flex;
    }

    .store-action-sell {
        display: none;
    }
}

/* ---------- Statistiques des espaces utilisateurs ---------- */

.stats-section {
    margin-top: 20px;
    scroll-margin-top: 90px;
}

.stats-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.stats-head h2 {
    font-size: 20px;
}

.stats-head p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.stats-period {
    display: inline-flex;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
}

.stats-period a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 6px 14px;
    border-radius: 999px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.stats-period a.is-active {
    background: var(--teal);
    color: #fff;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
}

.stat-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.stat-card-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--teal-soft);
    color: var(--teal-text);
}

.stat-card.is-success .stat-card-icon {
    background: var(--k-eaf7f1-b);
    color: var(--success);
}

.stat-card.is-warning {
    border-color: var(--k-f6d3b8-l);
}

.stat-card.is-warning .stat-card-icon {
    background: var(--orange-soft);
    color: var(--orange-text);
}

.stat-card-body {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.stat-card-label {
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.stat-card-value {
    color: var(--ink);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.stat-card-hint {
    color: var(--muted);
    font-size: 12px;
}

.stat-trend {
    font-size: 12px;
    font-weight: 700;
}

.stat-trend small {
    color: var(--muted);
    font-weight: 400;
}

.stat-trend.is-up {
    color: var(--success);
}

.stat-trend.is-down {
    color: var(--k-c0392b-t);
}

.stat-trend.is-flat {
    color: var(--muted);
}

.stats-panels {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    margin-top: 12px;
}

.stats-panels.is-single {
    grid-template-columns: minmax(0, 1fr);
    max-width: 520px;
}

.stats-chart,
.stats-ranking {
    margin: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.stats-chart figcaption {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 14px;
}

.stats-chart figcaption span {
    color: var(--muted);
}

.stats-chart-bars {
    display: flex;
    align-items: stretch;
    gap: 3px;
    height: 160px;
}

.stats-bar {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 0;
}

.stats-bar span {
    display: block;
    min-height: 2px;
    border-radius: 4px 4px 0 0;
    background: var(--teal);
    transition: background .15s ease;
}

.stats-bar:hover span {
    background: var(--orange);
}

.stats-bar small {
    height: 16px;
    margin-top: 4px;
    overflow: visible;
    color: var(--muted);
    font-size: 10px;
    text-align: center;
    white-space: nowrap;
}

.stats-ranking h3 {
    margin-bottom: 10px;
    font-size: 15px;
}

.stats-ranking ol {
    display: grid;
    gap: 8px;
    margin: 0 0 8px;
    padding-left: 20px;
}

.stats-ranking li {
    font-size: 14px;
}

.stats-ranking li span {
    display: inline-block;
    max-width: 65%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
}

.stats-ranking li strong {
    float: right;
    font-size: 13px;
}

@media (max-width: 1100px) {
    .stats-panels {
        grid-template-columns: 1fr 1fr;
    }

    .stats-chart {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .stat-card {
        flex-direction: column;
        gap: 8px;
        padding: 12px;
    }

    .stat-card-icon {
        width: 34px;
        height: 34px;
    }

    .stat-card-value {
        font-size: 18px;
    }

    .stats-panels {
        grid-template-columns: 1fr;
    }

    .stats-period {
        width: 100%;
    }

    .stats-period a {
        flex: 1 1 0;
        justify-content: center;
        min-height: 40px;
    }

    .stats-chart-bars {
        height: 130px;
        gap: 2px;
    }
}

/* Premiere et derniere date du graphique : alignees pour rester dans le cadre sur petit ecran. */
.stats-bar:first-child small {
    text-align: left;
}

.stats-bar:last-child small {
    text-align: right;
    direction: rtl;
}

.stats-chart {
    overflow: hidden;
}

/* ---------- Messagerie client <-> vendeur ---------- */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.inbox {
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    margin-top: 16px;
}

.inbox-list,
.inbox-thread {
    min-width: 0;
}

.inbox-list {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px;
}

.inbox-list h2 {
    margin: 4px 4px 10px;
    font-size: 16px;
}

.inbox-back {
    display: none;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    margin-bottom: 8px;
    color: var(--teal-text);
    font-weight: 600;
}

.inbox-back svg {
    transform: rotate(180deg);
}

.inbox-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 16px;
    text-align: center;
}

.chat-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
}

.chat-list a {
    display: grid;
    gap: 2px;
    padding: 10px;
    border-radius: var(--radius-sm);
    color: var(--ink);
    text-decoration: none;
    border: 1px solid transparent;
}

.chat-list a:hover {
    background: var(--surface-2);
}

.chat-list a.is-active {
    background: var(--teal-soft);
    border-color: var(--teal-soft);
}

.chat-list-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.chat-list-top strong,
.chat-list-subject,
.chat-list-preview {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-list-subject {
    font-size: 13px;
    color: var(--teal-text);
    font-weight: 600;
}

.chat-list-preview {
    font-size: 14px;
    color: var(--muted);
}

.chat-list-meta {
    font-size: 12px;
    color: var(--muted);
}

.chat-list-help {
    margin: 12px 4px 4px;
    font-size: 13px;
}

.chat-unread {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--orange);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.chat {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
}

.chat-head > div {
    display: grid;
    min-width: 0;
}

.chat-head span {
    font-size: 13px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-head .btn {
    flex-shrink: 0;
    min-height: 40px;
}

.chat-messages {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: min(60vh, 520px);
    overflow-y: auto;
    padding: 14px;
    background: var(--surface-2);
    overscroll-behavior: contain;
}

.chat-empty {
    margin: auto;
    color: var(--muted);
    text-align: center;
}

.chat-message {
    display: flex;
}

.chat-message.is-mine {
    justify-content: flex-end;
}

.chat-bubble {
    max-width: min(80%, 520px);
    padding: 8px 12px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    overflow-wrap: anywhere;
}

.chat-message.is-mine .chat-bubble {
    background: var(--teal);
    border-color: var(--teal);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.chat-message.is-theirs .chat-bubble {
    border-bottom-left-radius: 4px;
}

.chat-bubble p {
    margin: 0;
    line-height: 1.45;
}

.chat-author {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--teal-text);
    margin-bottom: 2px;
}

.chat-bubble time {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    opacity: .7;
    text-align: right;
}

.chat > .flash {
    margin: 10px 14px 0;
}

.chat-form {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px;
    border-top: 1px solid var(--line);
}

.chat-form textarea {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    max-height: 160px;
    resize: vertical;
    font-size: 16px;
}

.chat-form .btn {
    flex-shrink: 0;
    min-height: 44px;
}

.chat-readonly {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 12px 14px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 14px;
}

.account-order-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

.account-order-actions form {
    margin: 0;
}

.account-order-actions .btn,
.chat-start .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
}

.account-tabs .chat-unread {
    margin-left: 4px;
}

@media (max-width: 760px) {
    .inbox {
        grid-template-columns: minmax(0, 1fr);
    }

    .inbox.has-active .inbox-list {
        display: none;
    }

    .inbox:not(.has-active) .inbox-thread {
        display: none;
    }

    .inbox-back {
        display: inline-flex;
    }

    .chat-messages {
        height: 60vh;
        padding: 10px;
    }

    .chat-bubble {
        max-width: 88%;
    }

    .chat-form .btn span {
        display: none;
    }

    .account-order-actions .btn {
        width: 100%;
    }

    .account-order-actions form {
        width: 100%;
    }
}

/* ---------- Fiche produit : WhatsApp, partage, signalement ---------- */
.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--k-1f9d55-b);
    border: 1px solid var(--k-1f9d55-l);
    color: #fff;
}

.btn-whatsapp:hover,
.btn-whatsapp:focus-visible {
    background: var(--k-17803f-b);
    border-color: var(--k-17803f-l);
    color: #fff;
}

.pdp-buybox [data-share] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.pdp-report {
    display: grid;
    gap: 8px;
    justify-items: center;
}

.pdp-report .flash {
    width: 100%;
    margin: 0;
    font-size: 14px;
}

.pdp-report-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 8px;
    border: 0;
    background: none;
    color: var(--muted);
    font: inherit;
    font-size: 14px;
    text-decoration: underline;
    cursor: pointer;
}

.pdp-report-link:hover {
    color: var(--k-b42318-t);
}

.pdp-report-link svg {
    width: 16px;
    height: 16px;
}

.kin-dialog {
    width: min(520px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    padding: 18px;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.kin-dialog::backdrop {
    background: rgba(5, 47, 45, .55);
}

.kin-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.kin-dialog-head h2 {
    margin: 0;
    font-size: 20px;
}

.kin-dialog-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
}

.share-copy {
    display: flex;
    gap: 8px;
}

.share-copy input {
    flex: 1;
    min-width: 0;
    font-size: 16px;
}

.share-copy .btn,
.share-targets .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    flex-shrink: 0;
}

.share-feedback {
    min-height: 20px;
    margin: 6px 0;
    color: var(--success);
    font-size: 14px;
    font-weight: 600;
}

.share-targets {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.report-reasons {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
}

.report-reasons legend {
    margin-bottom: 6px;
    font-weight: 600;
}

.report-reason {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.report-reason input {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    accent-color: var(--orange);
}

.report-reason:has(input:checked) {
    border-color: var(--orange);
    background: var(--orange-soft);
}

/* Admin > Signalements */
.report-list {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.report-card {
    display: grid;
    gap: 12px;
    border-left: 4px solid var(--line-strong);
}

.report-card.is-new {
    border-left-color: var(--k-d92d20-l);
}

.report-card.is-in_progress {
    border-left-color: var(--orange);
}

.report-card.is-resolved {
    border-left-color: var(--success);
}

.report-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.report-card-head > div {
    display: grid;
    gap: 2px;
}

.report-status {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--surface-2);
    font-size: 13px;
    font-weight: 700;
}

.report-status.is-new {
    background: var(--k-fee4e2-b);
    color: var(--k-b42318-t);
}

.report-status.is-in_progress {
    background: var(--orange-soft);
    color: var(--orange-text);
}

.report-status.is-resolved {
    background: var(--teal-soft);
    color: var(--success);
}

.report-meta {
    display: grid;
    gap: 6px;
    margin: 0;
}

.report-meta > div {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 8px;
}

.report-meta dt {
    color: var(--muted);
    font-size: 14px;
}

.report-meta dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.report-message {
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    overflow-wrap: anywhere;
}

.report-form {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px;
}

.report-form .form-control {
    font-size: 16px;
}

.report-form .btn,
.report-visibility .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
}

.report-visibility,
.report-handled {
    margin: 0;
}

@media (max-width: 760px) {
    .report-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .report-meta > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .report-visibility .btn,
    .report-form .btn {
        width: 100%;
    }

    .kin-dialog {
        padding: 14px;
    }
}

@media (max-width: 360px) {
    .share-copy .btn span {
        display: none;
    }
}

.share-feedback.is-error {
    color: var(--muted);
    font-weight: 500;
}

/* ---------- Page Boutiques ---------- */
.shops-hero,
.seller-hero {
    background: linear-gradient(135deg, var(--teal-deep), var(--teal));
    color: #fff;
    padding: 36px 0 32px;
}

.shops-hero h1,
.seller-hero h1 {
    color: #fff;
    margin: 6px 0 8px;
}

.shops-hero .lead,
.seller-hero .lead {
    color: rgba(255, 255, 255, .85);
    max-width: 640px;
}

.shops-hero .eyebrow,
.seller-hero .eyebrow {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

.shops-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px auto;
    gap: 8px;
    margin-top: 18px;
    max-width: 860px;
}

.shops-search .form-control {
    min-height: 48px;
    font-size: 16px;
    border-color: transparent;
}

.shops-search .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 48px;
}

.shops-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}

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

.shops-chips a {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
}

.shops-chips a.is-active {
    background: var(--teal);
    border-color: var(--teal);
    color: #fff;
}

.shops-result-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 16px 0 12px;
}

.shops-result-head a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: var(--teal-text);
    font-weight: 600;
}

.shops-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.store-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s, transform .2s;
    min-width: 0;
}

.store-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.store-card-main {
    display: flex;
    gap: 14px;
    padding: 16px;
    color: var(--ink);
    text-decoration: none;
    flex: 1;
    min-width: 0;
}

.store-card-logo {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 14px;
    object-fit: cover;
    border: 1px solid var(--line);
    background: var(--surface-2);
}

.store-card-body {
    display: grid;
    gap: 4px;
    align-content: start;
    min-width: 0;
}

.store-card-name {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.store-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    color: var(--muted);
    font-size: 13px;
}

.store-card-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.store-card-meta svg,
.store-card-count svg,
.shop-profile-meta svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.store-card-type {
    display: inline-block;
    width: fit-content;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--teal-soft);
    color: var(--teal-text);
    font-size: 12px;
    font-weight: 700;
}

.store-card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--muted);
    font-size: 14px;
}

.store-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 16px;
    border-top: 1px solid var(--line);
}

.store-card-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--muted);
    font-size: 14px;
}

.store-card-actions {
    display: flex;
    gap: 8px;
}

.store-card-actions .btn {
    min-height: 40px;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    padding: 0;
}

.shops-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
    padding: 18px;
    border-radius: var(--radius);
    background: var(--orange-soft);
}

.shops-cta div {
    display: grid;
    gap: 2px;
}

.shops-cta span {
    color: var(--muted);
}

/* Page d une boutique */
.shop-profile {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: start;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.shop-profile-logo {
    width: 96px;
    height: 96px;
    border-radius: 20px;
    object-fit: cover;
    border: 1px solid var(--line);
}

.shop-profile-body {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.shop-profile-body h1 {
    margin: 0;
    font-size: clamp(24px, 4vw, 32px);
    overflow-wrap: anywhere;
}

.shop-profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--muted);
    font-size: 14px;
}

.shop-profile-meta li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.shop-profile-desc {
    margin: 4px 0 0;
    color: var(--ink);
}

.shop-profile-actions {
    display: grid;
    gap: 8px;
    min-width: 170px;
}

.shop-profile-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
}

.shop-profile-info {
    margin-top: 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.shop-profile-info summary {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 16px;
    font-weight: 600;
    cursor: pointer;
}

.shop-profile-info dl {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0 16px 16px;
}

.shop-profile-info dl > div {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 8px;
}

.shop-profile-info dt {
    color: var(--muted);
}

.shop-profile-info dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* ---------- Page Devenir vendeur ---------- */
.seller-hero {
    padding: 44px 0 40px;
}

.seller-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 32px;
    align-items: center;
}

.seller-hero h1 {
    font-size: clamp(30px, 5vw, 46px);
    line-height: 1.1;
}

.seller-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.seller-hero-actions .btn-soft {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .4);
    color: #fff;
}

.seller-hero-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 14px 0 0;
    color: rgba(255, 255, 255, .9);
    font-weight: 600;
}

.seller-hero-note svg {
    width: 18px;
    height: 18px;
    color: var(--k-ffb27a-t);
}

.seller-hero-card {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 20px;
    list-style: none;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
}

.seller-hero-card li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.seller-hero-card svg {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    color: var(--k-ffb27a-t);
}

.seller-hero-card span {
    display: grid;
    color: rgba(255, 255, 255, .8);
    font-size: 14px;
}

.seller-hero-card strong {
    color: #fff;
    font-size: 15px;
}

.seller-benefits {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.seller-benefit {
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.seller-benefit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--teal-soft);
    color: var(--teal-text);
}

.seller-benefit h3 {
    margin: 12px 0 4px;
    font-size: 17px;
}

.seller-benefit p {
    margin: 0;
    color: var(--muted);
}

.section-alt {
    background: var(--surface-2);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.seller-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.seller-steps li {
    display: grid;
    gap: 6px;
    align-content: start;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.seller-steps li > span:last-child {
    color: var(--muted);
    font-size: 14px;
}

.seller-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--orange);
    color: #fff;
    font-weight: 800;
}

.seller-apply {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 28px;
    align-items: start;
}

.seller-apply-intro h2 {
    margin-top: 0;
}

.seller-apply-intro > p {
    color: var(--muted);
}

.seller-apply-list {
    display: grid;
    gap: 10px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.seller-apply-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
}

.seller-apply-list svg {
    width: 18px;
    height: 18px;
    color: var(--success);
    flex-shrink: 0;
}

.seller-apply-form .form-control {
    font-size: 16px;
}

.seller-type-choice {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

.seller-type-choice legend {
    margin-bottom: 6px;
    font-weight: 600;
}

.seller-apply-done {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 32px 20px;
    text-align: center;
}

.seller-apply-done > svg {
    width: 48px;
    height: 48px;
    padding: 10px;
    border-radius: 999px;
    background: var(--teal-soft);
    color: var(--success);
}

.seller-apply-done h3 {
    margin: 0;
}

.seller-faq {
    max-width: 820px;
}

.seller-faq h2 {
    margin-top: 0;
}

.seller-faq details {
    margin-bottom: 8px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.seller-faq summary {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 16px;
    font-weight: 600;
    cursor: pointer;
}

.seller-faq details p {
    margin: 0;
    padding: 0 16px 16px;
    color: var(--muted);
}

@media (max-width: 900px) {
    .seller-hero-grid,
    .seller-apply {
        grid-template-columns: minmax(0, 1fr);
    }

    .seller-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .shops-search {
        grid-template-columns: minmax(0, 1fr);
    }

    .shops-hero,
    .seller-hero {
        padding: 26px 0 24px;
    }

    .shops-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .shop-profile {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 14px;
        padding: 16px;
    }

    .shop-profile-logo {
        width: 72px;
        height: 72px;
        border-radius: 16px;
    }

    .shop-profile-actions {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-width: 0;
    }

    .shop-profile-info dl > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .seller-type-choice {
        grid-template-columns: minmax(0, 1fr);
    }

    .seller-hero-actions .btn {
        flex: 1 1 100%;
    }
}

@media (max-width: 480px) {
    .seller-steps {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Profil d administration (menu admin) */
.admin-level-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.admin-level-note svg {
    width: 16px;
    height: 16px;
    color: var(--teal-text);
}

.badge-admin-level {
    background: var(--teal-soft);
    color: var(--teal-text);
}

/* ---------- Admin > Utilisateurs ---------- */
.users-counters {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.users-counters::-webkit-scrollbar {
    display: none;
}

.users-counters a {
    flex: 1 0 auto;
    display: grid;
    gap: 2px;
    min-width: 104px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    text-decoration: none;
}

.users-counters a strong {
    font-size: 22px;
    line-height: 1.1;
}

.users-counters a span {
    color: var(--muted);
    font-size: 13px;
    white-space: nowrap;
}

.users-counters a.is-active {
    border-color: var(--teal);
    background: var(--teal-soft);
    box-shadow: inset 0 0 0 1px var(--teal);
}

.users-panel {
    padding: 16px;
}

.users-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: start;
}

.users-search {
    position: relative;
    display: block;
}

.users-search svg {
    position: absolute;
    left: 12px;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}

.users-search .form-control {
    min-height: 44px;
    padding-left: 38px;
    font-size: 16px;
}

.users-filters .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
}

.users-filters-more {
    grid-column: 1 / -1;
    order: 3;
}

.users-filters-more summary {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: var(--teal-text);
    font-weight: 600;
    cursor: pointer;
}

.users-filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    padding-top: 6px;
}

.users-filters-grid label {
    display: grid;
    gap: 4px;
    font-size: 14px;
    font-weight: 600;
}

.users-filters-grid .form-control {
    font-size: 16px;
}

.users-result-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 14px 0 6px;
}

.users-result-head a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: var(--teal-text);
    font-weight: 600;
}

.users-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.user-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid var(--line);
}

.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--ink);
    font-weight: 800;
    font-size: 15px;
}

.user-main,
.user-tags,
.user-state {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.user-name {
    overflow-wrap: anywhere;
}

.user-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    color: var(--muted);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.user-tags {
    justify-items: start;
}

.user-role {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--surface-2);
    font-size: 13px;
    font-weight: 700;
}

.user-avatar.is-admin,
.user-role.is-admin {
    background: var(--k-e8e6fb-b);
    color: var(--k-4535a8-t);
}

.user-avatar.is-agent,
.user-role.is-agent {
    background: var(--k-e3f0fb-b);
    color: var(--k-1c5f97-t);
}

.user-avatar.is-seller,
.user-role.is-seller,
.user-avatar.is-seller_agent,
.user-role.is-seller_agent {
    background: var(--orange-soft);
    color: var(--orange-text);
}

.user-avatar.is-customer,
.user-role.is-customer {
    background: var(--teal-soft);
    color: var(--teal-text);
}

.user-shop {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--muted);
    font-size: 13px;
}

.user-shop svg {
    width: 14px;
    height: 14px;
}

.user-status {
    width: fit-content;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}

.user-status.is-active {
    background: var(--k-dcf3e8-b);
    color: var(--success);
}

.user-status.is-inactive {
    background: var(--surface-2);
    color: var(--muted);
}

.user-status.is-suspended {
    background: var(--k-fee4e2-b);
    color: var(--k-b42318-t);
}

.user-login {
    color: var(--muted);
    font-size: 12px;
}

.user-actions {
    justify-self: end;
}

.user-manage {
    position: relative;
}

.user-manage > summary {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    list-style: none;
    cursor: pointer;
}

.user-manage > summary::-webkit-details-marker {
    display: none;
}

.user-manage-body {
    position: absolute;
    right: 0;
    z-index: 20;
    display: grid;
    gap: 12px;
    width: min(340px, 86vw);
    margin-top: 6px;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}

.user-manage-body .user-action-form {
    display: grid;
    gap: 8px;
}

.user-manage-body .user-action-form + .user-action-form {
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.user-manage-body label {
    display: grid;
    gap: 4px;
    font-size: 14px;
    font-weight: 600;
}

.user-manage-body .form-control {
    font-size: 16px;
}

.user-manage-body .btn {
    min-height: 44px;
}

@media (max-width: 900px) {
    .user-row {
        grid-template-columns: 44px minmax(0, 1fr) auto;
        grid-template-areas:
            "avatar main actions"
            "avatar tags tags"
            "avatar state state";
        align-items: start;
        row-gap: 8px;
    }

    .user-avatar { grid-area: avatar; }
    .user-main { grid-area: main; }
    .user-tags { grid-area: tags; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
    .user-state { grid-area: state; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
    .user-actions { grid-area: actions; }
}

@media (max-width: 560px) {
    .users-panel {
        padding: 12px;
    }

    .users-filters {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .users-filters .btn span {
        display: none;
    }

    .users-filters .btn {
        width: 44px;
        padding: 0;
    }

    .user-row {
        grid-template-columns: 40px minmax(0, 1fr);
        grid-template-areas:
            "avatar main"
            "avatar tags"
            "avatar state"
            "actions actions";
    }

    .user-avatar {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }

    .user-actions {
        justify-self: stretch;
    }

    .user-manage > summary {
        width: 100%;
        justify-content: center;
    }

    .user-manage-body {
        position: static;
        width: auto;
        box-shadow: none;
    }
}

/* ---------- Listes d'administration (composants communs) ---------- */
.status-pill {
    display: inline-block;
    width: fit-content;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.status-pill.is-success { background: var(--k-dcf3e8-b); color: var(--success); }
.status-pill.is-warning { background: var(--orange-soft); color: var(--orange-text); }
.status-pill.is-danger { background: var(--k-fee4e2-b); color: var(--k-b42318-t); }
.status-pill.is-info { background: var(--k-e3f0fb-b); color: var(--k-1c5f97-t); }

.product-row-thumb {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid var(--line);
    background: var(--surface-2);
}

.user-main a.user-name {
    color: var(--ink);
    font-weight: 700;
}

.list-counters a.is-all strong { color: var(--ink); }

@media (max-width: 900px) {
    .product-row-thumb,
    .list-row-lead { grid-area: avatar; }
}

@media (max-width: 560px) {
    .product-row-thumb { width: 40px; height: 40px; }
}

.shop-admin-summary {
    display: flex;
    align-items: center;
    gap: 12px;
}

.shop-admin-summary img {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid var(--line);
}

.shop-admin-summary > span:first-of-type {
    display: grid;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.shop-admin-summary small {
    color: var(--muted);
    overflow-wrap: anywhere;
}

.payment-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

.user-avatar svg {
    width: 20px;
    height: 20px;
}

.user-avatar.is-failed {
    background: var(--k-fee4e2-b);
    color: var(--k-b42318-t);
}

.user-actions .btn-sm {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
}

/* ---------- Avis clients ---------- */
.stars {
    display: inline-flex;
    gap: 1px;
    line-height: 1;
    vertical-align: middle;
}

.star {
    color: var(--line-strong);
}

.star.is-on {
    color: var(--k-f5a524-t);
}

.stars.is-large {
    font-size: 22px;
}

.rating-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
}

.rating-badge .rating-count {
    color: var(--muted);
    font-weight: 500;
}

.rating-badge.is-new {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--k-e3f0fb-b);
    color: var(--k-1c5f97-t);
    font-weight: 600;
}

.shop-profile-rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 15px;
}

.shop-profile-rating a,
.pdp-shop-rating {
    color: var(--teal-text);
    font-weight: 600;
}

.pdp-shop-rating {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    text-decoration: none;
}

.shop-reviews {
    margin-top: 16px;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

.shop-reviews > h2 {
    margin: 0 0 12px;
}

.reviews-summary {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 24px;
    align-items: center;
}

.reviews-score {
    display: grid;
    justify-items: center;
    gap: 4px;
    text-align: center;
}

.reviews-score > strong {
    font-size: 40px;
    line-height: 1;
}

.reviews-bars {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
}

.reviews-bars li {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 8px;
}

.reviews-bar {
    height: 8px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
}

.reviews-bar i {
    display: block;
    height: 100%;
    background: var(--k-f5a524-b);
}

.reviews-sort,
.shops-sort {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 16px 0 4px;
}

.shops-sort {
    margin: 0;
}

.reviews-sort a,
.shops-sort a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.reviews-sort a.is-active,
.shops-sort a.is-active {
    background: var(--teal);
    border-color: var(--teal);
    color: #fff;
}

.shops-sort svg {
    width: 15px;
    height: 15px;
}

.reviews-list {
    margin: 8px 0 12px;
    padding: 0;
    list-style: none;
}

.review-item {
    display: grid;
    gap: 6px;
    padding: 14px 0;
    border-top: 1px solid var(--line);
}

.review-item.is-hidden {
    opacity: .7;
}

.review-item p {
    margin: 0;
    overflow-wrap: anywhere;
}

.review-item-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 10px;
}

.review-verified {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--k-dcf3e8-b);
    color: var(--success);
    font-size: 12px;
    font-weight: 700;
}

.review-verified svg {
    width: 13px;
    height: 13px;
}

.review-reply {
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    font-size: 14px;
}

.review-reply p {
    margin: 2px 0 0;
}

.review-report-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    min-height: 40px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted);
    font: inherit;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
}

.review-report-link svg {
    width: 14px;
    height: 14px;
}

/* Mon compte : rappel et formulaire */
.review-reminder {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: var(--radius);
    background: var(--k-fff7e6-b);
    color: var(--ink);
}

.review-reminder svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--k-f5a524-t);
}

.review-box {
    display: grid;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px dashed var(--line-strong);
}

.review-mine {
    display: grid;
    gap: 4px;
}

.review-mine p {
    margin: 0;
}

.review-form-wrap > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    list-style: none;
    cursor: pointer;
}

.review-form-wrap > summary::-webkit-details-marker {
    display: none;
}

.review-form {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

.review-form label {
    display: grid;
    gap: 4px;
    font-weight: 600;
}

.review-form .form-control {
    font-size: 16px;
}

.star-input {
    margin: 0;
    padding: 0;
    border: 0;
}

.star-input legend {
    margin-bottom: 4px;
    font-weight: 600;
}

/* Ordre inverse dans le HTML (5 -> 1) : le survol et la selection colorent aussi les etoiles de gauche. */
.star-input-row {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 2px;
}

.star-input-row input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.star-input-row label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 30px;
    font-weight: 400;
    color: var(--line-strong);
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.star-input-row label:hover,
.star-input-row label:hover ~ label,
.star-input-row input:checked ~ label {
    color: var(--k-f5a524-t);
}

.star-input-row input:focus-visible + label {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
}

/* Espace vendeur et admin */
.seller-ratings {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: 12px;
    margin-top: 16px;
}

.seller-rating-card {
    display: grid;
    gap: 4px;
}

.seller-rating-value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 24px;
    font-weight: 800;
}

.review-moderation {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.review-moderation .form-control {
    flex: 1;
    min-width: 0;
    font-size: 16px;
}

.review-moderation .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
}

@media (max-width: 560px) {
    .reviews-summary {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .shop-reviews {
        padding: 16px;
    }

    .shops-result-head {
        flex-wrap: wrap;
    }

    .review-moderation .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ---------- Notifications (cloche) ---------- */
.notif-menu {
    position: relative;
    flex-shrink: 0;
}

.notif-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    list-style: none;
    cursor: pointer;
    color: inherit;
}

.notif-toggle::-webkit-details-marker {
    display: none;
}

.notif-toggle:hover,
.notif-menu[open] .notif-toggle {
    background: rgba(255, 255, 255, .14);
}

.app-header .notif-toggle:hover,
.app-header .notif-menu[open] .notif-toggle {
    background: var(--surface-2);
}

.notif-toggle svg {
    width: 24px;
    height: 24px;
}

.notif-count {
    position: absolute;
    top: 4px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--orange);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
}

.notif-count[hidden] {
    display: none;
}

.notif-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 60;
    width: min(360px, calc(100vw - 24px));
    max-height: min(70vh, 520px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    text-align: left;
}

.notif-panel-head {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.notif-panel-head form {
    margin: 0;
}

.notif-read-all {
    min-height: 36px;
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--teal-text);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.notif-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.notif-item a {
    display: flex;
    gap: 10px;
    padding: 10px 14px;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--line);
}

.notif-item a:hover {
    background: var(--surface-2);
}

.notif-item.is-unread a {
    background: var(--teal-soft);
}

.notif-item.is-unread a:hover {
    background: var(--k-d4ede9-b);
}

.notif-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--teal-text);
}

.notif-item.is-unread .notif-icon {
    background: var(--surface);
}

.notif-icon svg {
    width: 18px;
    height: 18px;
}

.notif-text {
    display: grid;
    gap: 2px;
    min-width: 0;
    font-size: 14px;
}

.notif-text strong {
    font-size: 14px;
    overflow-wrap: anywhere;
}

.notif-text span {
    color: var(--muted);
    overflow-wrap: anywhere;
}

.notif-text small {
    color: var(--muted);
    font-size: 12px;
}

.notif-empty {
    margin: 0;
    padding: 18px 14px;
    color: var(--muted);
    text-align: center;
}

.notif-empty[hidden] {
    display: none;
}

.notif-all {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    color: var(--teal-text);
    font-weight: 600;
}

.notif-page {
    max-width: 820px;
}

.notif-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.notif-page-head .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
}

.notif-list.is-page .notif-item:last-child a {
    border-bottom: 0;
}

/* Tableau de bord vendeur : a faire */
.seller-todo {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0;
}

.seller-todo-item {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 10px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    text-decoration: none;
}

.seller-todo-item svg {
    grid-row: span 2;
    width: 24px;
    height: 24px;
    color: var(--muted);
}

.seller-todo-item strong {
    font-size: 22px;
    line-height: 1.1;
}

.seller-todo-item span {
    color: var(--muted);
    font-size: 13px;
}

.seller-todo-item.is-active {
    border-color: var(--orange);
    background: var(--orange-soft);
}

.seller-todo-item.is-active svg {
    color: var(--orange-text);
}

@media (max-width: 560px) {
    .seller-todo {
        grid-template-columns: minmax(0, 1fr);
    }

    .notif-panel {
        position: fixed;
        top: 64px;
        right: 12px;
        left: 12px;
        width: auto;
    }
}

/* En-tete des espaces prives sur petit ecran : logo seul (place pour la cloche) */
@media (max-width: 400px) {
    .app-header .brand > span:not(.brand-mark) {
        display: none;
    }
}

/* Parametres > E-mails : encadre de test */
.mail-test-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.mail-test-form label {
    display: grid;
    gap: 4px;
    font-weight: 600;
}

.mail-test-form .form-control {
    font-size: 16px;
}

.mail-test-form .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
}

.mail-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0 6px;
    padding: 0;
    list-style: none;
}

.mail-stats li {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.mail-stats strong {
    font-size: 20px;
}

.mail-stats span {
    color: var(--muted);
    font-size: 13px;
}

.mail-test code {
    overflow-wrap: anywhere;
}

@media (max-width: 560px) {
    .mail-test-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .mail-stats {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Photos de profil ---------- */
.user-avatar {
    flex-shrink: 0;
    overflow: hidden;
}

.user-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-avatar.has-photo {
    background: var(--surface);
    border: 1px solid var(--line);
}

/* En-tete : pastille compacte (separee du style de la liste Utilisateurs) */
.user-chip .user-avatar {
    width: 36px;
    height: 36px;
    background: var(--teal);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.user-chip .user-avatar.has-photo {
    background: var(--surface);
}

.user-avatar.is-sm {
    width: 28px;
    height: 28px;
    font-size: 11px;
}

.user-avatar.is-lg {
    width: 56px;
    height: 56px;
    font-size: 20px;
}

.user-avatar.is-xl {
    width: 112px;
    height: 112px;
    font-size: 36px;
    background: var(--teal-soft);
    color: var(--teal-text);
}

.dashboard-welcome {
    align-items: center;
}

.dashboard-welcome > .user-avatar {
    background: var(--teal-soft);
    color: var(--teal-text);
}

.avatar-reminder {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    margin-top: 4px;
    color: var(--orange-text);
    font-weight: 600;
}

.avatar-reminder svg {
    width: 16px;
    height: 16px;
}

.avatar-panel {
    display: flex;
    align-items: center;
    gap: 20px;
}

.avatar-panel-body {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.avatar-panel-body h2,
.avatar-panel-body p {
    margin: 0;
}

.avatar-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.avatar-form .btn,
.avatar-pick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    cursor: pointer;
}

.avatar-pick:focus-within {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
}

.btn-link {
    min-height: 40px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted);
    font: inherit;
    font-size: 14px;
    text-decoration: underline;
    cursor: pointer;
}

.avatar-remove {
    margin: 0;
}

.chat-message.is-theirs {
    align-items: flex-end;
    gap: 6px;
}

.chat-avatar {
    margin-bottom: 2px;
}

@media (max-width: 560px) {
    .avatar-panel {
        flex-direction: column;
        text-align: center;
    }

    .avatar-form {
        justify-content: center;
    }

    .avatar-form .btn,
    .avatar-pick {
        flex: 1 1 100%;
    }
}

/* ---------- Vente en gros : mode de vente ---------- */
.sale-mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--k-ede9fe-b);
    color: var(--k-5b3fb8-t);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
    vertical-align: middle;
}

.sale-mode-badge.is-gros {
    background: var(--k-5b3fb8-b);
    color: #fff;
}

.sale-mode-badge svg {
    width: 13px;
    height: 13px;
}

.shop-profile-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.shops-chips a.is-wholesale {
    gap: 6px;
    border-color: var(--k-5b3fb8-l);
    color: var(--k-5b3fb8-t);
}

.shops-chips a.is-wholesale.is-active {
    background: var(--k-5b3fb8-b);
    border-color: var(--k-5b3fb8-l);
    color: #fff;
}

.shops-chips a.is-wholesale svg {
    width: 16px;
    height: 16px;
}

.sale-mode-choice {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

.sale-mode-choice legend {
    margin-bottom: 6px;
    font-weight: 600;
}

.sale-mode-choice .report-reason span {
    display: grid;
    gap: 2px;
}

.sale-mode-choice small {
    color: var(--muted);
    font-size: 13px;
    font-weight: 400;
}

@media (max-width: 760px) {
    .sale-mode-choice {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Vente en gros : formulaire produit et panier ---------- */
.wholesale-fields {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 14px;
    border: 1px solid var(--k-d9d0f7-l);
    border-radius: var(--radius);
    background: var(--k-faf8ff-b);
}

.wholesale-fields legend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 6px;
    font-weight: 700;
    color: var(--k-5b3fb8-t);
}

.wholesale-fields legend svg {
    width: 18px;
    height: 18px;
}

.wholesale-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 10px;
}

.wholesale-fields label {
    display: grid;
    gap: 4px;
    font-weight: 600;
}

.wholesale-fields .form-control {
    font-size: 16px;
}

.wholesale-fields p {
    margin: 0;
}

.wholesale-tiers {
    display: grid;
    gap: 8px;
}

.wholesale-tier {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    align-items: end;
}

.wholesale-tier-label {
    padding-bottom: 12px;
    color: var(--k-5b3fb8-t);
    font-weight: 700;
    font-size: 14px;
}

.cart-qty {
    width: 76px;
    min-height: 40px;
    padding: 6px 8px;
    font-size: 16px;
    text-align: center;
}

.cart-line-note {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.cart-wholesale {
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--k-ede9fe-b);
    color: var(--k-5b3fb8-t);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
}

@media (max-width: 560px) {
    .wholesale-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .wholesale-tier {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .wholesale-tier-label {
        grid-column: 1 / -1;
        padding: 0;
    }
}

/* ---------- Vente en gros : affichage acheteur ---------- */
.price-unit {
    margin-left: 2px;
    color: var(--muted);
    font-size: .55em;
    font-weight: 600;
    line-height: 1.3;
    display: inline-block;
}

.tier-table {
    margin: 12px 0;
    padding: 12px 14px;
    border: 1px solid var(--k-d9d0f7-l);
    border-radius: var(--radius);
    background: var(--k-faf8ff-b);
}

.tier-table-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    color: var(--k-5b3fb8-t);
    font-weight: 700;
}

.tier-table-title svg {
    width: 18px;
    height: 18px;
}

.tier-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.tier-table th,
.tier-table td {
    padding: 8px 4px;
    border-top: 1px solid var(--k-ebe5fb-l);
    text-align: left;
}

.tier-table th {
    border-top: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.tier-saving {
    margin-left: 4px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--k-dcf3e8-b);
    color: var(--success);
    font-size: 12px;
    font-weight: 700;
}

.buybox-wholesale,
.buybox-min {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 14px;
}

.buybox-wholesale {
    color: var(--k-5b3fb8-t);
    font-weight: 700;
}

.buybox-wholesale svg {
    width: 16px;
    height: 16px;
}

.buybox-min {
    color: var(--muted);
}

.order-estimate {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--k-faf8ff-b);
    font-size: 15px;
}

.order-estimate:empty {
    display: none;
}

.order-estimate small {
    color: var(--k-5b3fb8-t);
    font-weight: 600;
}

.order-estimate-saving,
.cart-savings,
.order-savings {
    color: var(--success);
    font-weight: 700;
}

.cart-savings {
    margin: 8px 0 0;
    text-align: right;
}

.product-wholesale {
    display: block;
    line-height: 1.35;
    color: var(--k-5b3fb8-t);
    font-size: 12px;
    font-weight: 700;
}

.product-wholesale svg {
    width: 14px;
    height: 14px;
    margin-right: 4px;
    vertical-align: -2px;
}

.product-wholesale small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.order-item-note {
    display: block;
    color: var(--k-5b3fb8-t);
    font-size: 12px;
    font-weight: 600;
}

/* Avis en attente + anciennete de la boutique */
.rating-badge.is-pending {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--k-eef1f4-b);
    color: var(--muted);
    font-weight: 600;
}

.seniority-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.seniority-badge svg {
    width: 14px;
    height: 14px;
}

.seniority-badge.is-new {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--k-e3f0fb-b);
    color: var(--k-1c5f97-t);
}

.store-card-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

.pdp-info .seniority-badge {
    margin-left: 6px;
}

/* ================= MODE SOMBRE =================
 * Active par <html data-theme="dark"> (bouton lune/soleil de l en-tete, voir config/theme.php).
 * Regle : jamais de couleur en dur dans une nouvelle regle ; utiliser les variables (texte : --ink, --muted, --teal-text ;
 * fonds : --surface, --surface-2, --bg ; bordures : --line).
 */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0d1a19;
    --surface: #152625;
    --surface-2: #1b2f2e;
    --ink: #e4eeec;
    --muted: #a3b6b3;
    --line: #28403e;
    --line-strong: #37524f;
    --teal-soft: #143c39;
    --orange-soft: #3b2615;
    --success: #4cc99a;
    --teal-text: #5fd4c6;
    --teal-dark-text: #7fe0d3;
    --teal-deep-text: #d5efeb;
    --orange-text: #ff9a52;
    --glass-rgb: 21 38 37;
    --mint-rgb: 23 62 58;
    --mint-2-rgb: 21 38 37;
    --sage-rgb: 31 60 57;
    --cream-bg: var(--bg);
    --mint-glass: rgba(21, 38, 37, .94);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow: 0 8px 24px rgba(0, 0, 0, .45);
    --shadow-lg: 0 18px 40px rgba(0, 0, 0, .55);
    --k-16a34a-t: #4ade80;
    --k-17803f-b: #17803f;
    --k-17803f-l: #2f9e5c;
    --k-1c5f97-t: #8cc4f5;
    --k-1f6fbf-t: #8cc4f5;
    --k-1f9d55-b: #1f9d55;
    --k-1f9d55-l: #2fb36b;
    --k-34474a-t: #c3d2cf;
    --k-3b97f0-l: #4a9ef0;
    --k-3b97f0-t: #7cb8f7;
    --k-4535a8-t: #c4b5fd;
    --k-5b3fb8-b: #5b3fb8;
    --k-5b3fb8-l: #8b74e6;
    --k-5b3fb8-t: #b9a6ff;
    --k-8a9a98-t: #93a6a3;
    --k-b42318-t: #ff8a80;
    --k-bfe3d4-l: #2c5a47;
    --k-c0392b-b: #c0392b;
    --k-c0392b-l: #e0675c;
    --k-c0392b-t: #ff8a80;
    --k-d4ede9-b: #17403c;
    --k-d92d20-l: #f0675c;
    --k-d9d0f7-l: #4a3f80;
    --k-dcf3e8-b: #133a2a;
    --k-e3f0fb-b: #142f47;
    --k-e8e6fb-b: #2a2450;
    --k-eaf3fe-b: #142f47;
    --k-eaf7f1-b: #133a2a;
    --k-ebe5fb-l: #3a3266;
    --k-ede9fe-b: #2a2450;
    --k-eef1f4-b: #22302f;
    --k-f1b9b2-l: #6b2f2a;
    --k-f5a524-b: #f5a524;
    --k-f5a524-t: #f5b84a;
    --k-f6d3b8-l: #6b4526;
    --k-faf8ff-b: #1f1b33;
    --k-fbfcfc-b: #182a29;
    --k-fdecea-b: #3d1d1b;
    --k-fee4e2-b: #3d1d1b;
    --k-ff8a33-b: #ff8a33;
    --k-ffb27a-t: #ffb27a;
    --k-fff7e6-b: #3a2c12;
}

/* Bouton lune / soleil (en-tete public et espaces prives) : meme gabarit que la cloche. */
.theme-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, .14);
}

.app-header .theme-toggle:hover {
    background: var(--surface-2);
}

.theme-toggle:focus-visible {
    outline: 3px solid var(--orange);
    outline-offset: 2px;
}

.theme-toggle svg {
    width: 22px;
    height: 22px;
}

.theme-icon {
    display: inline-flex;
}

.theme-icon-sun,
:root[data-theme="dark"] .theme-icon-moon {
    display: none;
}

:root[data-theme="dark"] .theme-icon-sun {
    display: inline-flex;
}

/* Mode sombre : barres de graphique plus claires pour rester visibles sur fond sombre. */
:root[data-theme="dark"] .stats-bar span {
    background: #2fa79b;
}

/* ================= Frais de livraison par commune (config/delivery.php) ================= */
button.deliver-chip {
    padding: 4px 6px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

button.deliver-chip:hover,
button.deliver-chip:focus-visible {
    background: rgba(255, 255, 255, .12);
}

.delivery-line {
    display: block;
    margin: 0;
    line-height: 1.4;
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
}

.delivery-line svg {
    width: 18px;
    height: 18px;
    margin-right: 6px;
    vertical-align: -3px;
    color: var(--teal-text);
}

/* Le bouton "Tarifs de livraison" prend toute la largeur sous les autres actions. */
.shop-profile-actions .shop-delivery-btn {
    grid-column: 1 / -1;
}

.delivery-line.is-no,
.delivery-line.is-pickup {
    color: var(--muted);
}

.delivery-line.is-free span {
    color: var(--success);
}

.delivery-line-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: var(--teal-text);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

.buybox-delivery {
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    background: var(--teal-soft);
}

.shop-profile-delivery {
    margin-top: 6px;
}

.delivery-free {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 0;
    color: var(--success);
    font-size: 14px;
    font-weight: 700;
}

.delivery-free svg {
    width: 16px;
    height: 16px;
}

.store-card-delivery {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
}

.store-card-delivery svg {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    color: var(--teal-text);
}

.store-card-delivery.is-no,
.store-card-delivery.is-pickup {
    color: var(--muted);
}

/* Fenetre des tarifs */
.delivery-dialog-shop {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    color: var(--ink);
    font-weight: 700;
}

.delivery-dialog-shop svg {
    width: 18px;
    height: 18px;
    color: var(--teal-text);
}

.delivery-dialog-note,
.delivery-dialog-foot {
    color: var(--muted);
    font-size: 14px;
}

.commune-picker {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin: 0 0 12px;
}

.commune-picker label {
    display: grid;
    flex: 1 1 auto;
    gap: 4px;
    min-width: 0;
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
}

.commune-picker select {
    font-size: 16px;
}

.commune-picker .btn {
    min-height: 44px;
}

.delivery-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.delivery-table th,
.delivery-table td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    text-align: left;
}

.delivery-table td {
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

.delivery-table thead th {
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.delivery-table thead th:last-child {
    text-align: right;
}

.delivery-table th[scope="row"] {
    font-weight: 500;
}

.delivery-table tr.is-mine th,
.delivery-table tr.is-mine td {
    background: var(--teal-soft);
    font-weight: 800;
}

.delivery-table tr.is-mine small {
    color: var(--teal-text);
    font-weight: 700;
}

.delivery-table tr.is-no td,
.delivery-table tr.is-no th {
    color: var(--muted);
}

.delivery-table.is-compact {
    font-size: 14px;
}

.delivery-table.is-compact th,
.delivery-table.is-compact td {
    padding: 6px 8px;
}

/* Formulaire du vendeur */
.delivery-form {
    display: grid;
    gap: 16px;
}

.delivery-base {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 8px 12px;
}

.delivery-base label,
.delivery-free-setting label {
    display: grid;
    gap: 4px;
    color: var(--ink);
    font-weight: 600;
}

.delivery-base .field-help {
    grid-column: 1 / -1;
}

.delivery-rows {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
    gap: 8px;
}

.delivery-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 6px 8px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.delivery-row strong {
    grid-column: 1 / -1;
    color: var(--ink);
}

.delivery-row .form-control,
.delivery-base .form-control,
.delivery-free-setting .form-control {
    min-height: 44px;
    font-size: 16px;
}

.delivery-fee-input {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.delivery-fee-input input:disabled {
    opacity: .5;
}

.delivery-free-setting {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 8px 12px;
}

@media (max-width: 480px) {
    .delivery-base {
        grid-template-columns: 1fr;
    }
}

/* Admin > Boutiques : lecture seule */
.admin-delivery {
    margin: 12px 0;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.admin-delivery summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    color: var(--ink);
    font-weight: 700;
    cursor: pointer;
}

.admin-delivery summary svg {
    width: 18px;
    height: 18px;
    color: var(--teal-text);
}

.admin-delivery-title {
    margin: 12px 0 6px;
    color: var(--ink);
    font-size: 15px;
}

.admin-delivery-log {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.admin-delivery-log li {
    display: grid;
    gap: 2px;
    color: var(--muted);
    font-size: 13px;
}

.admin-delivery-log strong {
    color: var(--ink);
}

.admin-delivery-log span {
    color: var(--ink);
    overflow-wrap: anywhere;
}

/* Panier : frais de livraison par boutique (apercu calcule par le serveur) */
.cart-delivery {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.cart-delivery-title {
    margin: 0 0 8px;
    color: var(--ink);
    font-size: 16px;
}

.cart-delivery-lines {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cart-delivery-line {
    display: grid;
    gap: 2px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-size: 14px;
}

.cart-delivery-line strong {
    font-size: 15px;
}

.cart-delivery-line em {
    color: var(--muted);
    font-style: normal;
    font-weight: 600;
}

.cart-delivery-line.is-free span,
.cart-delivery-line.is-offered span {
    color: var(--success);
    font-weight: 700;
}

.cart-delivery-line.is-blocking span,
.cart-delivery-error {
    color: var(--k-c0392b-t);
    font-weight: 700;
}

.cart-delivery-total {
    margin: 10px 0 0;
    color: var(--ink);
    font-size: 16px;
    font-weight: 800;
}

.cart-delivery-separate {
    margin: 6px 0 0;
    color: var(--orange-text);
    font-size: 14px;
    font-weight: 700;
}

.cart-delivery-error {
    margin: 10px 0 0;
    font-size: 14px;
}

/* Commandes : ligne de livraison sous le total */
.order-delivery-note {
    display: block;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.order-delivery-note svg {
    width: 15px;
    height: 15px;
    margin-right: 4px;
    vertical-align: -3px;
    color: var(--teal-text);
}

/* ===== Application installable : bandeau d installation, bandeau hors connexion, aide ===== */
.footer-install {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    background: transparent;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.footer-install[hidden],
.app-install-banner[hidden],
.app-offline-banner[hidden] {
    display: none;
}

.footer-install svg {
    width: 18px;
    height: 18px;
}

.app-install-banner {
    position: fixed;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    left: 10px;
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 560px;
    margin: 0 auto;
    padding: 10px 6px 10px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-lg);
}

.app-install-banner img {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #ffffff;
}

.app-install-text {
    display: grid;
    flex: 1;
    min-width: 0;
    gap: 2px;
    font-size: 14px;
    line-height: 1.3;
}

.app-install-text span {
    color: var(--muted);
    font-size: 13px;
}

.app-install-text b {
    font-weight: inherit;
}

.app-install-banner .btn {
    flex-shrink: 0;
    min-height: 44px;
    padding: 0 14px;
}

.app-install-close {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 44px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--muted);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.app-install-close:hover,
.app-install-close:focus-visible {
    background: var(--surface-2);
    color: var(--ink);
}

body.has-install-banner {
    padding-bottom: 92px;
}

.app-offline-banner {
    position: relative;
    z-index: 95;
    padding: 9px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--orange-soft);
    color: var(--orange-text);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

.app-install-help h2 {
    margin: 0 0 10px;
    font-size: 20px;
}

.app-install-help ol {
    display: grid;
    gap: 8px;
    margin: 0 0 16px;
    padding-left: 22px;
    line-height: 1.45;
}

.app-install-help .btn {
    width: 100%;
    min-height: 48px;
}

@media (max-width: 360px) {
    .app-install-text span {
        display: none;
    }
}

/* Conditions d'utilisation et confidentialite : le texte occupe toute la largeur de la page (plus de vide a droite). */
.legal-content {
    max-width: none;
}

/* Fiche produit : fenetres "Commander ce produit" et "Contacter le vendeur" (ouvertes au clic seulement). */
.kin-dialog-wide {
    width: min(720px, calc(100vw - 24px));
}

.buybox-chat {
    display: grid;
    margin: 0;
}

/* Pied de page : "Connexion" et "Installer l'application" groupes a droite, petits et discrets. */
.footer-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.footer-actions .footer-login {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}

.footer-actions .footer-login svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .footer-actions {
        margin-left: 0;
    }

    .footer-actions .footer-login {
        min-height: 40px;
    }
}

@media (max-width: 360px) {
    .footer-actions {
        gap: 6px;
    }

    .footer-actions .footer-login {
        padding: 5px 10px;
        font-size: 12.5px;
    }
}


/* Journal connexions : choix du jour (fleches, calendrier, Aujourd’hui). */
.log-day-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 8px 0 4px;
}

.log-day-picker .log-day-step {
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    font-size: 22px;
    line-height: 1;
}

.log-day-field {
    flex: 1 1 140px;
    min-width: 0;
    max-width: 220px;
    margin: 0;
}

.log-day-field .form-control {
    min-height: 44px;
    font-size: 16px;
}

.log-day-title {
    margin: 8px 0 12px;
    color: var(--ink);
    font-size: 20px;
}

/* ===== Admin > Abonnements : plans en cartes, lignes compactes avec barre de temps ===== */
.subs-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.subs-head h1 {
    margin-bottom: 4px;
}

.subs-head .btn {
    min-height: 44px;
}

.subs-plans {
    display: grid;
    grid-auto-columns: minmax(200px, 1fr);
    grid-auto-flow: column;
    gap: 12px;
    margin: 16px 0;
    padding-bottom: 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

.subs-plan {
    display: grid;
    gap: 6px;
    align-content: start;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--ink);
    text-decoration: none;
    scroll-snap-align: start;
    transition: border-color .15s ease, transform .15s ease;
}

.subs-plan:hover,
.subs-plan:focus-visible {
    border-color: var(--teal-text);
    transform: translateY(-2px);
}

.subs-plan.is-active {
    border-color: var(--teal-text);
    box-shadow: inset 0 0 0 1px var(--teal-text);
}

.subs-plan.is-off {
    opacity: .6;
}

.subs-plan-name {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.subs-plan-price {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.1;
}

.subs-plan-price small {
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.subs-plan-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    color: var(--muted);
    font-size: 13px;
}

.subs-plan-meta span + span::before {
    content: "·";
    margin-right: 6px;
}

.subs-plan-count {
    margin-top: 4px;
    color: var(--teal-text);
    font-size: 13px;
}

.subs-plan-count strong {
    font-size: 16px;
}

.subs-plan-new {
    place-content: center;
    justify-items: center;
    min-height: 120px;
    border-style: dashed;
    color: var(--teal-text);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.subs-plan-new svg {
    width: 26px;
    height: 26px;
}

.subs-list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.subs-row {
    display: grid;
    grid-template-columns: minmax(180px, 1.4fr) minmax(130px, .9fr) minmax(170px, 1.2fr) minmax(120px, .8fr) auto;
    align-items: center;
    gap: 14px;
    padding: 14px 4px;
    border-top: 1px solid var(--line);
}

.subs-who {
    display: grid;
    min-width: 0;
}

.subs-who strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.subs-who span {
    overflow: hidden;
    color: var(--muted);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.subs-plan-cell {
    display: grid;
    gap: 2px;
    justify-items: start;
}

.subs-chip {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--teal-soft);
    color: var(--teal-text);
    font-size: 13px;
    font-weight: 700;
}

.subs-time {
    display: grid;
    gap: 6px;
}

.subs-bar {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-2);
    box-shadow: inset 0 0 0 1px var(--line);
}

.subs-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--success);
}

.subs-row.is-warning .subs-bar span {
    background: var(--orange);
}

.subs-row.is-danger .subs-bar span {
    background: var(--k-b42318-t);
}

.subs-row.is-muted .subs-bar span {
    background: var(--muted);
}

.subs-dates {
    color: var(--muted);
    font-size: 12.5px;
}

.subs-state {
    display: grid;
    gap: 4px;
    justify-items: start;
}

.subs-left {
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
}

.subs-row.is-danger .subs-left {
    color: var(--k-b42318-t);
}

.subs-row.is-warning .subs-left {
    color: var(--orange-text);
}

.subs-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.subs-actions .btn {
    gap: 6px;
    min-height: 40px;
}

.subs-actions svg {
    width: 16px;
    height: 16px;
}

.subs-dialog-for {
    margin: 0;
    color: var(--muted);
}

.subs-dialog-for strong {
    color: var(--ink);
}

.subs-days,
.subs-plan-pick {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

.subs-days legend,
.subs-plan-pick legend {
    margin-bottom: 6px;
    font-weight: 700;
}

.subs-days label,
.subs-plan-pick label {
    position: relative;
    cursor: pointer;
}

.subs-days input,
.subs-plan-pick input {
    position: absolute;
    opacity: 0;
}

.subs-days span {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    font-weight: 700;
}

.subs-plan-pick {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.subs-plan-pick span {
    display: grid;
    gap: 2px;
    min-height: 56px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
}

.subs-plan-pick small {
    color: var(--muted);
}

.subs-days input:checked + span,
.subs-plan-pick input:checked + span {
    border-color: var(--teal-text);
    background: var(--teal-soft);
    color: var(--teal-text);
}

.subs-days input:focus-visible + span,
.subs-plan-pick input:focus-visible + span {
    outline: 2px solid var(--teal-text);
    outline-offset: 2px;
}

.subs-check {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
}

@media (max-width: 960px) {
    .subs-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px 12px;
    }

    .subs-plan-cell {
        justify-items: end;
    }

    .subs-time {
        grid-column: 1 / -1;
    }

    .subs-actions {
        grid-column: 1 / -1;
        justify-content: stretch;
    }

    .subs-actions .btn {
        flex: 1 1 0;
        justify-content: center;
    }

    .subs-state {
        grid-column: 1 / -1;
        grid-template-columns: auto 1fr;
        align-items: center;
    }
}

@media (max-width: 480px) {
    .subs-plans {
        grid-auto-columns: 78%;
    }

    .subs-plan-pick {
        grid-template-columns: minmax(0, 1fr);
    }

    .subs-head .btn {
        width: 100%;
        justify-content: center;
    }
}

.subs-plan-pick label {
    display: block;
    width: 100%;
}

.subs-plan-pick label > span {
    display: grid;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

/* ===== Espaces prives : icones du menu et pied de page ===== */
.admin-nav a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.admin-nav a svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    opacity: .8;
}

.admin-nav a.is-active svg,
.admin-nav a:hover svg {
    opacity: 1;
}

@media (min-width: 1041px) {
    .internal-body .admin-nav a {
        gap: 12px;
    }

    .internal-body .admin-nav a svg {
        width: 19px;
        height: 19px;
    }

    .internal-body .admin-nav a.is-active svg {
        color: var(--teal-text);
    }
}

/* Pied de page des espaces prives : une seule ligne fine, toujours tout en bas de l ecran. */
.internal-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.internal-body > main {
    flex: 1 0 auto;
}

.internal-footer {
    margin-top: 24px;
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
}

.internal-footer .internal-footer-line {
    display: block;
    margin: 0 auto;
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    text-align: right;
}