/* ==========================================================
   Application mobile : barre d'onglets, cartes, panneaux, zones sûres
   (≤ 960 px : tablette et téléphone · ≤ 640 px : téléphone)
   ========================================================== */
.tabbar, .m-brand, .m-title, .m-only { display: none; }
html { -webkit-tap-highlight-color: transparent; }

@media (max-width: 960px) {
  /* ---------- Barre du haut compacte ---------- */
  .topbar { padding: 0 10px 0 12px; padding-top: env(safe-area-inset-top); height: calc(60px + env(safe-area-inset-top)); gap: 4px; }
  .menu-toggle { display: none !important; }
  .m-brand { display: inline-flex; flex-shrink: 0; }
  .m-brand .brand-logo { width: 34px; height: 34px; border-radius: 10px; }
  .m-title { display: block; font: 800 17px var(--display, 'Plus Jakarta Sans'); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; margin-left: 6px; flex: 0 1 auto; }
  .topbar-spacer { flex: 1 1 0; min-width: 4px; }
  .topbar .user-chip > .icn { display: none; }
  .topbar .user-chip { padding: 2px; }

  /* ---------- Barre d'onglets ---------- */
  .tabbar {
    /* Barre collée au bas de l'écran, sur toute la largeur (zone sûre de l'iPhone incluse) */
    display: flex; position: fixed; z-index: 45; left: 0; right: 0; bottom: 0;
    height: calc(64px + env(safe-area-inset-bottom)); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); gap: 4px; border-radius: 0;
    background: rgba(4, 38, 52, .97); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
    box-shadow: 0 -10px 30px -16px rgba(4, 16, 22, .5), inset 0 1px 0 rgba(255,255,255,.07);
  }
  .tabbar > a, .tabbar > button { padding: 0 2px;
    flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border: 0; background: transparent; border-radius: 14px; color: #9DB1B8; font: 700 10px 'Plus Jakarta Sans', sans-serif; letter-spacing: -.01em; cursor: pointer;
    transition: background .25s, color .25s;
  }
  .tabbar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .tabbar .icn { font-size: 23px; }
  .tabbar .on { background: rgba(91, 192, 194, .16); color: #fff; }
  .tabbar .on .icn { color: #5BC0C2; animation: ic-pop .45s var(--spring, ease); }
  .tabbar .on i.icn.ph-duotone::before { color: #5BC0C2; opacity: .55; }
  .tabbar > :active { transform: scale(.94); }
  .tb-badge { position: absolute; top: 5px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; display: grid; place-items: center;
    background: #F2A33A; color: #3a2300; font-size: 10px; font-weight: 800; box-shadow: 0 0 0 2px rgba(4, 38, 52, 1); }

  /* Espace pour ne pas cacher le contenu derrière la barre d'onglets */
  .content { padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important; }
  .toasts { bottom: calc(76px + env(safe-area-inset-bottom)); right: 12px; left: 12px; align-items: stretch; }
  .toast { max-width: none; }

  /* Menu complet (« Plus ») : tiroir avec zones sûres */
  .sidebar { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); width: min(300px, 86vw); border-radius: 0 24px 24px 0; }
  .app.nav-open .overlay-mobile { backdrop-filter: blur(3px); }
  /* Menu ouvert : il passe au-dessus de la barre du bas (le profil connecté reste visible) */
  .app.nav-open .sidebar { z-index: 60; }
  .app.nav-open .overlay-mobile { z-index: 55; }
}

@media (max-width: 640px) {
  body { font-size: 14px; }
  .m-only { display: inline-grid; }
  .content { padding: 16px 14px; }

  /* Recherche : s'ouvre sous la barre du haut */
  .topbar .search { display: none; }
  .topbar.search-open .search { display: flex; position: absolute; left: 10px; right: 10px; top: calc(100% + 8px); max-width: none; z-index: 41; animation: m-drop .25s cubic-bezier(.22,1,.36,1); }
  .topbar.search-open .search .input { height: 48px; background: var(--surface); box-shadow: 0 16px 36px -14px rgba(3,26,36,.45); border-color: var(--primary); }
  .topbar.search-open .search::after { display: none; }
  @keyframes m-drop { from { opacity: 0; transform: translateY(-8px); } }

  /* Textes et champs : pas de zoom automatique sur iPhone */
  .input, .select, .textarea, .m-select-btn, .qty input { font-size: 16px !important; }
  .btn-xs { min-height: 34px; padding: 0 12px; }
  h1, .mod h1 { font-size: 24px; }
  .page-head { margin-bottom: 16px; gap: 10px; }
  .page-head > .row, .page-head > div:last-child:not(:first-child) { flex-wrap: wrap; }

  /* Filtres : défilement horizontal */
  .filters { gap: 10px; }
  .filters .search { width: 100% !important; max-width: none !important; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 2px 14px 4px; scroll-snap-type: x proximity; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex-shrink: 0; scroll-snap-align: start; }
  /* Onglets dans l'en-tête d'une carte : pas de débordement sur les côtés */
  .card-head .tabs { margin: 0; padding: 0; }
  .card-head { flex-wrap: wrap; gap: 8px; }
  .grid > * { min-width: 0; }

  /* Indicateurs : 2 par ligne */
  .grid:has(> .stat) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  .stat { padding: 14px; }
  .stat .label { font-size: 11.5px; gap: 6px; }
  .stat .ic { width: 30px; height: 30px; border-radius: 9px; }
  .stat .ic .icn { font-size: 16px; }
  .stat .value, .mod .stat .value { font-size: 19px; margin-top: 6px; }

  /* Accueil */
  .hero, .mod .hero { min-height: 200px; padding: 22px; }
  .hero h2, .mod .hero h2 { font-size: 23px; }
  .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px; }
  .cat-tile { min-height: 96px; padding: 12px 4px; font-size: 11.5px; gap: 7px; }
  .cat-tile .ci { width: 42px; height: 42px; border-radius: 13px; }
  .cat-tile .ci .icn { font-size: 22px; }

  /* Catalogue : 2 produits par ligne */
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .p-img, .mod .p-img { height: 112px; margin: 6px 6px 0; }
  .p-body { padding: 10px 10px 12px; }
  .p-title { font-size: 13px; }
  .p-sub, .p-merchant { font-size: 11px; }
  .p-price, .mod .p-price { font-size: 15px; }
  .p-actions .btn { font-size: 12px; padding: 0 8px; height: 36px; }
  .pd .price, .mod .pd .price { font-size: 26px; }
  .pd h1 { font-size: 21px; }

  /* Étapes compactes : seul le libellé de l'étape en cours reste visible */
  .stepper { gap: 6px; flex-wrap: nowrap; }
  .step:not(.on) { font-size: 0; gap: 0; }
  .step .n { font-size: 12px; width: 28px; height: 28px; flex-shrink: 0; }
  .step-line { min-width: 10px; }

  /* Tableaux → cartes (étiquettes ajoutées par moderne.js) */
  .table-wrap { overflow: visible; }
  table.table thead { display: none; }
  table.table, table.table tbody { display: block; }
  table.table tr { display: block; position: relative; padding: 14px 16px; border-bottom: 1px solid var(--border); }
  table.table tr:last-child { border-bottom: 0; }
  table.table td { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 3px 0 !important; border: 0 !important; text-align: right !important; font-size: 13px; min-width: 0; box-shadow: none !important; }
  table.table td[data-label]::before { content: attr(data-label); color: var(--muted); font-weight: 600; font-size: 12px; text-align: left; flex-shrink: 0; }
  table.table td[data-label=""]::before { display: none; }
  table.table td:first-child { justify-content: flex-start; text-align: left !important; font-weight: 800; font-size: 14.5px; padding-bottom: 6px !important; }
  table.table td:first-child::before { display: none; }
  table.table td:last-child[data-label=""] { justify-content: flex-end; padding-top: 8px !important; }
  table.table td:empty { display: none; }
  table.table td .row { justify-content: flex-end; }
  table.table td:first-child .row { justify-content: flex-start; }
  table.table:not(:has(thead)) tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
  table.table:not(:has(thead)) td { display: block; width: auto; text-align: left !important; }
  .table th { position: static !important; }

  /* Fenêtres → panneaux qui montent du bas */
  .modal-back { place-items: end stretch; padding: 0; }
  .modal, .mod .modal { max-width: none !important; width: 100%; border-radius: 24px 24px 0 0 !important; max-height: 92vh; padding-bottom: env(safe-area-inset-bottom); animation: m-sheet .35s cubic-bezier(.22,1,.36,1) !important; }
  .modal::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--border-2); margin: 10px auto 0; flex-shrink: 0; }
  .modal-head { padding: 12px 18px 14px; }
  .modal-body { padding: 18px; }
  .modal-foot { padding: 12px 18px 16px; flex-wrap: wrap; }
  .modal-foot .btn { flex: 1 1 auto; }
  @keyframes m-sheet { from { transform: translateY(100%); } }

  /* Menus déroulants (notifications, profil) en pleine largeur */
  .dropdown-panel { position: fixed; left: 10px; right: 10px; top: calc(66px + env(safe-area-inset-top)); width: auto !important; max-height: 70vh; overflow-y: auto; }

  /* Divers */
  .chart-box { height: 220px; }
  .split, .pd { gap: 14px; }
  .login-form { padding: 28px 18px calc(28px + env(safe-area-inset-bottom)); }
  .login-box .logo-top { display: block; margin: 0 auto 18px; }
  .hero-dots { left: 22px; }
  .card-pad, .card-body { padding: 16px; }
  .card-head { padding: 14px 16px; }
}

/* ---------- Application installée (plein écran) ---------- */
@media (display-mode: standalone) {
  body { overscroll-behavior-y: none; }
  .tabbar, .nav, .topbar { -webkit-user-select: none; user-select: none; }
}

/* ---------- Carte « Installer l'application » ---------- */
.install-card { position: fixed; z-index: 60; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); display: flex; gap: 12px; align-items: flex-start; padding: 14px;
  border-radius: 20px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 24px 50px -18px rgba(3,26,36,.5); animation: m-sheet .4s cubic-bezier(.22,1,.36,1); }
.install-card img { width: 48px; height: 48px; border-radius: 13px; flex-shrink: 0; }
.install-card .t { font-weight: 800; font-size: 14.5px; }
.install-card .d { font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.install-card .d .icn { font-size: 15px; vertical-align: -3px; color: var(--primary); }
.install-card .row { margin-top: 10px; gap: 8px; }
.install-card .x { position: absolute; top: 8px; right: 8px; }
@media (min-width: 961px) { .install-card { left: auto; right: 22px; bottom: 22px; width: 380px; } }

/* ==========================================================
   Icônes fixes : aucune animation ni mouvement (demande du 22/10/2026)
   ========================================================== */
.icn, .icn::before, .icn::after, .badge.st, .badge.st::before, .badge.st::after,
.nav a .badge-count, .cat-tile .ci, .cc-ic, .stat .ic, .m-opt-ico, .theme-toggle .icn { animation: none !important; }
.icn { transition: color .2s !important; }
:is(a, button, summary, label, .card, .contact-card, .acc, .notif, .method, .cat-tile, .pay-option, tr):is(:hover, :focus-visible, :active) .icn:not(.f-icn):not(.th-sun):not(.th-moon),
.card.stat:hover .ic .icn, .m-opt.kb .m-opt-ico { transform: none !important; }
.contact-card:hover .cc-ic { transform: none !important; }
.search > .icn { transform: translateY(-50%) !important; }
.f-ic:focus-within > .f-icn { transform: translateY(-50%) !important; }
.f-ic.f-ta:focus-within > .f-icn { transform: none !important; }
.theme-toggle .icn { transition: opacity .2s !important; }
[data-theme="dark"] .theme-toggle:hover .th-sun, .theme-toggle:hover .th-moon { transform: none !important; }


/* Tuiles d'icône des chiffres : fond menthe clair, icône sarcelle (comme la maquette) */
.stat .ic { background: #DDF0EC; color: #23848A; box-shadow: inset 0 0 0 1px #BFE2DC; }
.stat .ic.ic-warm { background: #FFF3DC; color: #E08A00; box-shadow: inset 0 0 0 1px #FFE2A8; }
.stat .ic.ic-blue { background: #E4EDFF; color: #2552C4; box-shadow: inset 0 0 0 1px #CCDBFF; }
.stat .ic i.icn.ph-duotone::before { color: currentColor; opacity: .22; }
[data-theme="dark"] .stat .ic { background: rgba(74,163,166,.16); color: #5BC0C2; box-shadow: inset 0 0 0 1px rgba(91,192,194,.25); }
[data-theme="dark"] .stat .ic.ic-warm { background: rgba(242,163,58,.14); color: #F2B65A; box-shadow: none; }
[data-theme="dark"] .stat .ic.ic-blue { background: rgba(91,141,239,.16); color: #94B8F5; box-shadow: none; }

/* Menu latéral fermé sur téléphone : pas d'ombre qui dépasse sur le bord de l'écran */
@media (max-width: 960px) { .app:not(.nav-open) .sidebar { box-shadow: none !important; } }

/* ==========================================================
   Menu latéral blanc (mode clair) — le mode sombre garde son menu foncé
   ========================================================== */
html:not([data-theme="dark"]) .sidebar { background: #fff; color: #2E4652; border-right: 1px solid #E0EAEA; box-shadow: 4px 0 14px -4px rgba(4,52,74,.14), 18px 0 40px -14px rgba(4,52,74,.22); }
html:not([data-theme="dark"]) .sidebar::after { display: none; }
html:not([data-theme="dark"]) .sidebar .brand-name { color: #04344A; }
html:not([data-theme="dark"]) .sidebar .brand-sub { color: #23848A; }
html:not([data-theme="dark"]) .nav a { color: #2E4652; }
html:not([data-theme="dark"]) .nav a .icn { color: #5F7781; }
html:not([data-theme="dark"]) .nav a:hover { background: #F0F8F7; color: #04344A; }
html:not([data-theme="dark"]) .nav a:not(.active):hover .icn { color: #23848A; }
html:not([data-theme="dark"]) .nav a.active { background: #DDF0EC; color: #04344A; box-shadow: none; font-weight: 700; }
html:not([data-theme="dark"]) .nav a.active::before { background: #23848A; box-shadow: none; }
html:not([data-theme="dark"]) .nav a.active .icn { color: #23848A; }
html:not([data-theme="dark"]) .nav a.active i.icn.ph-duotone::before { color: #23848A; opacity: .3; }
html:not([data-theme="dark"]) .nav a.active .badge-count { background: var(--orange); color: #3a2300; }
html:not([data-theme="dark"]) .sidebar-foot { background: #F2F7F7; border: 1px solid #E0EAEA; color: #5F7781; backdrop-filter: none; }
html:not([data-theme="dark"]) .sidebar-foot strong { color: #04344A; }
html:not([data-theme="dark"]) .nav-collapse { background: #F2F7F7; border-color: #D6E4E1; color: #2E4652; }
html:not([data-theme="dark"]) .nav-collapse:hover { background: #DDF0EC; color: #04344A; }
html:not([data-theme="dark"]).nav-mini .nav a .badge-count { border-color: #fff; }

/* Vrai logo (oiseau sarcelle) : affiché tel quel, sans tuile ni filtre */
img.brand-logo, .mod img.brand-logo { width: 60px; height: auto; aspect-ratio: 200 / 75; border-radius: 0; object-fit: contain; box-shadow: none; filter: none; }
@media (max-width: 960px) { .m-brand img.brand-logo { width: 56px; height: auto; border-radius: 0; } }

/* ==========================================================
   Responsivité (vérifiée de 320 px à 1920 px)
   ========================================================== */
/* Les colonnes de grille ne doivent jamais forcer une largeur minimale */
.split > *, .grid > *, .grid-main > * { min-width: 0; }
@media (max-width: 1200px) { .split { grid-template-columns: minmax(0, 1fr); } }
/* Graphique en anneau + légende : la légende passe dessous dès que la carte est trop étroite */
.row:has(> .chart-box) { flex-wrap: wrap; justify-content: center; }
.row:has(> .chart-box) > .legend { flex: 1 1 120px !important; min-width: 0; }
html:not(.nav-mini) .sidebar .brand { padding-left: 14px; padding-right: 14px; gap: 6px; }
.sidebar .brand-link { gap: 8px; min-width: 0; }
.sidebar .brand-link > div { min-width: 0; }
.sidebar .brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ==========================================================
   Catalogue : tuiles de catégorie et cartes produit sans mouvement
   ========================================================== */
.cat-tile, .cat-tile .ci, .mod .cat-tile { transition: none !important; }
.cat-tile:hover, .mod .cat-tile:hover { transform: none !important; }
.cat-tile:hover .ci { transform: none !important; background: var(--b); color: var(--c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 25%, transparent); }
.cat-tile:hover i.icn.ph-duotone::before { color: inherit; opacity: .2; }
.p-card:hover .p-img img { transform: none !important; }

/* ==========================================================
   Barre d'onglets (téléphone) : fond blanc, barre sous l'onglet choisi, pastilles conservées
   ========================================================== */
@media (max-width: 960px) {
  html:not([data-theme="dark"]) .tabbar { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; border-top: 1px solid #E0EAEA; box-shadow: 0 -6px 20px -10px rgba(4,52,74,.25); }
  html:not([data-theme="dark"]) .tabbar > a, html:not([data-theme="dark"]) .tabbar > button { color: #5F7781; }
  html:not([data-theme="dark"]) .tabbar .on { background: transparent; color: #04344A; }
  html:not([data-theme="dark"]) .tabbar .on .icn, html:not([data-theme="dark"]) .tabbar .on i.icn.ph-duotone::before { color: #23848A; }
  html:not([data-theme="dark"]) .tb-badge { box-shadow: 0 0 0 2px #fff; }
  .tabbar .on .icn { animation: none !important; }
  .tabbar > :active { transform: none; }
  /* Barre de sélection en haut de l'onglet actif */
  .tabbar .on::before { content: ''; position: absolute; top: -6px; left: 50%; width: 34px; height: 4px; margin-left: -17px; border-radius: 0 0 4px 4px; background: #23848A; }
  [data-theme="dark"] .tabbar .on::before { background: #5BC0C2; }
}

/* ==========================================================
   Tableaux (ordinateur) : en-tête fixé sous la barre du haut au défilement,
   toutes les colonnes visibles, jamais de défilement horizontal
   (sur téléphone, les tableaux sont affichés en cartes : voir plus haut)
   ========================================================== */
@media (min-width: 961px) {
  .table-wrap { overflow: visible; }
  table.table { width: 100%; table-layout: auto; }
  .table th, .mod .table th { position: sticky; top: var(--topbar-h); z-index: 5; white-space: normal; background: #F2F7F7; box-shadow: inset 0 -1px 0 var(--border); }
  [data-theme="dark"] .table th, [data-theme="dark"].mod .table th { background: #0F2B36; }
  .table td { overflow-wrap: break-word; }
  .table td .row { flex-wrap: wrap; }
}
/* Écrans moyens : colonnes plus serrées pour que tout tienne */
@media (min-width: 961px) and (max-width: 1440px) {
  .table th, .table td { padding-left: 10px; padding-right: 10px; }
  table.table { font-size: 12.5px; }
  .table th, .mod .table th { font-size: 10.5px; letter-spacing: .04em; }
  .table .thumb { width: 36px; height: 36px; }
  .table td .btn + .btn { margin-top: 4px; }
}
@media (min-width: 961px) and (max-width: 1200px) {
  .table th, .table td { padding-left: 7px; padding-right: 7px; }
  table.table { font-size: 12px; }
  .table th, .mod .table th { font-size: 10px; letter-spacing: .02em; }
  .table .btn-xs { padding-left: 8px; padding-right: 8px; }
  .table th, .mod .table th { text-transform: none; font-size: 11px; letter-spacing: 0; }
}

/* ==========================================================
   Cartes sans dégradé (couleurs unies) et recherche sans l'indice « / »
   ========================================================== */
.stat::after, .mod .stat::after, [data-theme="dark"] .stat::after { display: none !important; }
.cat-tile .ci { background: var(--b); }
.stat.hl .ic { background: #FDE6E4; color: #B42318; box-shadow: inset 0 0 0 1px #F8C5BF; }
[data-theme="dark"] .stat.hl .ic { background: rgba(229,72,77,.16); color: #F28B82; box-shadow: none; }
.mod .topbar .search::after, .topbar .search::after { display: none !important; }
/* Couleurs unies partout : boutons, onglets, étapes, statuts, icônes vides */
:root, .mod { --grad: #23848A; }
.mod .btn-primary, .mod .tab.active, [data-theme="dark"].mod .tab.active, .mod .step.on .n { background: #23848A; }
.b-green { background: #E3F5F6; } .b-warn { background: #FFF3DC; } .b-info { background: #E8EFFF; } .b-danger { background: #FEEBE9; } .b-grey { background: #EEF1F2; }
.badge.st[data-st="ok"]::after, [data-theme="dark"] .badge.st[data-st="ok"]::after { display: none; }
.empty .ic { background: var(--primary-100); }
[data-theme="dark"] .empty .ic { background: rgba(74,163,166,.14); }
.cc-ic { background: #DDF0EC; color: #23848A; box-shadow: inset 0 0 0 1px #BFE2DC; }
.cc-ic i.icn.ph-duotone::before { color: currentColor; opacity: .22; }
[data-theme="dark"] .cc-ic { background: rgba(74,163,166,.16); color: #5BC0C2; box-shadow: none; }

/* ==========================================================
   Barre du haut et menus déroulants (profil, notifications) : fond uni, sans transparence ni flou
   ========================================================== */
.topbar, .mod .topbar { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid #E0EAEA; }
.dropdown-panel, .mod .dropdown-panel { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
.mod .topbar .search .input { background: #F2F7F7; }
[data-theme="dark"] .topbar, [data-theme="dark"].mod .topbar { background: #0A222C; border-bottom-color: var(--border); }
[data-theme="dark"] .dropdown-panel, [data-theme="dark"].mod .dropdown-panel { background: #0F2B36; }
[data-theme="dark"] .search .input, [data-theme="dark"].mod .topbar .search .input { background: #0F2B36; }
.m-select-menu { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
[data-theme="dark"] .m-select-menu { background: #0F2B36; }
/* Ordinateur : la barre du haut passe au-dessus de l'ombre du menu latéral (plus de dégradé dans son coin gauche) */
@media (min-width: 961px) { .topbar, .mod .topbar { z-index: 41; } }
/* Séparation nette entre le menu latéral et la barre du haut (les deux sont blancs) */
@media (min-width: 961px) {
  html:not([data-theme="dark"]) .sidebar { border-right: 1px solid #C2D4D1; }
  .topbar, .mod .topbar { box-shadow: inset 1px 0 0 #C2D4D1, 0 1px 0 #E0EAEA; }
  [data-theme="dark"] .topbar, [data-theme="dark"].mod .topbar { box-shadow: inset 1px 0 0 rgba(162,212,203,.14); }
}
/* Finitions : ombre légère sous la barre du haut, marque sarcelle sur l'onglet actif du menu */
@media (min-width: 961px) {
  .topbar, .mod .topbar { box-shadow: inset 1px 0 0 #C2D4D1, 0 1px 0 #E0EAEA, 0 6px 16px -10px rgba(4,52,74,.22); }
  [data-theme="dark"] .topbar, [data-theme="dark"].mod .topbar { box-shadow: inset 1px 0 0 rgba(162,212,203,.14), 0 6px 16px -10px rgba(0,0,0,.6); }
}
html:not([data-theme="dark"]) .nav a.active { background: #E6F4F2; color: #04344A; }
.nav a.active::before, .mod .nav a.active::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: #23848A; box-shadow: none; }
[data-theme="dark"] .nav a.active::before { background: #5BC0C2; }
.nav a.active .icn { color: #23848A; }
[data-theme="dark"] .nav a.active .icn { color: #5BC0C2; }

/* ==========================================================
   Moins de texte : badges d'information, icône ⓘ, étapes illustrées
   ========================================================== */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chip-info { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 99px; background: #EEF6F5; border: 1px solid #D6E8E5; color: #0E4F5C; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.chip-info .icn { font-size: 15px; color: #23848A; flex: none; }
[data-theme="dark"] .chip-info { background: rgba(74,163,166,.12); border-color: rgba(91,192,194,.22); color: #CFE9E9; }
[data-theme="dark"] .chip-info .icn { color: #5BC0C2; }

.info-tip { position: relative; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 4px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #23848A; cursor: help; vertical-align: middle; }
.info-tip .icn { font-size: 16px; }
.info-tip::after { content: attr(data-tip); position: absolute; z-index: 70; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: max-content; max-width: 260px; padding: 8px 11px; border-radius: 10px; background: #04344A; color: #fff; font-size: 12.5px; font-weight: 500; line-height: 1.4; text-align: left; white-space: normal; box-shadow: 0 10px 24px -10px rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .15s; }
.info-tip:hover::after, .info-tip:focus::after, .info-tip:focus-visible::after { opacity: 1; }
@media (max-width: 960px) { .info-tip::after { left: auto; right: -8px; transform: none; max-width: min(260px, 80vw); } }

.flow-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 18px; }
.fs-step { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 7px; border-radius: 12px; background: var(--surface); border: 1px solid #D6E8E5; font-size: 13px; font-weight: 600; color: #04344A; }
.fs-ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: #DDF0EC; color: #23848A; flex: none; }
.fs-ic .icn { font-size: 16px; }
.fs-arrow { color: #8FA3AB; display: inline-grid; }
[data-theme="dark"] .fs-step { border-color: rgba(91,192,194,.22); color: #E3F1F2; }
[data-theme="dark"] .fs-ic { background: rgba(74,163,166,.16); color: #5BC0C2; }
@media (max-width: 600px) { .fs-arrow { display: none; } .flow-steps { gap: 6px; } }

/* ==========================================================
   Connexion : tous les moyens de paiement, œil du mot de passe
   ========================================================== */
.pay-strip .ps-item { display: inline-grid; }
.pay-strip .mlogo { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; box-shadow: 0 4px 12px -4px rgba(0,0,0,.4); overflow: hidden; }
.pay-strip .mlogo img { width: 100%; height: 100%; object-fit: cover; }
.pay-strip .mlogo .icn { font-size: 18px; }

.login-pay { margin-top: 18px; padding: 14px; border-radius: 14px; background: #F2F7F7; border: 1px solid #E0EAEA; }
.lp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
.lp-item { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 10px; background: #fff; border: 1px solid #E0EAEA; font-size: 12.5px; font-weight: 600; color: #0C2430; }
.lp-item > span:not(.mlogo) { flex: 1; min-width: 0; }
.lp-item .mlogo { width: 26px; height: 26px; border-radius: 7px; flex: none; display: grid; place-items: center; color: #fff; overflow: hidden; }
.lp-item .mlogo img { width: 100%; height: 100%; object-fit: cover; }
.lp-item .mlogo .icn { font-size: 15px; }
.lp-item > .icn { color: #23848A; font-size: 15px; flex: none; }
[data-theme="dark"] .login-pay { background: rgba(255,255,255,.03); border-color: var(--border); }
[data-theme="dark"] .lp-item { background: var(--surface); border-color: var(--border); color: var(--text); }

.pwd-wrap { position: relative; }
.pwd-wrap .input { padding-right: 44px; }
.pwd-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: 9px; background: transparent; color: #5F7781; display: grid; place-items: center; cursor: pointer; z-index: 2; }
.pwd-eye:hover { background: #F0F8F7; color: #23848A; }
.pwd-eye .icn { font-size: 19px; }
/* Moyens de paiement : aucune animation (logos et boutons de choix restent immobiles) */
.pay-strip img, .pay-strip .mlogo, .lp-item, .mlogo, .method, .mod .method, .pay-option, .mod .pay-option { transition: none !important; }
.pay-strip img:hover, .pay-strip .mlogo:hover, .pay-strip .ps-item:hover .mlogo, .method:hover, .mod .method:hover, .pay-option:hover, .mod .pay-option:hover { transform: none !important; }
/* Connexion : sur téléphone (panneau de présentation masqué), une seule ligne discrète de petits logos */
.login-pay-mini { display: none; }
@media (max-width: 960px) {
  .login-pay-mini { display: flex; justify-content: center; gap: 8px; margin-top: 18px; opacity: .85; }
  .login-pay-mini .mlogo { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; color: #fff; overflow: hidden; }
  .login-pay-mini .mlogo img { width: 100%; height: 100%; object-fit: cover; }
  .login-pay-mini .mlogo .icn { font-size: 14px; }
}

/* ==========================================================
   Passe professionnelle : interface stable
   Pas de pages qui apparaissent en fondu, ni d'éléments qui se soulèvent ou tournent au survol,
   ni d'onde au clic. On garde les changements de couleur au survol et l'ouverture rapide des fenêtres.
   ========================================================== */
.content > *, .mod .content > * { animation: none !important; }
.mod .reveal, .mod .reveal.in { opacity: 1 !important; transform: none !important; transition: none !important; }
.mod .ripple { display: none !important; }
:is(.cat-tile, .mod .cat-tile, .p-card, .mod .p-card, .mod .nav a, .mod .icon-btn, .mod a.card, .mod .card.stat, .mod .btn-primary, .mod .btn-outline, .mod .btn-outline-green, .mod .btn-danger-outline, .mod .tab, .mod .opt, .mod .acc, .mod .login-feats div, .m-select-btn, .pp-card, .mod a.contact-card):hover { transform: none !important; }
.p-card:hover .p-img img, .card.stat:hover .ic .icn, .contact-card:hover .cc-ic { transform: none !important; }
.p-card, .mod .p-card, .mod .card, .mod .btn, .mod .tab, .mod .nav a, .cat-tile { transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s !important; }
.theme-toggle:hover .th-moon, [data-theme="dark"] .theme-toggle:hover .th-sun { transform: none !important; }

/* Badge « Mode test » : une seule mention discrète que les paiements sont simulés */
.test-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; background: #FFF3DC; color: #9A5B00; border: 1px solid #F6D9A6; font-size: 11.5px; font-weight: 700; white-space: nowrap; cursor: help; }
[data-theme="dark"] .test-badge { background: rgba(242,163,58,.14); color: #F2B65A; border-color: rgba(242,163,58,.3); }
@media (max-width: 600px) { .test-badge span { display: none; } .test-badge { padding: 3px 6px; } }

/* ==========================================================
   Listes par pages · étapes numérotées · historique · frise d'échéancier · cartes
   ========================================================== */
/* Liste par pages : ‹ 1 / 4 › */
.pager { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 0 4px; }
.pg-btn { width: 32px; height: 32px; border-radius: 9px; border: 1px solid #D6E4E1; background: var(--surface); color: #04344A; display: grid; place-items: center; cursor: pointer; }
.pg-btn:hover:not(:disabled) { background: #F0F8F7; border-color: #23848A; }
.pg-btn:disabled { opacity: .35; cursor: default; }
.pg-btn .icn { font-size: 16px; }
.pg-info { min-width: 48px; text-align: center; font-size: 12.5px; font-weight: 700; color: #5F7781; }
[data-theme="dark"] .pg-btn { border-color: var(--border); color: var(--text); }
.todo .pager { padding-bottom: 12px; }

/* Cartes côte à côte : chacune garde sa hauteur (pas d'espace blanc sous « Enregistrer ») */
.grid-2, .split { align-items: start; }

/* Étapes : le numéro reste affiché ; une étape validée a le numéro sur fond sarcelle + une petite coche */
.step .n { position: relative; }
.step.done .n, .mod .step.done .n { background: #23848A; color: #fff; }
.step.on .n, .mod .step.on .n { background: #fff; color: #23848A; box-shadow: inset 0 0 0 2.5px #23848A, 0 0 0 4px rgba(35,132,138,.14); }
.n-ok { position: absolute; right: -4px; bottom: -4px; width: 15px; height: 15px; border-radius: 50%; background: #fff; color: #23848A; display: grid; place-items: center; box-shadow: 0 0 0 1.5px #23848A; font-style: normal; }
.n-ok .icn { font-size: 10px; }
.mod .step-line.done, .step-line.done { background: #23848A; }
[data-theme="dark"] .step.on .n { background: var(--surface); }
[data-theme="dark"] .n-ok { background: var(--surface); }

/* Historique : cercles exactement centrés sur le trait */
.timeline { position: relative; padding-left: 30px !important; }
.timeline::before { left: 10px !important; top: 10px !important; bottom: 10px !important; width: 2px !important; background: #D6E4E1 !important; }
.tl-item::before { left: -26px !important; top: 3px !important; width: 14px !important; height: 14px !important; box-sizing: border-box !important; border: 3px solid #23848A !important; background: var(--surface, #fff) !important; }

/* Frise d'échéancier : 1 → 2 → 3 */
.frise { list-style: none; margin: 0; padding: 0; }
.fr-item { position: relative; display: flex; gap: 12px; padding-bottom: 16px; }
.fr-item:last-child { padding-bottom: 0; }
.fr-item:not(:last-child)::after { content: ''; position: absolute; left: 14px; top: 30px; bottom: 0; width: 2px; background: #D6E4E1; }
.fr-item.paid:not(:last-child)::after { background: #23848A; }
.fr-n { position: relative; z-index: 1; width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: #fff; color: #5F7781; box-shadow: inset 0 0 0 2px #C2D4D1; }
.fr-item.paid .fr-n { background: #23848A; color: #fff; box-shadow: none; }
.fr-item.due .fr-n { color: #23848A; box-shadow: inset 0 0 0 2.5px #23848A; }
.fr-item.late .fr-n { color: #B42318; box-shadow: inset 0 0 0 2.5px #B42318; }
.fr-item.late .fr-body .small { color: #B42318; }
.fr-item.off { opacity: .55; }
.fr-body { flex: 1; min-width: 0; padding-top: 4px; font-size: 13.5px; }
[data-theme="dark"] .fr-n { background: var(--surface); }
[data-theme="dark"] .fr-item:not(:last-child)::after { background: var(--border); }

/* Icônes sans fond teinté seulement pour : Se déconnecter, fermeture de fenêtre, coche des étapes validées, « + » d'ajout, double coche, téléchargement */
[data-logout] .icn.ph-duotone::before, [data-close] .icn.ph-duotone::before, .n-ok .icn.ph-duotone::before, .icn.ph-plus::before, .icn.ph-x::before, .icn.ph-text-t::before, .icn.ph-checks::before, .icn.ph-check::before, .icn.ph-download-simple::before { opacity: 0 !important; }

/* Échéances groupées par commande : séparateur entre commandes, versements côte à côte */
.table tr.grp-first:not(:first-child) td { border-top: 2px solid #C2D4D1; }
[data-theme="dark"] .table tr.grp-first:not(:first-child) td { border-top-color: var(--border); }
.ech-row { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content max-content; gap: 28px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--border); }
.ech-list > .ech-row:first-child { border-top: 0; }
.ech-order { display: flex; flex-direction: column; color: inherit; }
.ech-pills { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 8px; }
.ech-rest { display: flex; flex-direction: column; text-align: right; }
.ech-act { text-align: right; }
@media (max-width: 960px) {
  .ech-row { grid-template-columns: 1fr auto; gap: 10px; padding: 14px 16px; }
  .ech-pills { grid-column: 1 / -1; }
  .ech-rest { text-align: left; }
  .ech-act { grid-column: 1 / -1; text-align: left; }
  .ech-act .btn { width: 100%; }
}

/* Frise horizontale des versements (échéancier par commande) */
.efr { list-style: none; margin: 0; padding: 0; display: flex; width: 100%; }
.efr-i { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; min-width: 0; }
.efr-i:not(:last-child)::after { content: ""; position: absolute; top: 13px; left: calc(50% + 16px); right: calc(-50% + 16px); height: 2px; background: #C2D4D1; }
.efr-i.paid:not(:last-child)::after { background: #23848A; }
.efr-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; border: 2px solid #C2D4D1; background: var(--surface); color: var(--muted); margin-bottom: 4px; }
.efr-n .icn { font-size: 14px; }
.efr-i.paid .efr-n { background: #23848A; border-color: #23848A; color: #fff; }
.efr-i.due .efr-n { border-color: #23848A; color: #23848A; }
.efr-i.late .efr-n { border-color: #DC2626; color: #DC2626; background: #FDECEC; }
.efr-d { font-size: 12px; color: var(--muted); white-space: nowrap; }
.efr-i.late .efr-d { color: #DC2626; font-weight: 600; }
.efr-a { font-size: 13px; white-space: nowrap; }
.efr-i.paid .efr-a { color: #1B6B70; }
[data-theme="dark"] .efr-i.late .efr-n { background: rgba(220,38,38,.16); }
[data-theme="dark"] .efr-i.paid .efr-a { color: #A2D4CB; }
@media (max-width: 400px) { .efr-a { font-size: 12px; } }

/* Téléphones : barre du haut lisible, chaque icône garde une vraie zone tactile.
   Le mode clair / sombre reste accessible dans le menu du profil. */
@media (max-width: 560px) {
  .topbar .icon-btn.theme-toggle { display: none; }
  .topbar .icon-btn, .topbar .user-chip { flex-shrink: 0; }
  .topbar .icon-btn { min-width: 36px; }
}
@media (max-width: 420px) {
  .topbar .m-title { display: none; }
  .topbar .m-brand { margin-right: auto; }
}

/* Tableaux trop larges (tablette, petit portable) : cartes sur 2 colonnes au lieu d'un défilement horizontal */
.table-wrap:has(> table.as-cards) { overflow: visible; }
table.table.as-cards thead { display: none; }
table.table.as-cards { display: block; }
table.table.as-cards tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
table.table.as-cards tr { display: block; padding: 14px 18px; border-bottom: 1px solid var(--border); }
table.table.as-cards tr:nth-child(odd) { border-right: 1px solid var(--border); }
table.table.as-cards td { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 3px 0 !important; border: 0 !important; text-align: right !important; font-size: 13px; min-width: 0; box-shadow: none !important; }
table.table.as-cards td[data-label]::before { content: attr(data-label); color: var(--muted); font-weight: 600; font-size: 12px; text-align: left; flex-shrink: 0; }
table.table.as-cards td[data-label=""]::before, table.table.as-cards td:first-child::before { display: none; }
table.table.as-cards td:first-child { justify-content: flex-start; text-align: left !important; font-weight: 800; font-size: 14.5px; padding-bottom: 6px !important; }
table.table.as-cards td:last-child[data-label=""] { justify-content: flex-end; padding-top: 8px !important; }
table.table.as-cards td:empty { display: none; }
table.table.as-cards tr.grp-first td { border-top: 0 !important; }
/* Icône d'aide « i » : zone tactile agrandie sans changer son apparence */
.info-tip::before { content: ""; position: absolute; inset: -10px; }

/* Jamais de mot coupé : statuts, boutons, montants, dates, numéros et intitulés courts restent sur une ligne.
   Si un tableau ne tient plus dans sa largeur, il passe en cartes (moderne.js › M_fitTables). */
.badge, .btn, .chip, .method-tag, .table .nowrap { white-space: nowrap !important; }
.btn-block { white-space: normal !important; }
.table th, .table td.nw, .table td.right, .table td.strong { white-space: nowrap; }
.table td .badge, .table td .btn { flex-shrink: 0; }

/* Barre du haut sur écrans moyens : la recherche se réduit, les icônes gardent leur taille,
   le profil n'affiche plus que la photo (nom et fonction restent dans son menu) */
.topbar .icon-btn, .topbar .dropdown, .topbar .test-badge { flex-shrink: 0; }
@media (min-width: 961px) and (max-width: 1200px) {
  .topbar .search { min-width: 160px; flex: 1 1 200px; }
  .topbar .user-chip .meta { display: none; }
}

/* Chiffres clés : toujours sur une ligne, la taille s'adapte à la largeur de la carte */
.stat { container-type: inline-size; }
.stat .value { white-space: nowrap; font-size: min(28px, 8.5cqi); }
/* Lignes de récapitulatif : le montant reste entier, c'est le libellé qui passe à la ligne */
.summary-row > span:last-child, .summary-row > b:last-child { white-space: nowrap; flex-shrink: 0; }

/* ---------- Fenêtre « Commande » du marchand : simple et moderne ---------- */
.mo-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.mo-av { width: 46px; height: 46px; flex-shrink: 0; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, #DDF0EC, #BFE2DC); color: #1F7A80; font: 800 15px 'Sora', sans-serif; }
.mo-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mo-who b { font-size: 16px; }
.mo-who span { font-size: 12.5px; color: var(--muted); }
.mo-steps { list-style: none; display: flex; margin: 0 0 20px; padding: 14px 16px; border-radius: 14px; background: var(--surface-2, #F5F9F9); border: 1px solid var(--border); }
.mo-steps li { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.mo-steps li::before { content: ''; position: absolute; top: 13px; right: 50%; width: 100%; height: 2px; background: var(--border); z-index: 0; }
.mo-steps li:first-child::before { display: none; }
.mo-steps li.done::before, .mo-steps li.cur::before { background: #23848A; }
.mo-steps span { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--surface, #fff); border: 2px solid var(--border); color: var(--muted); }
.mo-steps li.done span { background: #23848A; border-color: #23848A; color: #fff; }
.mo-steps li.cur span { border-color: #23848A; color: #23848A; box-shadow: 0 0 0 4px rgba(35,132,138,.15); }
.mo-steps em { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.mo-steps li.cur em, .mo-steps li.done em { color: var(--text); }
.mo-steps .icn::before { opacity: 0 !important; }
.mo-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; margin-top: 18px; align-items: start; }
.mo-next { display: flex; gap: 14px; padding: 16px 18px; border-radius: 16px; background: rgba(35,132,138,.07); border: 1px solid rgba(35,132,138,.22); }
.mo-next.warn { background: #FFF8EB; border-color: #F6D9A6; }
.mo-ic { width: 38px; height: 38px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; background: #23848A; color: #fff; font-size: 19px; }
.mo-next.warn .mo-ic { background: #D98A1C; }
.mo-ic .icn::before { opacity: 0 !important; }
.mo-next > div > b:first-child { display: block; font-size: 14px; margin-bottom: 4px; }
.mo-next p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-2); }
.mo-amount { padding: 16px 18px; border-radius: 16px; border: 1px solid var(--border); display: flex; flex-direction: column; }
.mo-k { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mo-v { font: 800 24px 'Sora', sans-serif; letter-spacing: -.02em; color: var(--text); white-space: nowrap; margin: 2px 0 10px; }
.mo-amount ul { list-style: none; margin: 0; padding: 0; }
.mo-amount li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px dashed var(--border); font-size: 12.5px; }
.mo-amount li span { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); white-space: nowrap; }
.mo-amount li b { white-space: nowrap; }
.mo-amount li.paid span, .mo-amount li.paid b { color: #1F7A80; }
.mo-note { margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.mo-hist { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 12px; }
.mo-hist summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; padding: 4px 0; }
.mo-hist summary::-webkit-details-marker { display: none; }
.mo-hist summary span { margin-left: auto; min-width: 24px; height: 22px; padding: 0 8px; border-radius: 99px; display: grid; place-items: center; background: var(--surface-2, #F2F6F6); font-size: 11.5px; color: var(--muted); }
.mo-hist summary::after { content: '›'; font-size: 18px; color: var(--muted); transition: transform .2s; }
.mo-hist[open] summary::after { transform: rotate(90deg); }
.mo-hist[open] summary { margin-bottom: 10px; }
.mo-sp { flex: 1; }
@media (max-width: 640px) {
  .mo-grid { grid-template-columns: 1fr; }
  .mo-steps { padding: 12px 6px; }
  .mo-steps em { font-size: 10px; }
  .mo-sp { display: none; }
}

/* ---------- Mes factures : une ligne claire par facture ---------- */
.inv-list { display: flex; flex-direction: column; }
.inv-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 150px auto; align-items: center; gap: 16px; padding: 14px 20px; border-top: 1px solid var(--border); cursor: pointer; transition: background .15s; }
.inv-list > .inv-row:first-child { border-top: 0; }
.inv-row:hover, .inv-row:focus-visible { background: rgba(35,132,138,.05); outline: none; }
.inv-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(35,132,138,.1); color: #23848A; font-size: 19px; }
.inv-main { display: flex; flex-direction: column; min-width: 0; }
.inv-main b { font-size: 14px; white-space: nowrap; }
.inv-main span { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-amt { font-size: 14.5px; white-space: nowrap; text-align: right; }
.inv-st { display: flex; justify-content: flex-end; }
.inv-rest { font-size: 12.5px; color: #9A5B00; white-space: nowrap; }
[data-theme="dark"] .inv-rest { color: #F2B65A; }
@media (max-width: 760px) {
  .inv-row { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "ic main amt" "ic st dl"; row-gap: 6px; padding: 14px 16px; }
  .inv-ic { grid-area: ic; align-self: start; } .inv-main { grid-area: main; } .inv-amt { grid-area: amt; }
  .inv-st { grid-area: st; justify-content: flex-start; } .inv-dl { grid-area: dl; justify-self: end; }
  .inv-main span { white-space: normal; }
}

/* Rangées de chiffres clés : chaque carte garde au moins 210 px, sinon elles passent à la ligne (jamais de montant écrasé) */
@media (min-width: 641px) {
  .grid-4:has(> .stat), .grid-5:has(> .stat) { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
}
.stat .value small { font-size: .62em; }

/* ---------- Tableaux affichés en cartes (téléphone, ou tableau trop large) : compacts et lisibles ----------
   Titre en haut, informations sur 2 colonnes (petit libellé au-dessus de la valeur), boutons en bas */
@media (max-width: 640px) {
  table.table:has(thead) tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; padding: 16px; }
  table.table:has(thead) td { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; text-align: left !important; padding: 0 !important; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  table.table:has(thead) td[data-label]::before { font-size: 11px; font-weight: 600; color: var(--muted); }
  table.table:has(thead) td:first-child { grid-column: 1 / -1; padding: 0 0 2px !important; font-size: 15px; }
  table.table:has(thead) td:last-child[data-label=""] { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 6px 0 0 !important; }
  table.table:has(thead) td .row { justify-content: flex-start; }
}
table.table.as-cards tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; padding: 16px 18px; align-content: start; }
table.table.as-cards td { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; text-align: left !important; padding: 0 !important; overflow: hidden; text-overflow: ellipsis; }
table.table.as-cards td[data-label]::before { font-size: 11px; }
table.table.as-cards td:first-child { grid-column: 1 / -1; padding: 0 0 2px !important; font-size: 15px; }
table.table.as-cards td:last-child[data-label=""] { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 6px 0 0 !important; }
table.table.as-cards td .row { justify-content: flex-start; }
/* Statut en haut à droite de la carte, à côté du titre */
@media (max-width: 640px) {
  table.table:has(thead) td:first-child:not(:has(+ td > .badge)) { grid-column: 1 / -1; }
  table.table:has(thead) tr:has(> td > .badge) td:first-child { grid-column: 1; grid-row: 1; }
  table.table:has(thead) td:has(> .badge):not(:first-child) { grid-column: 2; grid-row: 1; align-items: flex-end; overflow: visible; }
  table.table:has(thead) td:has(> .badge):not(:first-child)::before { display: none; }
}
table.table.as-cards tr:has(> td > .badge) td:first-child { grid-column: 1; grid-row: 1; }
table.table.as-cards td:has(> .badge):not(:first-child) { grid-column: 2; grid-row: 1; align-items: flex-end; overflow: visible; }
table.table.as-cards td:has(> .badge):not(:first-child)::before { display: none; }

/* Onglets sur téléphone : pastilles visibles d'un coup d'œil, sans défilement caché */
@media (max-width: 520px) {
  .utabs { flex-wrap: wrap; gap: 6px; border-bottom: 0; overflow: visible; }
  .utab { padding: 7px 13px !important; border-radius: 99px; border: 1px solid var(--border) !important; font-size: 13px; }
  .utab.active { background: #23848A; border-color: #23848A !important; color: #fff !important; }
  .utab::after { display: none !important; }
}

/* ---------- Détail de commande (entreprise) : une carte « commande », une carte « livraison » ---------- */
.od-card { overflow: hidden; }
.od-items { padding: 6px 22px; }
.od-items .line-item:last-child { border-bottom: 0; }
.od-sum { padding: 14px 22px 10px; border-top: 1px solid var(--border); }
.od-sum div { display: flex; justify-content: space-between; gap: 14px; padding: 5px 0; font-size: 13.5px; color: var(--text-2); }
.od-sum b { font-weight: 600; color: var(--text); white-space: nowrap; }
.od-total { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin: 6px 14px 14px; padding: 14px 18px; border-radius: 14px; background: linear-gradient(135deg, #1F7A80, #2A9599); color: #fff; }
.od-total span { display: flex; flex-direction: column; font-weight: 700; font-size: 14px; }
.od-total small { font-weight: 500; font-size: 12px; color: #D5EEEA; }
.od-total b { font: 800 22px 'Sora', sans-serif; letter-spacing: -.02em; white-space: nowrap; }
.od-side-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.od-status { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: rgba(35,132,138,.07); border: 1px solid rgba(35,132,138,.2); font-size: 13px; line-height: 1.5; margin-bottom: 12px; }
.od-status.wait { background: #FFF8EB; border-color: #F6D9A6; }
.od-status.ok { background: #EAF6F3; border-color: #A2D4CB; }
.od-status > .icn { font-size: 18px; color: #23848A; flex-shrink: 0; margin-top: 1px; }
.od-status.wait > .icn { color: #D98A1C; }
[data-theme="dark"] .od-status.wait { background: rgba(242,163,58,.1); border-color: rgba(242,163,58,.3); }
[data-theme="dark"] .od-status.ok { background: rgba(74,163,166,.12); border-color: rgba(74,163,166,.3); }
.od-info { display: flex; gap: 10px; align-items: flex-start; padding: 5px 0; font-size: 13px; line-height: 1.45; }
.od-info > .icn { font-size: 16px; color: var(--muted); flex-shrink: 0; margin-top: 1px; }
.od-seller { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.od-seller.solo { margin-top: 0; padding-top: 18px; border-top: 0; }
.od-sl { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; background: rgba(35,132,138,.1); color: #23848A; font-size: 19px; }
.od-seller > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.od-seller > div span { font-size: 11.5px; color: var(--muted); }
.od-seller > div b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.od-tel { font-size: 12.5px; font-weight: 600; color: #23848A; white-space: nowrap; }
@media (max-width: 640px) { .od-items { padding: 4px 16px; } .od-sum { padding: 12px 16px 8px; } .od-total { margin: 6px 10px 10px; } .od-total b { font-size: 19px; } }
@media (max-width: 640px) {
  .od-items .line-item { flex-wrap: wrap; row-gap: 4px; }
  .od-items .line-item > img, .od-items .line-item .img-ph { width: 56px; height: 56px; }
  .od-items .li-main { flex: 1 1 0; min-width: 0; }
  .od-items .li-total { flex-basis: 100%; text-align: right; }
  .od-total span { flex: 1 1 auto; min-width: 0; }
  .od-seller { flex-wrap: wrap; }
  .od-tel { flex-basis: 100%; padding-left: 52px; }
}

/* Commande : rappel « aucun paiement à cette étape » */
.p-nopay { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 11px 14px; border-radius: 12px; background: rgba(35,132,138,.07); border: 1px solid rgba(35,132,138,.2); font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.p-nopay > .icn { font-size: 18px; color: #23848A; flex-shrink: 0; }
.p-nopay b { color: var(--text); }

/* Numéros de téléphone : lien d'appel + bouton WhatsApp */
.tel { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; vertical-align: baseline; }
.tel-call { color: inherit; font-weight: inherit; text-decoration: underline; text-decoration-color: rgba(35,132,138,.45); text-underline-offset: 2px; }
.tel-call:hover { color: #23848A; text-decoration-color: #23848A; }
.tel-wa { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #25D366; color: #fff; flex-shrink: 0; transition: transform .15s, box-shadow .15s; }
.tel-wa:hover { transform: scale(1.08); box-shadow: 0 4px 10px -3px rgba(37,211,102,.6); color: #fff; }
@media (max-width: 640px) { .tel-wa { width: 26px; height: 26px; } }

/* Détail de commande : renvoi vers LeMultiservice (aucun contact direct avec le marchand) */
.od-help { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(35,132,138,.07); color: #1F7A80; font-size: 12.5px; font-weight: 700; }
.od-help:hover { background: rgba(35,132,138,.13); color: #1F7A80; }
.od-help .icn { font-size: 17px; }

/* ---------- Fenêtre « Passer commande » : compacte, échéancier en frise ---------- */
.qc-item { display: flex; align-items: center; gap: 12px; }
.qc-img { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--border); }
.qc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.qc-main b { font-size: 14px; line-height: 1.3; }
.qc-main span { font-size: 12px; color: var(--muted); }
.qc-qty { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 99px; border: 1px solid var(--border); flex-shrink: 0; }
.qc-qty button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--text); font-size: 17px; font-weight: 700; cursor: pointer; display: grid; place-items: center; }
.qc-qty button:hover { background: rgba(35,132,138,.1); color: #23848A; }
.qc-qty button:focus-visible { outline: 2px solid #23848A; outline-offset: 1px; }
.qc-qty button[hidden] { display: none; }
.qc-qty span { min-width: 26px; text-align: center; font-weight: 800; font-size: 14px; }
.qc-ship { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); font-size: 12.5px; color: var(--text-2); }
.qc-ship > .icn { font-size: 16px; color: #23848A; flex-shrink: 0; }
.qc-ship > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qc-link { border: 0; background: none; color: #23848A; font-weight: 700; font-size: 12.5px; cursor: pointer; padding: 4px 0; flex-shrink: 0; }
.qc-plan-h { margin: 16px 0 10px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.qc-plan { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qc-plan li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; }
.qc-plan li::before { content: ''; position: absolute; top: 13px; right: 50%; width: 100%; height: 2px; background: var(--border); }
.qc-plan li:first-child::before { display: none; }
.qc-dot { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--surface, #fff); border: 2px solid #A2D4CB; color: #1F7A80; }
.qc-plan li.on .qc-dot { background: #23848A; border-color: #23848A; color: #fff; box-shadow: 0 0 0 4px rgba(35,132,138,.15); }
.qc-plan em { font-style: normal; font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.qc-plan b { font-size: 13px; white-space: nowrap; }
.qc-one { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 13px; color: var(--text-2); }
.qc-one > .icn { color: #23848A; font-size: 17px; }
.qc-one > span { flex: 1; }
.qc-warn { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 9px 12px; border-radius: 10px; background: #FFF8EB; color: #8A5300; font-size: 12.5px; }
[data-theme="dark"] .qc-warn { background: rgba(242,163,58,.12); color: #F2B65A; }
.qc-foot { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.qc-note { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11.5px; color: var(--muted); text-align: center; }
.qc-note .icn { color: #23848A; font-size: 14px; flex-shrink: 0; }
/* Une fenêtre ne dépasse jamais la largeur de l'écran */
.modal-back > .modal { min-width: 0; }
.modal-back > .modal:not(.lg) { max-width: min(540px, 100%); }
.modal-back > .modal.lg { max-width: min(820px, 100%); }
.qc-foot .btn { white-space: normal !important; }
/* Bouton de la fenêtre « Passer commande » : taille normale, centré */
.qc-foot { align-items: center; }
.qc-foot .btn { width: auto; height: 40px; padding: 0 20px; font-size: 13.5px; }

/* ---------- Fenêtre « Payer » : simple, montant en évidence, moyens compacts ---------- */
.py-sum { padding: 14px 16px; border-radius: 14px; background: rgba(35,132,138,.07); border: 1px solid rgba(35,132,138,.18); }
.py-k { display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.py-amt { display: block; font: 800 26px 'Sora', sans-serif; letter-spacing: -.02em; color: var(--text); white-space: nowrap; margin: 2px 0 4px; }
.py-line { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); padding: 2px 0; }
.py-line b { margin-left: auto; white-space: nowrap; }
.py-late { padding: 1px 8px; border-radius: 99px; background: #FDE6E4; color: #B42318; font-size: 11px; font-weight: 700; }
.py-h { margin: 16px 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.py-methods .pn-methods { gap: 6px; }
.py-methods .pn-m { padding: 8px 10px; border-width: 1px; border-radius: 10px; font-size: 12.5px; }
.py-methods .pn-m .mlogo, .py-methods .pn-m .mi { width: 24px; height: 24px; border-radius: 7px; }
.py-methods .pn-m > span:not(.mlogo) { flex: 1; min-width: 0; }
.py-methods .pn-m .mlogo { flex: none; }
.py-methods .pn-tick { position: static; width: 16px; height: 16px; margin-left: auto; flex-shrink: 0; }
.py-methods .pn-m.on { box-shadow: 0 0 0 3px rgba(35,132,138,.12); }

/* Virement / chèque : coordonnées et référence à reporter */
.py-off { margin-top: 12px; padding: 14px 16px; border-radius: 14px; border: 1px dashed #A2D4CB; background: var(--surface, #fff); }
.py-off-h { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; margin-bottom: 10px; }
.py-off-h .icn { color: #23848A; font-size: 18px; }
.py-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 13px; }
.py-kv dt { color: var(--muted); }
.py-kv dd { margin: 0; display: flex; align-items: center; gap: 6px; min-width: 0; word-break: break-word; }
.py-ref { font-weight: 700; letter-spacing: .02em; color: #1F7A80; }
.py-copy { border: 0; background: rgba(35,132,138,.1); color: #1F7A80; width: 24px; height: 24px; border-radius: 7px; display: inline-grid; place-items: center; cursor: pointer; flex-shrink: 0; }
.py-copy:hover { background: rgba(35,132,138,.2); }
.py-off p { display: flex; gap: 6px; align-items: flex-start; margin: 10px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.py-off p .icn { color: #23848A; flex-shrink: 0; margin-top: 2px; }
.py-off .field label { font-size: 12px; }

/* Justificatif : avis de virement (SWIFT) ou photo du chèque */
.pf { padding-top: 12px; border-top: 1px solid var(--border); }
.pf-l { display: block; font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.pf-pick { gap: 10px; }
.pf-pick .pp-card { min-height: 0; flex-direction: row; justify-content: flex-start; gap: 10px; padding: 10px 12px; font-size: 13px; text-align: left; }
.pf-pick .pp-tile { width: 34px; height: 34px; border-radius: 10px; font-size: 18px; flex-shrink: 0; }
.pf-file { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--border); }
.pf-file img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.pf-doc { width: 56px; height: 56px; display: grid; place-items: center; font-size: 30px; color: #C0392B; flex-shrink: 0; }
.pf-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pf-meta b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-del { border: 0; background: none; color: var(--muted); font-size: 18px; cursor: pointer; padding: 4px; flex-shrink: 0; }
.pf-del:hover { color: var(--text); }
.py-off p.pf-note, .pf-note { display: flex; gap: 6px; align-items: center; margin: 8px 0 0; font-size: 11.5px; color: var(--muted); }
/* Champs obligatoires de la fenêtre Payer : astérisque, cadre rouge et message sous le champ */
.req { color: #C0392B; margin-left: 3px; font-weight: 700; }
.is-err .input, .is-err .input:focus { border-color: #D64545 !important; box-shadow: 0 0 0 3px rgba(214,69,69,.14) !important; }
.pf.is-err .pp-card { border-color: #D64545 !important; border-style: dashed; }
.f-err { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 12px; font-weight: 600; color: #C0392B; animation: f-shake .3s; }
.f-err .icn { flex-shrink: 0; font-size: 14px; }
[data-theme="dark"] .f-err, [data-theme="dark"] .req { color: #FF8A80; }
@keyframes f-shake { 0%, 100% { transform: none; } 30% { transform: translateX(-3px); } 60% { transform: translateX(3px); } }
.btn.is-off { opacity: .55; }
.btn.is-off:hover { transform: none; filter: none; }

/* Admin › Paiements › À confirmer : file de vérification */
.ac-table td { vertical-align: middle; padding-top: 14px; padding-bottom: 14px; }
.ac-table tbody tr { transition: background .15s; }
.ac-table tbody tr:hover { background: rgba(35,132,138,.04); }
.ac-ord { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--text); cursor: pointer; white-space: nowrap; }
.ac-ord:hover { color: #1F7A80; text-decoration: underline; text-underline-offset: 3px; }
.ac-amt { font-variant-numeric: tabular-nums; }
.ac-ref { margin-top: 3px; font-size: 11.5px; font-weight: 500; letter-spacing: .01em; color: var(--muted); white-space: nowrap; }
.ac-d { margin-top: 4px; white-space: nowrap; }
.ac-file { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface, #fff);
  font: inherit; font-size: 12.5px; font-weight: 600; color: #1F7A80; cursor: pointer; white-space: nowrap; transition: border-color .15s, box-shadow .15s; }
.ac-file:hover { border-color: #23848A; box-shadow: 0 0 0 3px rgba(35,132,138,.1); }
.ac-th { position: relative; width: 32px; height: 32px; border-radius: 7px; overflow: hidden; display: grid; place-items: center; background: var(--surface-2, #F2F7F7); color: var(--muted); font-size: 16px; flex-shrink: 0; }
.ac-th.pdf { color: #C0392B; background: #FDECEC; }
.ac-th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.ac-th.on img { opacity: 1; }
.ac-age { color: #B45309; font-weight: 600; }
.ac-acts { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.ac-acts .btn { height: 32px; margin: 0; }
.ac-miss { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: #C0392B; white-space: nowrap; }
.pf-view { display: grid; place-items: center; background: var(--surface-2, #F2F7F7); border-radius: 12px; padding: 8px; }
.pf-view img { max-width: 100%; max-height: 70vh; border-radius: 8px; display: block; }
.pf-pdf { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px 10px; text-align: center; }
.pf-pdf .icn { font-size: 46px; color: #C0392B; }
@media (max-width: 420px) { .pf-pick { grid-template-columns: 1fr; } }

.efr-i.verif .efr-n { background: #E3ECFF; border-color: #9DB8F5; color: #1D4ED8; }

/* ---------- Écrans tactiles (tablettes et téléphones) : zones de toucher d'au moins 40 px ---------- */
@media (max-width: 1024px) {
  .btn, .btn-sm, .btn-xs, a.btn { min-height: 40px; min-width: 40px; }
  .btn-xs, .btn-sm { padding-left: 14px; padding-right: 14px; }
  .utab { min-height: 40px; }
  .icon-btn { min-width: 40px; min-height: 40px; }
  .icon-btn .dot { font-size: 11px; min-width: 18px; height: 18px; }
}
/* Valider / refuser une commande : côte à côte, largeur égale, sans déborder */
.od-actions { justify-content: flex-end; gap: 10px; }
.od-actions .btn { min-width: 180px; }
@media (max-width: 640px) { .od-actions .btn { flex: 1; min-width: 0; } }
@media (max-width: 1024px) {
  .qc-qty button { width: 38px; height: 38px; }
  .qc-link { min-height: 40px; padding: 0 4px; }
  .py-copy { width: 36px; height: 36px; border-radius: 9px; }
  .pager button, [data-pg-prev], [data-pg-next], .pg-btn { min-width: 40px; min-height: 40px; }
}

/* ---------- Petits téléphones (≤ 400 px) ---------- */
@media (max-width: 400px) {
  /* Lignes « à payer / à valider » de l'accueil : boutons sous le montant */
  .p-pay { flex-wrap: wrap; row-gap: 8px; }
  .p-pay > div:first-child { flex: 1 1 100% !important; }
  .p-pay > .btn { flex: 1; }
  /* Étapes de commande : plus serrées pour tenir dans la carte */
  .stepper { gap: 4px; }
  .step .n { width: 24px !important; height: 24px !important; font-size: 11px !important; }
  .step-line { min-width: 6px !important; }
  /* Boutons des cartes produit */
  .p-buy .btn { padding-left: 8px; padding-right: 8px; font-size: 12.5px; }
  /* Bouton de commande : le total est déjà dans l'échéancier */
  .qc-tot { display: none; }
  .py-copy { width: 36px; height: 36px; }
}
/* Très petits écrans (< 360 px) : catalogue sur une colonne */
@media (max-width: 359px) {
  .product-grid { grid-template-columns: 1fr !important; }
}
/* Carte de chiffre clé très étroite : l'unité passe sous le montant, le montant reste entier */
@container (max-width: 200px) {
  .value { font-size: min(24px, 13cqi) !important; }
  .value small { display: block; margin-top: 2px; }
}
.stat .value small { font-size: max(11px, .62em) !important; }
/* Adresse de livraison de la fenêtre de commande : affichée en entier sur téléphone */
@media (max-width: 640px) { .qc-ship > span { white-space: normal; overflow: visible; } }
/* Légendes des graphiques : pourcentages toujours entiers */
.legend b { white-space: nowrap; flex-shrink: 0; }
/* Blocs « nom + détails » dans une rangée : ils rétrécissent au lieu de pousser le badge hors de la carte */
.row > [style*="flex:1"] { min-width: 0; }
.row > .badge, .row > .st { flex-shrink: 0; }
.tel { white-space: normal; }
.tel-call { white-space: nowrap; }
@media (max-width: 1200px) { .grid-3 > .row { flex-wrap: wrap; row-gap: 6px; } }
/* Lisibilité : aucun texte sous 11 px (compteurs, en-têtes de tableaux) */
.icon-btn .dot { font-size: 11px; }
.table th, .mod .table th { font-size: 11px !important; }
/* Grands écrans : contenu centré dans l'espace disponible, un peu plus large au-delà de 2200 px */
@media (min-width: 1700px) { #content.content { margin-left: auto; margin-right: auto; } }
@media (min-width: 2200px) { #content.content { max-width: 1640px; } }
/* Barre d'onglets du bas : libellés lisibles (11 px minimum) */
@media (max-width: 960px) { .tabbar > a, .tabbar > button { font-size: 11px; } }
/* Téléphone en paysage (écran bas) : barres plus fines pour laisser la place au contenu */
@media (max-width: 960px) and (max-height: 500px) {
  :root { --topbar-h: 52px; }
  .topbar { height: 52px; }
  .tabbar { height: calc(50px + env(safe-area-inset-bottom)); padding-top: 4px; padding-bottom: calc(4px + env(safe-area-inset-bottom)); }
  .tabbar > a, .tabbar > button { flex-direction: row; gap: 6px; }
  .tabbar .icn { font-size: 19px; }
  .modal-back > .modal { max-height: 96vh; }
}
@media (max-width: 360px) {
  .tabbar { padding-left: 2px; padding-right: 2px; gap: 0; }
  .tabbar > a, .tabbar > button { padding: 0; letter-spacing: -.03em; font-size: 10.5px; }   /* comme les barres d'onglets iOS (10 pt) */
}
/* Lignes « à payer / à valider » : le montant garde sa place, les boutons passent dessous si la colonne est étroite */
.p-pay { flex-wrap: wrap; row-gap: 8px; }
.p-pay > div:first-child { flex: 1 1 150px !important; }
.p-pay .strong { white-space: nowrap; }
.p-pay > .btn { flex: 0 0 auto; }
@media (max-width: 400px) {
  .p-pay > div:first-child { flex: 1 1 100% !important; }
  .p-pay > .btn { flex: 1 1 0; }
}

/* Tableaux : les noms (entreprise, marchand, produit) peuvent passer sur 2 lignes plutôt que d'élargir le tableau */
.table td:not(.nw):not(.right):not(.strong) { white-space: normal; overflow-wrap: break-word; }

/* Nouveautés en direct : pastille rouge sur l'onglet concerné et carte de notification */
/* Pastilles du menu, selon la charte : sarcelle LeMultiservice pour « à traiter » et « nouveau »,
   rouge réservé à l'urgent (retard, réclamation). Pas de clignotement permanent. */
html .nav a .badge-count, html .tb-badge { background: #1F7A80; color: #fff; font-variant-numeric: tabular-nums; animation: none !important; }
html:not([data-theme="dark"]) .nav a.active .badge-count { background: #1F7A80; color: #fff; }
html[data-theme="dark"] .nav a .badge-count, html[data-theme="dark"] .tb-badge { background: #A2D4CB; color: #04344A; }
html[data-theme="dark"] .nav a.active .badge-count { background: #fff; color: #04344A; }
html .nav a .badge-count.urgent, html .tb-badge.urgent, html[data-theme="dark"] .nav a .badge-count.urgent, html[data-theme="dark"] .tb-badge.urgent { background: #D64545; color: #fff; }
.toast.live-notif { display: flex; align-items: flex-start; gap: 10px; width: min(360px, calc(100vw - 32px)); padding: 12px 14px; border: 0; text-align: left; cursor: pointer; font: inherit; color: #fff; animation: ln-in .25s ease-out; }
.live-notif .ln-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; font-size: 18px; background: rgba(35,132,138,.14); color: #23848A; }
.live-notif .ln-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.live-notif .ln-tx b { font-size: 13.5px; }
.live-notif .ln-tx span { font-size: 12.5px; opacity: .8; line-height: 1.4; }
@keyframes ln-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Bandeau Total TTC : bouton de paiement quand un versement est à régler */
button.od-total.od-pay { width: calc(100% - 28px); border: 0; font: inherit; text-align: left; cursor: pointer; transition: transform .15s, box-shadow .15s, filter .15s; box-shadow: 0 10px 22px -12px rgba(31,122,128,.9); }
button.od-total.od-pay:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 14px 26px -12px rgba(31,122,128,1); }
button.od-total.od-pay:focus-visible { outline: 3px solid rgba(35,132,138,.35); outline-offset: 2px; }
.od-pay-r { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.od-pay-r em { display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-weight: 700; font-size: 12.5px; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.18); color: #fff; white-space: nowrap; }
.od-pay-r em .icn { font-size: 15px; }
@media (max-width: 640px) { button.od-total.od-pay { width: calc(100% - 20px); } }

/* Exonération de TVA (admin) */
.vx-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.vx-on { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #1F7A80; }

/* Très petits téléphones (≤ 380 px) : la barre du haut garde l'essentiel, la visite guidée passe dans le menu du profil */
@media (max-width: 380px) { .topbar [data-tour] { display: none; } .topbar { gap: 2px; } }
/* Tablette : la barre du haut tient toujours sur une ligne (libellé « Mode test » réduit à son icône, recherche plus étroite) */
@media (max-width: 960px) { .test-badge span { display: none; } .test-badge { padding: 3px 6px; } .topbar .search { min-width: 120px; } }
/* La page ne « saute » plus de côté quand la barre de défilement apparaît ou disparaît */
html { scrollbar-gutter: stable; }
/* Compteur « À faire maintenant » : même sarcelle que les pastilles du menu */
html .todo-n { background: #1F7A80; color: #fff; }
html[data-theme="dark"] .todo-n { background: #A2D4CB; color: #04344A; }
.ac-table th.right { text-align: right; }

/* ---------- Accessibilité et sobriété (recommandations UX 5 et 6) ---------- */
/* Textes secondaires lisibles : contraste suffisant sur fond blanc (norme AA) */
:root:not([data-theme="dark"]) { --muted-2: #5F7781; }
/* Contour visible au clavier, identique partout */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible, .btn:focus-visible { outline: 3px solid rgba(35,132,138,.55); outline-offset: 2px; border-radius: 10px; }
/* Écrans tactiles : zones de toucher d'au moins 44 px */
@media (pointer: coarse) {
  .icon-btn { min-width: 44px; min-height: 44px; }
  .btn-sm, .btn-xs { min-height: 40px; }
  .utab, .tab, .pg-btn { min-height: 40px; }
}
/* Badges de statut : aplats sobres, sans animation permanente (sablier, camion, secousse…) */
.badge.st .icn, .badge.st::after, .badge.st::before { animation: none !important; }
.badge.st:is([data-st="wait"], [data-st="late"], [data-st="move"])::after { display: none; }

/* Dates relatives : soulignement discret, date exacte au survol */
time.when { cursor: help; text-decoration: underline dotted rgba(95,119,129,.5); text-underline-offset: 3px; }
.ac-age { display: inline-flex; align-items: center; gap: 4px; }

/* Typographie : deux familles seulement (Sora pour les titres et grands montants, Plus Jakarta Sans pour le reste),
   chiffres de même largeur partout pour que les montants s'alignent en colonne */
body { font-variant-numeric: tabular-nums; }

/* ---------- Recherche globale (Ctrl+K) ---------- */
.ts-kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; }
#top-search .input { cursor: pointer; padding-right: 64px; }
kbd, .ts-kbd { display: inline-block; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface, #fff); font: 600 11px 'Plus Jakarta Sans', sans-serif; color: var(--muted); box-shadow: 0 1px 0 var(--border); }
.cmdk-back { position: fixed; inset: 0; z-index: 300; background: rgba(4,26,36,.45); backdrop-filter: blur(3px); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; }
.cmdk { width: min(640px, 100%); max-height: 70vh; display: flex; flex-direction: column; background: var(--surface, #fff); border-radius: 16px; box-shadow: 0 30px 70px -20px rgba(4,26,36,.55); overflow: hidden; }
.cmdk-in { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.cmdk-in .icn { font-size: 20px; color: var(--muted); }
.cmdk-in input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 500 16px 'Plus Jakarta Sans', sans-serif; color: var(--text); }
.cmdk-in input::-webkit-search-cancel-button { display: none; }
.cmdk-list { overflow-y: auto; padding: 6px; }
.cmdk-g { padding: 10px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cmdk-it { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 10px; background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.cmdk-it .icn { font-size: 18px; color: #1F7A80; flex-shrink: 0; }
.cmdk-it.on { background: rgba(35,132,138,.1); }
.cmdk-t { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-s { margin-left: auto; padding-left: 12px; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cmdk-empty { display: flex; align-items: center; gap: 8px; padding: 22px 14px; color: var(--muted); font-size: 14px; }
.cmdk-foot { display: flex; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.cmdk-foot kbd { margin-right: 3px; }
@media (max-width: 640px) { .cmdk-back { padding: 10px; } .cmdk { max-height: 85vh; } .cmdk-foot, .cmdk-in kbd { display: none; } .cmdk-s { display: none; } .ts-kbd { display: none; } }
@media (pointer: coarse) { .cmdk-foot, .ts-kbd { display: none; } }

/* Écran d'attente du chargement (squelette de l'application) */
.boot { display: flex; min-height: 100vh; background: var(--bg, #F4F8F8); }
.boot-side { width: 248px; flex-shrink: 0; padding: 22px 16px; display: flex; flex-direction: column; gap: 14px; border-right: 1px solid var(--border); }
.boot-main { flex: 1; padding: 22px 28px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.boot-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sk { display: block; border-radius: 12px; background: linear-gradient(90deg, rgba(4,52,74,.06), rgba(4,52,74,.11), rgba(4,52,74,.06)); background-size: 200% 100%; animation: sk 1.3s ease-in-out infinite; }
.sk-logo { height: 34px; width: 160px; margin-bottom: 14px; } .sk-nav { height: 18px; width: 70%; }
.sk-bar { height: 44px; width: min(420px, 100%); } .sk-h1 { height: 34px; width: 220px; } .sk-card { height: 110px; } .sk-block { height: 260px; }
@keyframes sk { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (max-width: 960px) { .boot-side { display: none; } .boot-main { padding: 16px; } .boot-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }
/* Aperçu d'e-mail (admin) */
.mail-prev { max-height: 70vh; overflow: auto; border-radius: 12px; }

/* Parametres : la remarque d'un moyen de paiement passe sous son nom */
label.row:has(.pm-note) { flex-wrap: wrap; row-gap: 2px; }
.pm-note { flex-basis: 100%; padding-left: 100px; display: flex; align-items: center; gap: 5px; }
.pm-note.warn { color: #B45309; font-weight: 600; }
[data-theme="dark"] .pm-note.warn { color: #F2B65A; }
[data-theme="dark"] .sk { background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.11), rgba(255,255,255,.05)); background-size: 200% 100%; }

/* Listes longues : « Afficher plus » en bas de tableau */
.list-more { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 20px; border-top: 1px solid var(--border); }

/* Interrupteur : toujours dessiné, y compris dans un tableau */
.switch { display: inline-block; vertical-align: middle; }
td .switch { margin-right: 8px; }
/* Téléphone : le titre de la page n'est plus répété dans la barre du haut (le logo suffit) */
@media (max-width: 960px) { .topbar .m-title { display: none; } }
/* Téléphone : bandeau Total TTC, le bouton Payer passe sous le montant, en pleine largeur */
@media (max-width: 600px) {
  button.od-total.od-pay { flex-direction: column; align-items: stretch; gap: 10px; }
  .od-pay-r { align-items: stretch; }
  .od-pay-r b { text-align: right; }
  .od-pay-r em { justify-content: center; white-space: normal; text-align: center; }
}

/* En-tetes des colonnes de montants alignes comme leurs valeurs */
.table th.right { text-align: right; }

/* Profil marchand : compte de règlement en lecture seule */
.bank-box { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2, #F7FAFA); }
.bank-box > .icn { font-size: 22px; color: #1F7A80; }
.bank-box > div { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 200px; }

/* Paramètres : barre d'enregistrement unique, toujours visible en bas de page */
.save-bar { position: sticky; bottom: 12px; z-index: 5; margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 12px 16px; border-radius: 14px; background: var(--surface, #fff); border: 1px solid var(--border); box-shadow: 0 14px 30px -18px rgba(4,52,74,.45); }
.save-bar .small { display: flex; align-items: center; gap: 6px; }
@media (max-width: 960px) { .save-bar { bottom: calc(76px + env(safe-area-inset-bottom)); } .save-bar .btn { width: 100%; } }
.switch input:disabled + span { opacity: .45; cursor: not-allowed; }

/* Quantité : bouton « − » inactif estompé, sans pavé gris */
.qty button:disabled { background: none !important; opacity: .35; cursor: not-allowed; }
/* Barre du bas : le bouton « Plus » masqué ne réapparaît jamais */
.tabbar [hidden] { display: none !important; }
/* Commande annulée : bandeau neutre et total grisé */
.next-step.off { background: #F7F2F2; border-color: #EBDADA; }
.next-step.off .ns-ic { background: #F3E3E1; color: #9A3A32; }
.next-step.off .ns-who { color: #9A3A32; }
[data-theme="dark"] .next-step.off { background: rgba(255,138,128,.08); border-color: rgba(255,138,128,.2); }
body:has(.next-step.off) .od-total { background: linear-gradient(135deg, #6B7C82, #7F9096); }

/* Examen d'un produit (admin) */
.pr-head { display: flex; gap: 16px; align-items: flex-start; }
.pr-head .pr-main { width: 120px; height: 120px; border-radius: 12px; object-fit: cover; flex: none; }
.pr-pics { display: flex; gap: 8px; flex-wrap: wrap; }
.pr-feat { margin: 0; padding-left: 18px; }
.pr-feat li { margin: 2px 0; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 260px; white-space: normal; }
@media (max-width: 560px) { .pr-head { flex-direction: column; } .pr-head .pr-main { width: 100%; height: 180px; } }

/* Fiche entreprise (admin) */
.modal .cf-kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cf-kpi .card.stat .value { font-size: 19px !important; white-space: nowrap; }
.card-pad.center > .avatar { margin-left: auto; margin-right: auto; }
.cf-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cf-list { display: flex; flex-direction: column; }
.cf-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line, #E6ECEE); }
.cf-row:last-child { border-bottom: 0; }
.cf-row .right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.text-danger { color: var(--danger, #D64545); }
@media (max-width: 760px) { .cf-cols { grid-template-columns: 1fr; gap: 8px; } .cf-kpi { grid-template-columns: 1fr 1fr !important; } }

/* Note du marchand : étoiles remplies au prorata de la note */
.rating-big { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stars-p { font-size: 20px; letter-spacing: 2px; background: linear-gradient(90deg, #F5A524 var(--r), #D9E1E3 var(--r)); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-theme="dark"] .stars-p { background: linear-gradient(90deg, #F5A524 var(--r), #3A4A50 var(--r)); -webkit-background-clip: text; background-clip: text; }
/* Catalogue : titres sur 2 lignes fixes, les prix restent alignés */
.p-card .p-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }