/* Adiman — feuille de style de l'application (espace de gestion et vitrine des boutiques)
   Les couleurs --adm-* sont les valeurs par défaut ; chaque boutique pourra les surcharger. */
:root {
    --adm-dark: #0a0a0a;
    --adm-blue: #1a3a5c;
    --adm-blue-light: #2d5a87;
    --adm-blue-deep: #0f2744;
    --adm-orange: #FF8200;
    --adm-green: #009A44;
    --adm-gold: #C5A572;
    --adm-bg: #f8fafc;
    --adm-card: #ffffff;
    --adm-text: #1e293b;
    --adm-muted: #64748b;
    --adm-border: #e2e8f0;
    --sidebar-width: 260px;
    --sidebar-collapsed: 76px;
    --navbar-height: 64px;
    --summary-bar-height: 76px;
    --fab-offset: 5.5rem;
    --radius: 0.75rem;
    --radius-lg: 1.25rem;
    --shadow-card: 0 24px 64px rgba(26, 58, 92, 0.12);
    --transition: 0.2s ease;
}

[data-theme="dark"] {
    --adm-bg: #0f172a;
    --adm-card: #1e293b;
    --adm-text: #f1f5f9;
    --adm-muted: #94a3b8;
    --adm-border: #334155;
}

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

body {
    font-family: var(--adm-font-body, 'Inter', system-ui, sans-serif);
    background: var(--adm-bg);
    color: var(--adm-text);
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh; /* hauteur reelle visible (PWA standalone / chrome mobile), ignore si non supporte */
}

h1, h2, h3, .font-serif {
    font-family: var(--adm-font-heading, 'Playfair Display', Georgia, serif);
}

/* Login */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--adm-blue) 0%, var(--adm-blue-light) 100%);
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
}

.login-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--adm-watermark, none) center/300px no-repeat;
    opacity: 0.06;
}

.login-card {
    background: var(--adm-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    width: 100%;
    max-width: 420px;
    overflow: hidden;
    animation: fadeIn 0.5s ease;
    position: relative;
    z-index: 1;
}

.login-card::before {
    content: '';
    display: block;
    height: 4px;
    background: linear-gradient(90deg, var(--adm-orange), #fff, var(--adm-green));
}

.login-card-body { padding: 2rem; }

.login-logo {
    width: 88px;
    height: 88px;
    object-fit: contain;
    border-radius: 50%;
    border: 3px solid var(--adm-border);
    margin: 0 auto 1rem;
    display: block;
    background: var(--adm-dark);
}

.login-footer-tagline {
    text-align: center;
    margin: 1rem 0 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    font-style: italic;
    color: var(--adm-orange);
}

.login-footer-copy {
    text-align: center;
    margin: 0;
    font-size: 0.65rem;
    color: var(--adm-muted);
    letter-spacing: 0.03em;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Onglet "Installer l'app" (PWA du tableau de bord admin), tout en bas de la sidebar. */
.sidebar-install-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    padding: 0.75rem 1rem;
    margin: 0 0.75rem 0.5rem;
    width: calc(100% - 1.5rem);
    border: none;
    border-radius: var(--radius);
    background: rgba(255, 130, 0, 0.16);
    color: #fff;
    font-size: 0.9rem;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: all var(--transition);
}
.sidebar-install-btn:hover { background: rgba(255, 130, 0, 0.28); }
.sidebar-install-btn i { font-size: 1.15rem; min-width: 1.25rem; color: var(--adm-orange); }
.sidebar.collapsed .sidebar-install-btn { justify-content: center; padding: 0.75rem; }

/* Centre de notifications (cloche + badge + liste) du tableau de bord admin. */
.notif-bell-wrap { position: relative; }
.notif-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: #dc3545;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border: 2px solid var(--adm-card);
}
.notif-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    width: min(360px, 90vw);
    max-height: 70vh;
    overflow-y: auto;
    background: var(--adm-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--adm-border);
    z-index: 1050;
}
.notif-dropdown__header {
    padding: 0.85rem 1.1rem;
    font-weight: 700;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--adm-border);
    color: var(--adm-text);
}
.notif-dropdown__empty {
    padding: 1.5rem 1.1rem;
    margin: 0;
    color: var(--adm-muted);
    font-size: 0.85rem;
    text-align: center;
}
.notif-dropdown__item {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 1.1rem;
    border-bottom: 1px solid var(--adm-border);
    text-decoration: none;
    color: inherit;
    transition: background var(--transition);
}
.notif-dropdown__item:last-child { border-bottom: none; }
.notif-dropdown__item:hover { background: var(--adm-bg); }
.notif-dropdown__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(26, 58, 92, 0.1);
    color: var(--adm-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
.notif-dropdown__text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.notif-dropdown__title { font-weight: 600; font-size: 0.85rem; color: var(--adm-text); }
.notif-dropdown__body {
    font-size: 0.8rem;
    color: var(--adm-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.notif-dropdown__time { font-size: 0.72rem; color: var(--adm-muted); }

/* --- Badges du centre de notifications --------------------------------------
   Une notification non lue se repère à sa pastille orange ET à son fond légèrement
   teinté : la couleur seule ne suffirait pas pour qui la distingue mal. */
.notif-dropdown__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.3rem;
}

.notif-badge {
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    white-space: nowrap;
}

.notif-badge--non-lu { background: var(--adm-orange); color: #fff; }
.notif-badge--lu { background: var(--adm-bg); color: var(--adm-muted); }

.notif-dropdown__item.is-unread { background: rgba(255, 130, 0, 0.05); }

/* Le badge d'état de commande réutilise .status-badge : mêmes couleurs que partout
   ailleurs dans l'application, seule la taille est réduite pour ce contexte. */
.notif-dropdown__badges .status-badge {
    font-size: 0.66rem;
    padding: 0.1rem 0.4rem;
}

/* Layout Admin */
.app-wrapper { display: flex; min-height: 100vh; min-height: 100dvh; }

.sidebar {
    width: var(--sidebar-width);
    background: linear-gradient(180deg, var(--adm-blue) 0%, var(--adm-blue-deep) 100%);
    color: #fff;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 1040;
    transition: width var(--transition);
    display: flex;
    flex-direction: column;
    /* PWA installée (standalone) : le contenu s'affiche sous l'encoche/la barre de
       statut (viewport-fit=cover). Sans ces marges, le logo et le bas du menu
       passent sous l'encoche ou la barre gestuelle et deviennent illisibles/injoignables. */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
}

.sidebar.collapsed { width: var(--sidebar-collapsed); }

.sidebar-logo {
    padding: 1.25rem;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
}

.sidebar-logo img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 50%;
    background: var(--adm-dark);
}

.sidebar-logo span {
    display: block;
    font-size: 0.7rem;
    margin-top: 0.5rem;
    opacity: 0.85;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.sidebar.collapsed .sidebar-logo span,
.sidebar.collapsed .nav-label { display: none; }

.sidebar-nav {
    flex: 1;
    min-height: 0;
    padding: 1rem 0.75rem;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.sidebar-nav::-webkit-scrollbar { width: 5px; }
.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.22);
    border-radius: 4px;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.35); }

.sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: rgba(255,255,255,0.75);
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    text-decoration: none;
    margin-bottom: 0.25rem;
    transition: all var(--transition);
    font-size: 0.9rem;
}

.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link.active {
    background: rgba(255,255,255,0.12);
    color: #fff;
}

.sidebar-nav .nav-link.active {
    border-left: 3px solid var(--adm-orange);
}

.sidebar-nav .nav-link i { font-size: 1.15rem; min-width: 1.25rem; }

.sidebar-nav .nav-link--external .nav-external-icon {
    font-size: 0.7rem;
    min-width: auto;
    opacity: 0.55;
}

.sidebar-nav .nav-link--external:hover .nav-external-icon {
    opacity: 0.9;
}

/* Onglet hors formule : grisé, cadenas et formule qui l'ouvre (lien vers Mon abonnement) */
.sidebar-nav .nav-link--locked { opacity: 0.55; }

.sidebar-nav .nav-link--locked:hover { opacity: 0.85; }

.sidebar-nav .nav-link--locked .nav-lock {
    font-size: 0.7rem;
    white-space: nowrap;
}

.sidebar-nav .nav-link--locked .nav-lock i { font-size: 0.7rem; min-width: auto; }

/* Groupe dropdown sidebar */
.sidebar-group { margin-bottom: 0.25rem; }

.sidebar-group-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
    transition: all var(--transition);
}

.sidebar-group-toggle:hover,
.sidebar-group.open .sidebar-group-toggle,
.sidebar-group.active-group .sidebar-group-toggle {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.sidebar-group.active-group .sidebar-group-toggle {
    border-left: 3px solid var(--adm-orange);
}

.sidebar-chevron {
    font-size: 0.75rem !important;
    min-width: auto !important;
    transition: transform var(--transition);
}

.sidebar-group.open .sidebar-chevron { transform: rotate(180deg); }

.sidebar-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.28s ease;
}

/* 280px ne suffisait plus pour les groupes a beaucoup d'entrees (ex. Ecommerce :
   8 liens ~= 320px) : les derniers liens etaient decoupes par l'overflow:hidden
   et donc totalement inaccessibles au clic/tap, pas seulement hors ecran.
   On relève le plafond et on ajoute un scroll de secours si un groupe grandit encore. */
.sidebar-group.open .sidebar-submenu {
    max-height: 420px;
    overflow-y: auto;
}

.sidebar-submenu .nav-link {
    font-size: 0.84rem;
    padding: 0.55rem 1rem 0.55rem 2.75rem;
    margin-bottom: 0.15rem;
}

.sidebar-submenu .nav-link.active {
    border-left: 3px solid var(--adm-orange);
    background: rgba(255, 255, 255, 0.1);
}

.sidebar.collapsed .sidebar-submenu,
.sidebar.collapsed .sidebar-chevron { display: none; }

.sidebar-footer {
    padding: 1rem 0.75rem;
    border-top: 1px solid rgba(255,255,255,0.12);
    text-align: center;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.12);
}
.sidebar-footer__tagline {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--adm-orange);
    line-height: 1.35;
    font-style: italic;
}
.sidebar-footer__copy {
    margin: 0;
    font-size: 0.6rem;
    opacity: 0.55;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.85);
}
.sidebar.collapsed .sidebar-footer__tagline,
.sidebar.collapsed .sidebar-footer__copy {
    display: none;
}

.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    transition: margin-left var(--transition);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.sidebar.collapsed + .main-content,
.main-content.sidebar-collapsed { margin-left: var(--sidebar-collapsed); }

.top-navbar {
    min-height: var(--navbar-height);
    background: var(--adm-card);
    border-bottom: 1px solid var(--adm-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    /* PWA installée : pousse la barre (et le bouton hamburger qui ouvre les menus
       déroulants) sous l'encoche/la barre de statut au lieu de "monter" derrière. */
    padding-top: env(safe-area-inset-top);
    padding-left: max(1.5rem, env(safe-area-inset-left));
    padding-right: max(1.5rem, env(safe-area-inset-right));
    position: sticky;
    top: 0;
    z-index: 1030;
}

.page-content { flex: 1; padding: 1.5rem; padding-bottom: 2rem; }

body.has-summary-bar .page-content {
    padding-bottom: calc(var(--summary-bar-height) + var(--fab-offset) + 0.5rem);
}

.page-heading {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: min(100%, 420px);
}

.page-footer {
    text-align: center;
    padding: 1rem 1.5rem 1.25rem;
    font-size: 0.78rem;
    color: var(--adm-muted);
    border-top: 1px solid var(--adm-border);
    background: linear-gradient(180deg, rgba(26,58,92,0.02) 0%, rgba(26,58,92,0.05) 100%);
}
.page-footer__brand {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem 0.5rem;
    margin-bottom: 0.35rem;
}
.page-footer__name {
    font-weight: 700;
    color: var(--adm-blue);
    letter-spacing: 0.03em;
    font-size: 0.8rem;
}
.page-footer__tagline {
    font-style: italic;
    color: var(--adm-orange);
    font-weight: 600;
}
.page-footer__dot {
    opacity: 0.4;
}
.page-footer__copy {
    margin: 0;
    font-size: 0.68rem;
    opacity: 0.75;
    letter-spacing: 0.02em;
}
.page-footer__copy a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255,130,0,0.5); }
.page-footer__copy a:hover { color: var(--adm-orange); }

/* Cards */
.stat-card, .adm-card {
    background: var(--adm-card);
    border: 1px solid var(--adm-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}

.stat-card .stat-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.stat-card .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.stat-card .stat-label {
    font-size: 0.8rem;
    color: var(--adm-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Status badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-livree { background: rgba(0,154,68,0.12); color: var(--adm-green); }
.status-expediee { background: rgba(26,58,92,0.12); color: var(--adm-blue); }
.status-annulee { background: rgba(220,53,69,0.12); color: #dc3545; }
.status-relancer { background: rgba(255,130,0,0.12); color: var(--adm-orange); }
.status-attente { background: rgba(255,193,7,0.16); color: #a17400; }
.status-confirmee { background: rgba(13,202,240,0.14); color: #0a7c92; }

/* Tabs */
.adm-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 2px solid var(--adm-border);
    padding-bottom: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

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

.adm-tabs .tab-link {
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: var(--adm-muted);
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.adm-tabs .tab-link.active {
    color: var(--adm-blue);
    border-bottom-color: var(--adm-orange);
}

.adm-tabs .tab-badge {
    background: var(--adm-orange);
    color: #fff;
    font-size: 0.65rem;
    padding: 0.15rem 0.45rem;
    border-radius: 1rem;
    font-weight: 700;
}

/* Orders list */
.order-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.75rem 1rem;
    align-items: center;
    padding: 1rem 1.25rem;
    background: var(--adm-card);
    border: 1px solid var(--adm-border);
    border-radius: var(--radius);
    margin-bottom: 0.5rem;
    transition: box-shadow var(--transition);
}

.order-item__info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-width: 0;
}

.order-item__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.order-item__actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.order-item--relance {
    grid-template-columns: 1fr auto;
}

.order-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06); }

.order-number { font-weight: 700; color: var(--adm-blue); }

/* Bottom summary bar */
.summary-bar {
    position: fixed;
    bottom: 0;
    left: var(--sidebar-width);
    right: 0;
    background: linear-gradient(135deg, var(--adm-blue) 0%, var(--adm-blue-deep) 100%);
    color: #fff;
    padding: 0.75rem 1.25rem;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    align-items: center;
    z-index: 1020;
    transition: left var(--transition);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
}

.summary-bar.sidebar-collapsed { left: var(--sidebar-collapsed); }

.summary-bar .summary-item { text-align: center; }
.summary-bar .summary-value { font-size: 1.1rem; font-weight: 700; }
.summary-bar .summary-label { font-size: 0.7rem; opacity: 0.8; text-transform: uppercase; }
.summary-bar .summary-ca .summary-value { color: var(--adm-orange); font-size: 1.35rem; }

/* FAB */
.fab-add {
    position: fixed;
    bottom: calc(var(--summary-bar-height) + 1rem);
    right: 1.25rem;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--adm-orange), #e67300);
    color: #fff;
    border: none;
    font-size: 1.5rem;
    box-shadow: 0 6px 20px rgba(255,130,0,0.4);
    cursor: pointer;
    z-index: 1030;
    transition: transform var(--transition), box-shadow var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Sans barre de resume en bas de page, le bouton se recale sur le bord. */
body:not(.has-summary-bar) .fab-add { bottom: 1.5rem; }

.fab-add:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(255,130,0,0.5);
}

/* Libelle facultatif a cote du bouton, masque sur mobile. */
.fab-add--labelled {
    width: auto;
    height: 52px;
    border-radius: 999px;
    padding: 0 1.35rem;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .fab-add--labelled { width: 56px; height: 56px; padding: 0; }
    .fab-add--labelled .fab-add__label { display: none; }
}

/* Buttons */
.btn-adm-primary {
    background: linear-gradient(135deg, var(--adm-orange), #e67300);
    color: #fff;
    border: none;
    padding: 0.65rem 1.5rem;
    border-radius: var(--radius);
    font-weight: 600;
    transition: all var(--transition);
}

.btn-adm-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(255,130,0,0.35);
    color: #fff;
}

.btn-adm-success {
    background: var(--adm-green);
    color: #fff;
    border: none;
}

.btn-adm-outline {
    background: transparent;
    border: 1px solid var(--adm-border);
    color: var(--adm-text);
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
}

/* Form fields */
.adm-field label {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.adm-field .field-icon {
    width: 28px; height: 28px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.adm-field input,
.adm-field select,
.adm-field textarea {
    border: 1px solid var(--adm-border);
    border-radius: var(--radius);
    padding: 0.65rem 0.85rem;
    width: 100%;
    background: var(--adm-card);
    color: var(--adm-text);
    font: inherit;
}

.adm-field textarea { resize: vertical; }

.adm-field input:focus,
.adm-field select:focus,
.adm-field textarea:focus {
    outline: none;
    border-color: var(--adm-orange);
    box-shadow: 0 0 0 3px rgba(255,130,0,0.15);
}

/* Neutralise le fond jaune/bleu que les navigateurs appliquent aux champs auto-remplis,
   pour que les champs restent visuellement uniformes qu'ils soient auto-remplis ou non. */
.adm-field input:-webkit-autofill,
.adm-field input:-webkit-autofill:hover,
.adm-field input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--adm-text);
    box-shadow: 0 0 0 1000px var(--adm-card) inset;
    transition: background-color 9999s ease-in-out 0s;
}

/* Progress bar */
.progress-adm {
    height: 12px;
    background: var(--adm-border);
    border-radius: 6px;
    overflow: hidden;
}

.progress-adm .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--adm-green), var(--adm-orange));
    border-radius: 6px;
    transition: width 0.6s ease;
}

/* Salary badge */
.salary-badge {
    background: linear-gradient(135deg, var(--adm-blue), var(--adm-blue-light));
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 1.5rem 2rem;
    text-align: center;
}

.salary-badge .salary-amount {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--adm-orange);
    font-family: var(--adm-font-heading, 'Playfair Display', serif);
}

/* Spinner */
.spinner-ci {
    width: 48px; height: 48px;
    border: 4px solid rgba(255,130,0,0.2);
    border-top-color: var(--adm-orange);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Tricolor band */
.tricolor-band {
    height: 4px;
    background: linear-gradient(90deg, var(--adm-orange), #fff, var(--adm-green));
    border-radius: 2px 2px 0 0;
}

/* Formulaire produit en étapes (même bandeau/boutons que la modale "Nouvelle commande"). */
.product-step__eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--adm-orange);
    margin: 0 0 0.25rem;
}
.product-form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--adm-border);
}

/* Hashtags / badges */
.ci-badge {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    border-radius: 2rem;
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(26,58,92,0.08);
    color: var(--adm-blue);
    margin: 0.15rem;
}

body:not(.has-summary-bar) .fab-add {
    bottom: 1.5rem;
}

/* Chart container */
.chart-wrap {
    position: relative;
    width: 100%;
    min-height: 220px;
}

.chart-wrap canvas {
    max-width: 100%;
}

/* Page header toolbar */
.page-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.page-toolbar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
}

@media (min-width: 576px) {
    .page-toolbar__actions { width: auto; }
}

/* Mobile user strip */
.mobile-user-strip {
    display: none;
    padding: 0.5rem 1rem;
    background: rgba(26, 58, 92, 0.05);
    border-bottom: 1px solid var(--adm-border);
    font-size: 0.8rem;
}

/* ─── Modales ─── */
.modal {
    --bs-modal-bg: var(--adm-card);
    --bs-modal-border-radius: var(--radius-lg);
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.modal-backdrop {
    background-color: rgba(15, 39, 68, 0.55);
}

.modal-dialog {
    margin: 1rem auto;
    width: calc(100% - 2rem);
    max-width: 520px;
    display: flex;
    align-items: center;
    min-height: calc(100% - 2rem);
}

.modal-dialog.adm-modal-dialog--sm {
    max-width: 420px;
}

.modal-dialog.adm-modal-dialog--lg {
    max-width: 600px;
}

.modal-dialog-centered {
    min-height: calc(100% - 2rem);
}

.modal-content.adm-modal {
    border: none;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    width: 100%;
}

.adm-modal .modal-header {
    border-bottom: 1px solid var(--adm-border);
    padding: 1.1rem 1.35rem;
    align-items: center;
}

.adm-modal .modal-title {
    font-size: 1.05rem;
    line-height: 1.35;
    margin: 0;
    flex: 1;
    padding-right: 0.5rem;
}

.adm-modal .modal-body {
    padding: 1.25rem 1.35rem;
    max-height: min(65vh, 560px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.adm-modal .modal-footer {
    border-top: 1px solid var(--adm-border);
    padding: 1rem 1.35rem;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: center;
}

.adm-modal .modal-footer .btn {
    min-height: 44px;
    min-width: 120px;
    flex: 1 1 auto;
}

.adm-modal .modal-footer .btn:only-child {
    max-width: 100%;
}

@media (min-width: 576px) {
    .modal-dialog {
        margin: 1.75rem auto;
        min-height: calc(100% - 3.5rem);
    }

    .modal-dialog-centered {
        min-height: calc(100% - 3.5rem);
    }

    .adm-modal .modal-footer {
        justify-content: flex-end;
    }

    .adm-modal .modal-footer .btn {
        flex: 0 1 auto;
    }
}

@media (max-width: 575.98px) {
    .modal-dialog {
        margin: auto;
        width: calc(100% - 1.5rem);
        max-width: none;
        min-height: 100%;
    }

    .modal-content.adm-modal {
        max-height: calc(100vh - 2rem);
        max-height: calc(100dvh - 2rem);
        display: flex;
        flex-direction: column;
    }

    .adm-modal .modal-body {
        flex: 1 1 auto;
        max-height: none;
    }
}

/* Accordéons */
.adm-accordion__item + .adm-accordion__item {
    margin-top: 1rem;
}

.adm-accordion__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1.1rem 1.25rem;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    color: inherit;
}

.adm-accordion__header .h6 {
    margin: 0;
}

.adm-accordion__chevron {
    transition: transform 0.2s ease;
    color: var(--adm-muted);
    flex-shrink: 0;
    margin-left: 0.75rem;
}

.adm-accordion__header[aria-expanded="true"] .adm-accordion__chevron {
    transform: rotate(180deg);
}

.adm-accordion__body {
    border-top: 1px solid var(--adm-border);
}

/* Tables */
.adm-table { width: 100%; border-collapse: collapse; }
.adm-table th {
    background: rgba(26,58,92,0.06);
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--adm-muted);
    white-space: nowrap;
}
.th-sortable { padding: 0; }
.th-sortable__btn,
.th-sortable__link {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    width: 100%;
    padding: 0.5rem 0.45rem;
    color: inherit;
    text-decoration: none;
    background: none;
    border: none;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    text-align: left;
}
.th-sortable__btn:hover,
.th-sortable__link:hover {
    color: var(--adm-blue);
    background: rgba(26,58,92,0.04);
}
.th-sortable__btn.is-active,
.th-sortable__link.is-active {
    color: var(--adm-blue);
    font-weight: 600;
}
.th-sortable__icon {
    font-size: 0.65rem;
    opacity: 0.45;
    flex-shrink: 0;
}
.th-sortable__btn.is-active .th-sortable__icon,
.th-sortable__link.is-active .th-sortable__icon {
    opacity: 1;
    color: var(--adm-orange);
}
.adm-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--adm-border);
    vertical-align: middle;
}

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -0.25rem;
    padding: 0 0.25rem;
}

/* Détail de commande boutique : un article par ligne, photo bien visible. */
.order-detail-row {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--adm-border);
}
.order-detail-row:last-of-type {
    border-bottom: 0;
}
.order-detail-row__photo-btn {
    position: relative;
    display: block;
    flex-shrink: 0;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: var(--radius);
    transition: opacity 0.15s ease;
}
.order-detail-row__photo-btn:hover { opacity: 0.85; }
.order-detail-row__photo {
    width: 76px;
    height: 76px;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--adm-border);
    flex-shrink: 0;
}
.order-detail-row__photo-count {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 0.2rem;
}
.order-detail-row__photo--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--adm-bg);
    color: var(--adm-muted);
    font-size: 1.4rem;
}
.order-detail-row__info {
    flex: 1;
    min-width: 0;
}
.order-detail-row__name {
    font-weight: 600;
    margin: 0;
    overflow-wrap: anywhere;
}
.order-detail-row__options {
    color: var(--adm-muted);
    font-size: 0.85rem;
    margin: 0.15rem 0 0;
}
.order-detail-row__price {
    color: var(--adm-muted);
    font-size: 0.85rem;
    margin: 0.3rem 0 0;
}
.order-detail-row__total {
    font-weight: 700;
    white-space: nowrap;
}

/* Sélecteur de produits (nouvelle commande) : vignette cliquable ouvrant un aperçu agrandi. */
.order-item-photo-btn {
    position: relative;
    display: block;
    flex-shrink: 0;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 6px;
    transition: opacity 0.15s ease;
}
.order-item-photo-btn:hover { opacity: 0.8; }
.order-item-photo-btn__img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}
.order-item-photo-btn__count {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 0.55rem;
    font-weight: 600;
    padding: 0.05rem 0.3rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

/* Page clients : tableaux lisibles, sans défilement horizontal */
.clients-page .table-fit {
    overflow-x: visible;
    margin: 0;
    padding: 0;
    width: 100%;
}
.clients-page .adm-table--compact {
    width: 100%;
}
.clients-page .adm-table--compact th,
.clients-page .adm-table--compact td {
    padding: 0.7rem 0.6rem;
    font-size: 0.95rem;
    vertical-align: middle;
}
.clients-page .adm-table--compact th {
    font-size: 0.78rem;
    padding: 0;
}
.clients-page .adm-table--compact tbody tr {
    transition: background var(--transition);
}
.clients-page .adm-table--compact tbody tr:hover {
    background: rgba(26, 58, 92, 0.035);
}
.clients-page .adm-table--compact .text-nowrap {
    white-space: nowrap;
}

/* Contenu des cellules du répertoire */
.clients-page .client-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--adm-blue);
    text-decoration: none;
}
.clients-page .client-name:hover {
    color: var(--adm-orange);
    text-decoration: underline;
}
.clients-page .cell-phone {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    white-space: nowrap;
    color: var(--adm-text);
}
.clients-page .cell-hood { color: var(--adm-muted); }

.count-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: rgba(100, 116, 139, 0.12);
    color: var(--adm-muted);
    font-weight: 600;
    font-size: 0.88rem;
}
.count-pill--active {
    background: rgba(255, 130, 0, 0.14);
    color: var(--adm-orange);
}

/* Largeurs fixes : uniquement sur grand écran. En dessous, le tableau bascule
   en cartes et toute largeur imposée empêcherait le texte de revenir à la ligne. */
@media (min-width: 768px) {
    .clients-page .adm-table--compact { table-layout: fixed; }
    .clients-page .adm-table--compact .text-truncate-cell {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 0;
    }
    .clients-page .adm-table--compact .col-rank { width: 2.5rem; }
    .clients-page .adm-table--compact .col-actions { width: 8.5rem; }
    .clients-page #clientsListTable th:nth-child(1),
    .clients-page #clientsListTable td:nth-child(1) { width: 28%; }
    .clients-page #clientsListTable th:nth-child(2),
    .clients-page #clientsListTable td:nth-child(2) { width: 21%; }
    .clients-page #clientsListTable th:nth-child(3),
    .clients-page #clientsListTable td:nth-child(3) { width: 22%; }
    .clients-page #clientsListTable th:nth-child(4),
    .clients-page #clientsListTable td:nth-child(4) { width: 9%; }
    .clients-page #clientsBilanTable th:nth-child(2),
    .clients-page #clientsBilanTable td:nth-child(2) { width: 22%; }
    .clients-page #clientsBilanTable th:nth-child(3),
    .clients-page #clientsBilanTable td:nth-child(3) { width: 14%; }
    .clients-page #clientsBilanTable th:nth-child(4),
    .clients-page #clientsBilanTable td:nth-child(4) { width: 7%; }
    .clients-page #clientsBilanTable th:nth-child(5),
    .clients-page #clientsBilanTable td:nth-child(5) { width: 7%; }
    .clients-page #clientsBilanTable th:nth-child(6),
    .clients-page #clientsBilanTable td:nth-child(6) { width: 16%; }
    .clients-page #clientsBilanTable th:nth-child(7),
    .clients-page #clientsBilanTable td:nth-child(7) { width: 14%; }
    .clients-page #clientsBilanTable th:nth-child(8),
    .clients-page #clientsBilanTable td:nth-child(8) { width: 8%; }
}

/* Le bilan porte huit colonnes : un cran en dessous pour rester lisible. */
@media (min-width: 768px) and (max-width: 1399.98px) {
    .clients-page #clientsBilanTable th,
    .clients-page #clientsBilanTable td { font-size: 0.86rem; }
}

.clients-page .adm-table--compact .quick-actions {
    gap: 0.3rem;
    flex-wrap: nowrap;
}
.clients-page .adm-table--compact .quick-actions .btn {
    padding: 0.3rem 0.5rem;
    min-height: 34px;
    font-size: 0.85rem;
}

/* Quick actions */
.quick-actions { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.quick-actions .btn {
    padding: 0.35rem 0.65rem;
    font-size: 0.8rem;
    min-height: 38px;
}

/* Touch-friendly controls */
.btn, .form-control, .adm-field input, .adm-field select {
    min-height: 44px;
}

.btn-sm { min-height: 38px; }

.top-navbar .btn-sm { min-height: 36px; }

/* ─── Responsive : tablette ─── */
@media (max-width: 991.98px) {
    .order-item:not(.order-item--relance) {
        grid-template-columns: 1fr auto;
    }

    .order-item:not(.order-item--relance) .order-item__meta {
        grid-column: 1;
        border-top: none;
        padding-top: 0;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .order-item:not(.order-item--relance) .order-item__actions {
        grid-column: 2;
        grid-row: 1 / span 2;
        border-top: none;
        padding-top: 0;
        align-self: center;
    }

    .sidebar {
        transform: translateX(-100%);
        width: min(var(--sidebar-width), 85vw);
        box-shadow: 4px 0 24px rgba(0,0,0,0.2);
    }
    .sidebar.show { transform: translateX(0); }
    .main-content { margin-left: 0 !important; }
    .summary-bar { left: 0 !important; }
    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 1035;
        backdrop-filter: blur(2px);
    }
    .sidebar-overlay.show { display: block; }
    .top-navbar {
        padding-top: env(safe-area-inset-top);
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }
    .page-content { padding: 1rem; }
    .page-heading { max-width: calc(100vw - 140px); }
    .mobile-user-strip { display: flex; align-items: center; justify-content: space-between; }
    .stat-card .stat-value { font-size: 1.25rem; }
}

/* ─── Responsive : mobile ─── */
@media (max-width: 767.98px) {
    :root {
        --summary-bar-height: 88px;
        --fab-offset: 4.5rem;
    }

    .login-card-body { padding: 1.5rem 1.25rem; }
    .login-logo { width: 72px; height: 72px; }

    .adm-card, .stat-card { padding: 1rem; }

    .order-item {
        grid-template-columns: 1fr;
        padding: 1rem;
    }

    .order-item__actions {
        justify-content: flex-end;
        padding-top: 0.5rem;
        border-top: 1px dashed var(--adm-border);
        width: 100%;
        grid-column: 1;
    }

    .order-item__meta {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        width: 100%;
        padding-top: 0.5rem;
        border-top: 1px dashed var(--adm-border);
    }

    .order-item--relance {
        grid-template-columns: 1fr;
    }

    .order-item--relance .quick-actions {
        width: 100%;
        padding-top: 0.75rem;
        border-top: 1px dashed var(--adm-border);
    }

    .order-item--relance .quick-actions .btn {
        flex: 1;
        justify-content: center;
    }

    .summary-bar .summary-value { font-size: 0.9rem; word-break: break-word; }
    .summary-bar .summary-ca .summary-value { font-size: 1.05rem; }
    .summary-bar .summary-label { font-size: 0.58rem; letter-spacing: 0.02em; }

    .salary-badge { padding: 1.25rem 1rem; }
    .salary-badge .salary-amount { font-size: 1.75rem; }

    .fab-add {
        width: 52px;
        height: 52px;
        right: 1rem;
    }

    .adm-table-cards thead { display: none; }
    .adm-table-cards tbody tr {
        display: block;
        margin-bottom: 0.75rem;
        border: 1px solid var(--adm-border);
        border-radius: var(--radius);
        padding: 0.5rem 0;
        background: var(--adm-card);
    }
    .adm-table-cards tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: 0.6rem 1rem;
        border-bottom: 1px solid var(--adm-border);
        text-align: right;
    }
    .adm-table-cards tbody td:last-child { border-bottom: none; }
    .adm-table-cards tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--adm-muted);
        text-align: left;
        flex-shrink: 0;
    }
    .adm-table-cards tbody td.text-end {
        justify-content: space-between;
    }

    .adm-table-cards tbody td .quick-actions {
        margin-left: auto;
    }

    .admin-kpi-row .col-4 {
        font-size: 0.85rem;
    }
    .admin-kpi-row .fw-bold {
        font-size: 0.9rem;
    }

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

/* ─── Responsive : petit mobile ─── */
@media (max-width: 380px) {
    .summary-bar {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        text-align: center;
    }
    .summary-bar .summary-ca {
        grid-column: 1;
        padding-top: 0.35rem;
        border-top: 1px solid rgba(255,255,255,0.15);
    }
    :root { --summary-bar-height: 110px; }
}

/* ─── Desktop large ─── */
@media (min-width: 1200px) {
    .page-content { padding: 1.75rem 2rem; }
    .page-heading { font-size: 1.25rem; max-width: 560px; }
}

/* ─── Dashboard tuiles ─── */
.dashboard-tile {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--adm-border);
    background: var(--adm-card);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    height: 100%;
    transition: transform var(--transition), box-shadow var(--transition);
}

.dashboard-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.dashboard-tile__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.dashboard-tile__label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--adm-muted);
    line-height: 1.2;
}

.dashboard-tile__value {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--adm-text);
}

.dashboard-tile__value--sm { font-size: 0.95rem; }

.dashboard-tile--primary { border-left: 4px solid var(--adm-orange); }
.dashboard-tile--primary .dashboard-tile__icon { background: rgba(255,130,0,0.15); color: var(--adm-orange); }
.dashboard-tile--primary .dashboard-tile__value { color: var(--adm-orange); }

.dashboard-tile--blue { border-left: 4px solid var(--adm-blue); }
.dashboard-tile--blue .dashboard-tile__icon { background: rgba(26,58,92,0.12); color: var(--adm-blue); }

.dashboard-tile--warning .dashboard-tile__icon { background: rgba(255,193,7,0.15); color: #e6a800; }

.dashboard-tile--gold { border-left: 4px solid var(--adm-gold); }
.dashboard-tile--gold .dashboard-tile__icon { background: rgba(197,165,114,0.2); color: var(--adm-gold); }

.dashboard-tile--green { border-left: 4px solid var(--adm-green); }
.dashboard-tile--green .dashboard-tile__icon { background: rgba(0,154,68,0.12); color: var(--adm-green); }

.dashboard-tile--orange { border-left: 4px solid var(--adm-orange); }
.dashboard-tile--orange .dashboard-tile__icon { background: rgba(255,130,0,0.12); color: var(--adm-orange); }

.dashboard-tile--danger { border-left: 4px solid #dc3545; }
.dashboard-tile--danger .dashboard-tile__icon { background: rgba(220,53,69,0.12); color: #dc3545; }

.dashboard-tile--neutral .dashboard-tile__icon { background: rgba(100,116,139,0.12); color: var(--adm-muted); }

.dashboard-tile--progress { border-left: 4px solid var(--adm-blue); }
.dashboard-tile--progress .dashboard-tile__icon { background: rgba(26,58,92,0.12); color: var(--adm-blue); }

.dashboard-tile--salary {
    background: linear-gradient(135deg, var(--adm-blue), var(--adm-blue-light));
    border: none;
    color: #fff;
}
.dashboard-tile--salary .dashboard-tile__label { color: rgba(255,255,255,0.75); }
.dashboard-tile--salary .dashboard-tile__value { color: var(--adm-orange); }
.dashboard-tile--salary .dashboard-tile__icon { background: rgba(255,255,255,0.15); color: #fff; }

.chart-wrap--doughnut { min-height: 260px; }

/* ─── Select2 ─── */
.filter-panel .select2-container--bootstrap-5 {
    width: 100% !important;
}

.filter-panel .select2-container--bootstrap-5 .select2-selection--single {
    position: relative;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.filter-panel .select2-container--bootstrap-5 .select2-selection {
    min-height: 44px;
    border-color: var(--adm-border);
    border-radius: var(--radius);
    padding: 0;
}

.filter-panel .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    line-height: 1.4;
    color: var(--adm-text);
    padding: 0.5rem 2.75rem 0.5rem 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.filter-panel .select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    width: 1.5rem;
    height: auto;
}

.filter-panel .select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear {
    position: absolute;
    top: 50%;
    right: 2rem;
    transform: translateY(-50%);
    margin: 0;
    padding: 0 0.15rem;
    line-height: 1;
    font-size: 1.1rem;
    color: var(--adm-muted);
    z-index: 1;
}

.filter-panel .select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear:hover {
    color: var(--adm-orange);
}

.filter-panel .select2-container--bootstrap-5.select2-container--focus .select2-selection,
.filter-panel .select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: var(--adm-orange);
    box-shadow: 0 0 0 3px rgba(255, 130, 0, 0.15);
}

.filter-panel .adm-field {
    min-width: 0;
}

.select2-container--bootstrap-5 .select2-dropdown {
    border-color: var(--adm-border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.select2-container--bootstrap-5 .select2-results__option--highlighted {
    background-color: var(--adm-orange) !important;
}

.audit-changes li { margin-bottom: 0.15rem; }
.audit-details { max-width: 360px; word-break: break-word; }
.audit-table code { font-size: 0.8rem; background: rgba(26,58,92,0.06); padding: 0.1rem 0.35rem; border-radius: 4px; }

@media (max-width: 767.98px) {
    .dashboard-tile { padding: 0.85rem; gap: 0.65rem; }
    .dashboard-tile__icon { width: 38px; height: 38px; font-size: 1rem; }
    .dashboard-tile__value { font-size: 1rem; }
}

/* Origine des commandes : Shopify / Autre */
.source-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.source-shopify { background: rgba(26,58,92,0.1); color: var(--adm-blue); }
.source-autre { background: rgba(197,165,114,0.22); color: #8a6d35; }
.source-boutique { background: rgba(255,130,0,0.14); color: var(--adm-orange); }

/* Canaux publicitaires : couleurs de marque de chaque plateforme */
.ad-channel-facebook { background: rgba(24,119,242,0.12); color: #1877f2; }
.ad-channel-instagram { background: rgba(225,48,108,0.12); color: #e1306c; }
.ad-channel-whatsapp { background: rgba(37,211,102,0.14); color: #128c3e; }
.ad-channel-tiktok { background: rgba(0,0,0,0.08); color: #000; }
.ad-channel-google { background: rgba(66,133,244,0.12); color: #4285f4; }
.ad-channel-autre { background: rgba(100,116,139,0.14); color: #475569; }

/* Sélecteur segmenté : la pastille glisse sous l'option active. */
.source-toggle {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 5px;
    background: rgba(26, 58, 92, 0.06);
    border: 1px solid var(--adm-border);
    border-radius: 999px;
}

.source-toggle__thumb {
    position: absolute;
    top: 5px;
    left: 5px;
    width: calc(50% - 5px);
    height: calc(100% - 10px);
    border-radius: 999px;
    background: linear-gradient(135deg, var(--adm-orange), #ff9d33);
    box-shadow: 0 6px 16px rgba(255, 130, 0, 0.35);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.source-toggle[data-active="1"] .source-toggle__thumb { transform: translateX(100%); }

.source-toggle__btn {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.6rem 0.75rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--adm-muted);
    font-family: inherit;
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: color 0.2s ease;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
}

.source-toggle__btn:hover:not(.is-active) { color: var(--adm-text); }

.source-toggle__btn:focus-visible {
    outline: 2px solid var(--adm-blue);
    outline-offset: 2px;
}

.source-toggle__btn.is-active { color: #fff; }

.source-toggle__btn i { font-size: 1.05rem; }

@media (prefers-reduced-motion: reduce) {
    .source-toggle__thumb { transition: none; }
}

/* Onglet action (fiche du jour) */
.adm-tabs .tab-link--action {
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
}

.adm-tabs .tab-link--action:hover {
    color: var(--adm-orange);
    border-bottom-color: var(--adm-border);
}

/* Relances en deux colonnes */
.relance-column__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    margin-bottom: 0.75rem;
    background: var(--adm-card);
    border: 1px solid var(--adm-border);
    border-left: 4px solid var(--adm-orange);
    border-radius: var(--radius);
}

/* Fiche « État de commande jour » */
.day-report__group {
    border: 1px solid var(--adm-border);
    border-radius: var(--radius);
    padding: 0.75rem 0.9rem;
    margin-bottom: 0.75rem;
}

.day-report__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.day-report__numbers {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.day-report__number {
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--adm-blue);
    background: rgba(26,58,92,0.07);
    border-radius: 6px;
    padding: 0.15rem 0.45rem;
}

.day-report__totals {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    text-align: center;
    border-top: 2px solid var(--adm-blue);
    padding-top: 0.75rem;
    margin-top: 0.5rem;
}

.day-report__ca { color: var(--adm-orange); font-size: 1.15rem; }

/* Formulaire client : vérification du numéro */
.client-form__phone .btn { white-space: nowrap; }

.client-form__phone .form-control {
    border: 1px solid var(--adm-border);
    border-radius: var(--radius) 0 0 var(--radius);
    padding: 0.65rem 0.85rem;
}

.client-form__phone .btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; }

.client-form__feedback { margin-bottom: 0.85rem; }

/* Rattachement d'un client par son numéro de téléphone */
.client-picker { margin-bottom: 1rem; }

.client-picker__panel {
    padding: 0.9rem;
    border: 1px dashed var(--adm-orange);
    border-radius: var(--radius);
    background: rgba(255, 130, 0, 0.04);
}

.client-picker__panel .adm-field:last-of-type { margin-bottom: 0.75rem; }

.client-picker__panel .input-group .form-control {
    border: 1px solid var(--adm-border);
    border-right: none;
    border-radius: var(--radius) 0 0 var(--radius);
    padding: 0.65rem 0.85rem;
    background: var(--adm-card);
}

.client-picker__panel .input-group .btn {
    border-radius: 0 var(--radius) var(--radius) 0;
    white-space: nowrap;
}

.client-picker__feedback { margin-bottom: 0.6rem; }

/* Résumé du client rattaché, affiché à la place des champs quand le sélecteur s'ouvre en
   modale : une petite carte (icône + nom + téléphone) plutôt que du texte brut, et le
   bouton d'édition à côté, jamais réécrit par le script (cf. client-picker.js). */
.client-picker__summary-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.client-picker__summary {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.6rem 0.8rem;
    border-radius: var(--radius);
    background: var(--adm-bg);
}
.client-picker__summary > i {
    font-size: 1.4rem;
    color: var(--adm-orange);
    flex: 0 0 auto;
}
.client-picker__summary-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}
.client-picker__summary-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.client-picker__summary-phone {
    font-size: 0.8rem;
    color: var(--adm-muted, #64748b);
}

/* Select2 aligné sur les champs de formulaire */
.select2-container--bootstrap-5 .select2-selection {
    min-height: 46px;
    border-color: var(--adm-border);
    border-radius: var(--radius);
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    line-height: 1.6;
    padding-top: 0.35rem;
}

.select2-container { z-index: 1080; }

@media (max-width: 575.98px) {
    .day-report__totals { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Répertoire clients sur mobile : chaque ligne devient une carte dont les
   éléments passent à la ligne, libellé à gauche et valeur à droite.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {

    /* Aucune largeur imposée : sans cela le texte ne peut pas revenir à la ligne. */
    .clients-page .adm-table--compact {
        table-layout: auto;
        display: block;
    }
    .clients-page .adm-table--compact tbody { display: block; }

    .clients-page .adm-table--compact .text-truncate-cell,
    .clients-page .adm-table--compact .text-nowrap {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        max-width: none;
    }

    .clients-page .adm-table-cards tbody tr {
        padding: 0;
        margin-bottom: 0.85rem;
        border: 1px solid var(--adm-border);
        border-radius: var(--radius);
        box-shadow: 0 1px 3px rgba(26, 58, 92, 0.06);
        overflow: hidden;
    }

    .clients-page .adm-table-cards tbody td {
        padding: 0.7rem 0.9rem;
        font-size: 0.95rem;
        gap: 0.75rem;
        align-items: flex-start;
        word-break: break-word;
    }

    .clients-page .adm-table-cards tbody td::before {
        font-size: 0.72rem;
        padding-top: 0.1rem;
        min-width: 5.5rem;
    }

    /* En-tête de carte : le nom du client, sans libellé et sur toute la largeur. */
    .clients-page .adm-table-cards tbody td.cell-client {
        display: block;
        text-align: left;
        background: rgba(26, 58, 92, 0.05);
        border-bottom: 1px solid var(--adm-border);
        padding: 0.8rem 0.9rem;
    }
    .clients-page .adm-table-cards tbody td.cell-client::before { display: none; }
    .clients-page .adm-table-cards tbody td.cell-client .client-name {
        font-size: 1.08rem;
        line-height: 1.35;
    }

    .clients-page .adm-table-cards tbody td.cell-phone {
        font-size: 1rem;
        font-weight: 600;
    }

    /* Actions : boutons répartis sur toute la largeur, confortables au doigt. */
    .clients-page .adm-table-cards tbody td.cell-actions {
        display: block;
        padding: 0.6rem 0.9rem 0.75rem;
        background: rgba(100, 116, 139, 0.04);
    }
    .clients-page .adm-table-cards tbody td.cell-actions::before { display: none; }
    .clients-page .adm-table-cards tbody td.cell-actions .quick-actions {
        margin-left: 0;
        justify-content: stretch;
        gap: 0.5rem;
    }
    .clients-page .adm-table-cards tbody td.cell-actions .quick-actions .btn {
        flex: 1;
        min-height: 42px;
        font-size: 1rem;
    }

    /* Ligne « aucun client » : elle ne doit pas prendre l'allure d'une carte. */
    .clients-page .adm-table-cards tbody tr.row-empty {
        border: none;
        box-shadow: none;
        background: transparent;
    }
    .clients-page .adm-table-cards tbody td[colspan] {
        display: block;
        text-align: center;
    }
    .clients-page .adm-table-cards tbody td[colspan]::before { display: none; }

    /* Bilan par client : le rang reste en pastille discrète. */
    .clients-page #clientsBilanTable tbody td[data-label="#"] {
        background: rgba(26, 58, 92, 0.05);
        border-bottom: 1px solid var(--adm-border);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Adaptation mobile — reglages transverses a toutes les pages
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {

    /* --- Lisibilite des tableaux en mode carte, sur toutes les pages ------- */
    .adm-table-cards tbody td {
        font-size: 0.95rem;
        align-items: flex-start;
        word-break: break-word;
    }
    .adm-table-cards tbody td::before {
        min-width: 6rem;
        padding-top: 0.1rem;
    }
    .adm-table-cards tbody tr {
        box-shadow: 0 1px 3px rgba(26, 58, 92, 0.06);
        overflow: hidden;
        padding: 0;
    }
    /* Les boutons d'action prennent toute la largeur : cible confortable. */
    .adm-table-cards tbody td .quick-actions {
        margin-left: 0;
        width: 100%;
        gap: 0.4rem;
    }
    .adm-table-cards tbody td .quick-actions .btn {
        flex: 1;
        min-height: 40px;
        justify-content: center;
    }

    /* --- Journal d'audit : la largeur figee debordait sous 400 px ---------- */
    .audit-details { max-width: 100%; }
    .audit-table code { word-break: break-all; }

    /* --- Graphiques : plus bas, sinon ils mangent tout l'ecran ------------- */
    .chart-wrap { min-height: 200px; }
    .chart-wrap--doughnut { min-height: 210px; }
    /* Neutralise les hauteurs ecrites en style inline dans les vues. */
    .chart-wrap[style*="min-height"] { min-height: 210px !important; }

    /* --- Formulaires de filtres : moins de hauteur perdue ------------------ */
    .filter-panel .adm-field { margin-bottom: 0.5rem; }
    .adm-field label { margin-bottom: 0.2rem; }

    /* --- En-tete de page --------------------------------------------------- */
    .page-heading {
        font-size: 1.05rem;
        line-height: 1.3;
        max-width: 100%;
    }
    .page-toolbar { gap: 0.6rem; margin-bottom: 1rem; }
    .page-toolbar__actions { width: 100%; }
    .page-toolbar__actions .btn { width: 100%; justify-content: center; }

    /* --- Cartes de statistiques -------------------------------------------- */
    .stat-card .stat-value { font-size: 1.15rem; word-break: break-word; }
    .stat-card .stat-label { font-size: 0.7rem; }

    /* --- Titres de section -------------------------------------------------- */
    .adm-card h2.h6, .adm-card h3.h6 { font-size: 0.95rem; }

    /* --- Pagination : evite le debordement horizontal ---------------------- */
    .pagination { flex-wrap: wrap; justify-content: center; gap: 0.15rem; }
    .page-link { padding: 0.4rem 0.65rem; font-size: 0.85rem; }

    /* --- Listes de definitions (fiche client, profil) ---------------------- */
    dl.row dt, dl.row dd { word-break: break-word; }
}

/* Tres petits ecrans : on relache encore les libelles des cartes. */
@media (max-width: 400px) {
    .adm-table-cards tbody td {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.15rem;
        text-align: left !important;
    }
    .adm-table-cards tbody td::before { min-width: 0; }
    .adm-table-cards tbody td.text-end { text-align: left !important; }
    .page-content { padding: 1rem 0.75rem; }
    .adm-card, .stat-card { padding: 0.85rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Mise en page fluide — la page epouse la largeur de l'ecran
   ═══════════════════════════════════════════════════════════════════════════
   Pas d'overflow-x sur body : la barre superieure est en position sticky et
   serait cassee. On traite donc les causes reelles de debordement.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Un enfant de flex ou de grid refuse de retrecir sous sa taille de contenu
   tant qu'on ne lui donne pas min-width: 0. C'est la cause la plus frequente
   de debordement horizontal sur mobile. */
.app-wrapper,
.main-content,
.page-content,
.order-item > *,
.summary-bar > *,
.page-toolbar > *,
.adm-tabs > * { min-width: 0; }

.main-content { max-width: 100%; }

/* Rien de visuel ne depasse son conteneur. */
img, canvas, svg, video, iframe, embed, object { max-width: 100%; }
img, canvas, svg { height: auto; }
table { max-width: 100%; }

/* Les longues chaines insecables (numeros, courriels, jetons) reviennent
   a la ligne au lieu d'elargir la page. */
.order-number,
.summary-value,
.cell-phone,
.audit-details,
.audit-table code,
dl.row dd { overflow-wrap: anywhere; }

@media (max-width: 991.98px) {
    /* Les marges negatives du conteneur defilant ajoutaient 0.5rem de largeur. */
    .table-scroll { margin: 0; padding: 0; }

    /* Le contenu ne peut jamais depasser la fenetre. */
    .page-content { max-width: 100vw; }
    .adm-card, .stat-card { max-width: 100%; }

    /* Modales : toujours dans l'ecran, quelle que soit sa largeur. */
    .modal-dialog { max-width: calc(100vw - 1.5rem); }

    /* Select2 s'ouvre parfois plus large que son champ. */
    .select2-container { max-width: 100%; }
    .select2-dropdown { max-width: calc(100vw - 1.5rem); }
}

@media (max-width: 767.98px) {
    /* Les tableaux passent en cartes : plus aucun defilement horizontal utile. */
    .table-scroll, .table-fit { overflow-x: visible; }

    /* Grilles de tuiles : deux colonnes maximum, sinon illisible. */
    .dashboard-tiles .row > [class*="col-"] { min-width: 0; }
    .dashboard-tile { min-width: 0; }
    .dashboard-tile__body { min-width: 0; }
    .dashboard-tile__value { overflow-wrap: anywhere; }

    /* Barre de resume : trois colonnes serrees, on autorise la coupure. */
    .summary-bar { padding-left: 0.75rem; padding-right: 0.75rem; }
    .summary-bar .summary-value { overflow-wrap: anywhere; }
}

/* ─── Boutique (vitrine publique) ─── */
.shop-page {
    background: var(--adm-bg);
    color: var(--adm-text);
    margin: 0;
    min-height: 100vh;
}

.shop-banner {
    background: #000;
    color: #fff;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.55rem 1rem;
    position: relative;
    min-height: 1.9em;
}
.shop-banner__item {
    display: none;
    opacity: 0;
    position: relative;
    animation: shopBannerFade 0.4s ease forwards;
}
.shop-banner__item.active {
    display: inline-block;
    overflow: hidden;
}
@keyframes shopBannerFade {
    from { opacity: 0; transform: translateY(2px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Effet scintillant : un reflet balaie le texte du bandeau actif pour accrocher l'œil. */
.shop-banner__item.active::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255,255,255,0.75), transparent);
    animation: shopBannerShimmer 2.8s ease-in-out infinite;
    pointer-events: none;
}
@keyframes shopBannerShimmer {
    0% { left: -60%; }
    45%, 100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
    .shop-banner__item.active::after { animation: none; }
}

.shop-banner__dots {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.35rem;
}
.shop-banner__dots button {
    width: 7px;
    height: 7px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.shop-banner__dots button:hover { background: rgba(255,255,255,0.6); }
.shop-banner__dots button.active {
    background: var(--adm-orange);
    transform: scale(1.25);
}

.shop-header {
    background: rgba(0,0,0,0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    position: sticky;
    top: 0;
    z-index: 1030;
    transition: box-shadow 0.25s ease, background-color 0.25s ease;
}
.shop-header.is-scrolled {
    background: #000;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

/* Une seule ligne : logo — catégories (défilables) — recherche réduite — panier.
   width:100% est indispensable : un conteneur flex en width:auto peut s'étendre
   au-delà du viewport pour accueillir ses enfants au lieu de les faire rétrécir. */
.shop-header__row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
    gap: 0.85rem;
    padding: 0.7rem 1.25rem;
    position: relative;
}

.shop-header__nav-toggle { display: none; }

.shop-header__logo {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    color: var(--adm-blue);
    font-family: var(--adm-font-heading, 'Playfair Display', Georgia, serif);
    font-weight: 700;
    font-size: 1.05rem;
    flex-shrink: 0;
}
.shop-header .shop-header__logo { color: #fff; }

.shop-header__logo-accent { color: var(--adm-orange); }

.shop-header__logo img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--adm-dark);
    flex-shrink: 0;
}

.shop-header__nav {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.shop-header__nav::-webkit-scrollbar { display: none; }

.shop-header__nav a {
    color: #fff;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    padding: 0.4rem 0.65rem;
    border-radius: 6px;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.shop-header__nav a:hover,
.shop-header__nav a.active {
    color: var(--adm-orange);
    background: #1a1a1a;
}

.shop-header__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.shop-header__search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.shop-header__icon-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    border: none;
    background: none;
    flex-shrink: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.shop-header__icon-btn:hover { background: #1a1a1a; color: var(--adm-orange); }

/* Barre de recherche réduite : masquée par défaut, s'ouvre sur la même ligne au clic. */
.shop-header__search-expand {
    display: flex;
    align-items: center;
    width: 0;
    opacity: 0;
    overflow: hidden;
    margin-left: 0;
    background: #fff;
    border-radius: 999px;
    transition: width 0.25s ease, opacity 0.2s ease, margin-left 0.25s ease;
}
.shop-header__search-wrap.is-open .shop-header__search-expand {
    width: 200px;
    opacity: 1;
    margin-left: 0.5rem;
}
.shop-header__search-expand input {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    outline: none;
    padding: 0.5rem 0.9rem;
    font-size: 0.85rem;
}

@media (max-width: 767.98px) {
    .shop-header__row { padding: 0.6rem 0.85rem; gap: 0.5rem; }
    .shop-header .shop-header__logo span { display: none; }
    .shop-header__search-wrap.is-open .shop-header__search-expand { width: 150px; }

    /* Catégories cachées derrière le bouton menu, affichées en liste verticale au clic. */
    .shop-header__nav-toggle { display: flex; order: 2; }
    .shop-header__actions { order: 3; }

    .shop-header__nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0.15rem;
        max-height: calc(100vh - 60px);
        overflow-y: auto;
        background: #000;
        border-top: 1px solid rgba(255,255,255,0.08);
        border-bottom: 1px solid rgba(255,255,255,0.08);
        padding: 0.5rem 0.85rem 0.75rem;
        box-shadow: 0 12px 24px rgba(0,0,0,0.35);
    }
    .shop-header__nav.is-open { display: flex; }
    .shop-header__nav a {
        width: 100%;
        padding: 0.65rem 0.75rem;
        font-size: 0.9rem;
    }
}

.shop-flash {
    max-width: 1200px;
    margin: 1rem auto 0;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius);
    font-size: 0.9rem;
}

.shop-flash--success { background: rgba(0, 154, 68, 0.12); color: var(--adm-green); }
.shop-flash--error { background: rgba(220, 53, 69, 0.12); color: #dc3545; }

/* Confirmation de commande : le téléchargement du reçu est l'action principale de la page. */
.shop-receipt-cta {
    text-align: center;
    padding: 2rem 1.5rem;
    border: 1px dashed var(--adm-orange);
    background: rgba(255, 130, 0, 0.05);
}
.shop-receipt-cta i {
    font-size: 2.25rem;
    color: var(--adm-orange);
    display: block;
    margin-bottom: 0.5rem;
}
.shop-receipt-cta .btn-adm-primary {
    padding: 0.9rem 2.5rem;
    font-size: 1.05rem;
    box-shadow: 0 8px 22px rgba(255, 130, 0, 0.3);
}
.shop-receipt-cta__back {
    color: var(--adm-muted);
    font-size: 0.9rem;
    text-decoration: none;
}
.shop-receipt-cta__back:hover { color: var(--adm-text); }

.shop-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem;
}

.shop-footer {
    background: #000;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: 3rem;
    padding: 3rem 1.5rem 0;
}

.shop-footer__grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 2rem;
    padding-bottom: 2rem;
}

.shop-footer .shop-header__logo { color: #fff; }
.shop-footer__brand-col .shop-header__logo { margin-bottom: 0.6rem; }

.shop-footer__tagline {
    color: rgba(255,255,255,0.6);
    font-size: 0.88rem;
    max-width: 320px;
    margin: 0;
}

.shop-footer__col h3 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.45);
    margin-bottom: 0.9rem;
}
.shop-footer__col a {
    display: block;
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
    padding: 0.25rem 0.4rem;
    margin-left: -0.4rem;
    border-radius: 6px;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.shop-footer__col a:hover { color: var(--adm-orange); background: #1a1a1a; }

.shop-footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 1.25rem 0;
    text-align: center;
}

.shop-footer__copy {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.45);
    margin: 0;
}
.shop-footer__copy a { color: rgba(255,255,255,0.7); text-decoration: underline; text-decoration-color: rgba(255,130,0,0.5); }
.shop-footer__copy a:hover { color: var(--adm-orange); }

@media (max-width: 767.98px) {
    .shop-footer__grid { grid-template-columns: 1fr 1fr; }
    .shop-footer__brand-col { grid-column: 1 / -1; }
}

/* Animations d'apparition au défilement */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
    opacity: 1;
    transform: none;
}
.shop-product-grid.reveal > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.shop-product-grid.reveal.is-visible > * {
    opacity: 1;
    transform: none;
}
.shop-product-grid.reveal.is-visible > *:nth-child(1) { transition-delay: 0.03s; }
.shop-product-grid.reveal.is-visible > *:nth-child(2) { transition-delay: 0.08s; }
.shop-product-grid.reveal.is-visible > *:nth-child(3) { transition-delay: 0.13s; }
.shop-product-grid.reveal.is-visible > *:nth-child(4) { transition-delay: 0.18s; }
.shop-product-grid.reveal.is-visible > *:nth-child(5) { transition-delay: 0.23s; }
.shop-product-grid.reveal.is-visible > *:nth-child(6) { transition-delay: 0.28s; }
.shop-product-grid.reveal.is-visible > *:nth-child(n+7) { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
    .reveal, .shop-product-grid.reveal > * {
        transition: none;
        opacity: 1;
        transform: none;
    }
}

/* Section héro (page d'accueil boutique) */
.shop-hero {
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding: 4.5rem 1.5rem;
    background: linear-gradient(135deg, var(--adm-blue) 0%, var(--adm-blue-light) 100%);
    color: #fff;
    text-align: center;
    overflow: hidden;
}

.shop-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--adm-watermark, none) center/320px no-repeat;
    opacity: 0.07;
}

.shop-hero--category {
    background-size: cover;
    background-position: center;
    padding: 3.5rem 1.5rem;
}
.shop-hero--category::before { display: none; }

.shop-hero__content {
    position: relative;
    z-index: 1;
    max-width: 640px;
    margin: 0 auto;
    animation: shopHeroFadeIn 0.9s ease both;
}

.shop-hero__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--adm-orange);
    margin-bottom: 0.75rem;
}

.shop-hero__title {
    font-family: var(--adm-font-heading, 'Playfair Display', Georgia, serif);
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 700;
    margin-bottom: 0.85rem;
}

.shop-hero__subtitle {
    font-size: 1.05rem;
    opacity: 0.9;
    margin-bottom: 1.75rem;
}

.shop-hero .btn-adm-primary {
    padding: 0.75rem 1.75rem;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

@keyframes shopHeroFadeIn {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 575.98px) {
    .shop-hero { padding: 3rem 1.25rem; }
}

/* Section catégorie */
.shop-category-section {
    margin-bottom: 2.5rem;
}

.shop-category-section--bestseller {
    background: linear-gradient(180deg, rgba(255,130,0,0.08) 0%, rgba(255,130,0,0) 100%);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.5rem;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    width: calc(100% + 3rem);
}
@media (max-width: 575.98px) {
    .shop-category-section--bestseller { padding: 1.25rem 1rem; margin-left: -1rem; margin-right: -1rem; width: calc(100% + 2rem); }
}

.shop-category-section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.shop-category-section__title {
    font-family: var(--adm-font-heading, 'Playfair Display', Georgia, serif);
    font-size: 1.5rem;
    margin: 0 0 0.25rem;
    color: var(--adm-blue);
}

.shop-category-section__tagline {
    color: var(--adm-muted);
    margin: 0;
    font-size: 0.95rem;
}

.shop-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem;
}

/* Carte produit — socle commun à tous les types d'affichage */
.shop-card {
    background: var(--adm-card);
    border: 1px solid var(--adm-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform var(--transition), box-shadow var(--transition);
}

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

.shop-card__media {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--adm-bg);
    overflow: hidden;
    text-decoration: none;
}

.shop-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    transition: opacity 0.25s ease, transform 0.4s ease;
}

.shop-card:hover .shop-card__media img.shop-card__img--base,
.shop-card:hover .shop-card__media > img:only-child {
    transform: scale(1.05);
}

.shop-card__media img.shop-card__img--hover { opacity: 0; }
.shop-card__media:hover img.shop-card__img--hover,
.shop-card__media.is-flipped img.shop-card__img--hover { opacity: 1; }
.shop-card__media:hover img.shop-card__img--base,
.shop-card__media.is-flipped img.shop-card__img--base { opacity: 0; }

.shop-card__media--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--adm-muted);
    font-size: 2rem;
}

.shop-card__badges {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    z-index: 2;
}

.shop-card__badge {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    color: #fff;
}

.shop-card__badge--promo { background: var(--adm-orange); }
.shop-card__badge--out { background: #6c757d; }
.shop-card__badge--new { background: var(--adm-green); }
.shop-card__badge--bestseller {
    background: var(--adm-blue);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.shop-card__badge--bestseller i { color: #ffd166; }

.shop-card__body {
    padding: 0.9rem 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
}

.shop-card__title-link {
    text-decoration: none;
    color: inherit;
}
.shop-card__title-link:hover .shop-card__title { color: var(--adm-orange); }

.shop-card__title {
    font-size: 0.92rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.35;
    transition: color var(--transition);
}

.shop-card__price {
    margin-top: auto;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.shop-card__price-current {
    font-weight: 700;
    color: var(--adm-blue);
}

.shop-card__price-old {
    font-size: 0.8rem;
    color: var(--adm-muted);
    text-decoration: line-through;
}

/* Bouton "Commander" directement sur la carte — mène à la fiche produit (lien, pas modale) */
.shop-card__add-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: none;
    border-radius: var(--radius);
    background: var(--adm-blue);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.55rem 0.75rem;
    text-decoration: none;
    transition: background-color var(--transition);
}
.shop-card__add-btn:hover:not(.disabled):not(:disabled) { background: var(--adm-orange); color: #fff; }
.shop-card__add-btn:disabled,
.shop-card__add-btn.disabled { background: var(--adm-muted); opacity: 0.6; cursor: not-allowed; pointer-events: none; }

/* Variante bannière large */
.shop-card--banner {
    flex-direction: row;
    align-items: stretch;
}

.shop-card--banner .shop-card__media {
    aspect-ratio: auto;
    flex: 1 1 55%;
}

.shop-card--banner .shop-card__body {
    flex: 1 1 45%;
    justify-content: center;
    padding: 1.75rem;
    gap: 0.75rem;
}

.shop-card--banner .shop-card__title {
    font-family: var(--adm-font-heading, 'Playfair Display', Georgia, serif);
    font-size: 1.5rem;
}

@media (max-width: 767.98px) {
    .shop-card--banner { flex-direction: column; }
}

/* Variante carrousel */
.shop-card__carousel-track {
    display: flex;
    height: 100%;
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.shop-card__carousel-track::-webkit-scrollbar { display: none; }

.shop-card__carousel-track img {
    flex: 0 0 100%;
    scroll-snap-align: start;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shop-card__carousel-dots {
    position: absolute;
    bottom: 0.6rem;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 0.3rem;
    z-index: 2;
}

.shop-card__carousel-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.6);
}

/* Variante vidéo */
.shop-card__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 39, 68, 0.25);
    color: #fff;
    font-size: 2.5rem;
    z-index: 2;
}

/* Fiche produit */
.shop-product-gallery__main {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--adm-bg);
    margin-bottom: 0.75rem;
    cursor: zoom-in;
}
.shop-product-gallery__main img,
.shop-product-gallery__main video { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.2s ease; }

.shop-product-gallery__counter {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    background: rgba(15, 39, 68, 0.72);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    z-index: 2;
}

.shop-product-gallery__zoom {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: rgba(255,255,255,0.85);
    color: var(--adm-blue);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    opacity: 0;
    transition: opacity var(--transition);
}
.shop-product-gallery__main:hover .shop-product-gallery__zoom { opacity: 1; }

.shop-product-gallery__thumbs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.shop-product-gallery__thumb {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: var(--radius);
    border: 2px solid transparent;
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
}
.shop-product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-product-gallery__thumb.active { border-color: var(--adm-orange); }
.shop-product-gallery__thumb-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 39, 68, 0.4);
    color: #fff;
    font-size: 1.1rem;
}

/* Sélecteur de quantité +/- */
.shop-qty-stepper {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--adm-border);
    border-radius: var(--radius);
    overflow: hidden;
}
.shop-qty-stepper__btn {
    border: none;
    background: var(--adm-bg);
    color: var(--adm-blue);
    font-size: 1.1rem;
    font-weight: 700;
    width: 36px;
    flex-shrink: 0;
}
.shop-qty-stepper__btn:hover { background: var(--adm-border); }
.shop-qty-stepper input[type="number"] {
    border: none;
    border-left: 1px solid var(--adm-border);
    border-right: 1px solid var(--adm-border);
    text-align: center;
    width: 100%;
    min-width: 0;
    -moz-appearance: textfield;
}
.shop-qty-stepper input[type="number"]::-webkit-outer-spin-button,
.shop-qty-stepper input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.shop-review-card {
    background: var(--adm-card);
    border: 1px solid var(--adm-border);
    border-radius: var(--radius-lg);
    padding: 1rem 1.1rem;
    height: 100%;
}
.shop-review-card__stars { color: var(--adm-orange); font-size: 0.85rem; }
.shop-review-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}
.shop-review-card__date { font-size: 0.75rem; color: var(--adm-muted); white-space: nowrap; }

/* Fiche produit : fil d'ariane */
.shop-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: var(--adm-muted);
    margin-bottom: 1rem;
}
.shop-breadcrumb a { color: var(--adm-muted); text-decoration: none; transition: color var(--transition); }
.shop-breadcrumb a:hover { color: var(--adm-orange); }
.shop-breadcrumb__current { color: var(--adm-text); font-weight: 600; overflow-wrap: anywhere; }

/* Fiche produit : pastille catégorie + prix mis en avant */
.shop-product-category-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: rgba(255,130,0,0.1);
    color: var(--adm-orange);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    margin-bottom: 0.6rem;
}
.shop-product-category-pill:hover { background: rgba(255,130,0,0.18); color: var(--adm-orange); }

.shop-product-title { font-size: 1.6rem; line-height: 1.25; margin-bottom: 0.4rem; }

.shop-product-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--adm-bg);
    border-radius: 999px;
    padding: 0.3rem 0.7rem;
    margin-bottom: 0.75rem;
}

.shop-product-price-block {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0.5rem 0 0.75rem;
}
.shop-product-price-block .shop-card__price-current { font-size: 1.85rem; font-weight: 700; color: var(--adm-blue); }
.shop-product-price-block .shop-card__price-old { font-size: 1.1rem; }
.shop-product-discount-badge {
    background: var(--adm-green);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
}

/* Fiche produit : carte unique « identité + commande ».
   Le client voit le prix et le formulaire d'un seul coup d'œil, sans défiler. */
.shop-order-card {
    padding-top: 0;
}
.shop-order-card__head {
    padding-top: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--adm-border);
}
.shop-order-card__head .shop-product-title { margin-bottom: 0.3rem; }
.shop-order-card__head .shop-product-price-block { margin-top: 0.5rem; }
.shop-order-card__head .shop-product-actions { margin-top: 0.55rem; }
.shop-order-card hr { margin: 1rem 0; opacity: 0.5; }

/* Barre d'action fixe en bas d'écran (mobile uniquement) : prix + accès direct au
   formulaire, qui se trouve sinon à deux écrans de défilement. */
.shop-sticky-cta {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem calc(0.6rem + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--adm-border);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.09);
    transition: transform 0.25s ease, opacity 0.25s ease;
}
.shop-sticky-cta.is-hidden {
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
}
.shop-sticky-cta__amount {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--adm-blue);
    line-height: 1.1;
}
.shop-sticky-cta__old {
    margin-left: 0.4rem;
    font-size: 0.85rem;
    color: var(--adm-muted);
    text-decoration: line-through;
}
.shop-sticky-cta__btn {
    flex: 0 0 auto;
    padding-inline: 1.4rem;
    white-space: nowrap;
}
@media (max-width: 991.98px) {
    .shop-sticky-cta { display: flex; }
    /* Laisse respirer le bas de page pour que la barre ne recouvre rien. */
    .shop-main { padding-bottom: 5rem; }
}

/* Descriptif complet, pleine largeur sous les deux colonnes. */
.shop-product-description {
    margin-top: 1.25rem;
    padding: 1.25rem 1.5rem;
    background: #fff;
    border: 1px solid var(--adm-border);
    border-radius: var(--radius);
}
.shop-product-description h2 { margin-bottom: 0.75rem; }
.shop-product-description p { overflow-wrap: anywhere; line-height: 1.65; }

/* Fiche produit : cartes placées sous la galerie (réassurance, avis) — elles occupent
   la colonne de gauche laissée vide par le formulaire de commande, plus haut. */
.shop-side-card {
    display: block;
    margin-top: 1rem;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid var(--adm-border);
    border-radius: var(--radius);
}
.shop-side-card__title { margin-bottom: 0.9rem; }

/* Fiche commande : résumé compact en paires libellé/valeur, à la place de deux cartes
   séparées « Client » et « Statut » qui répétaient les mêmes informations. */
.order-summary__badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.9rem; }
.order-summary { margin: 0; display: grid; gap: 0.35rem; }
.order-summary > div {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: 0.5rem;
    align-items: baseline;
}
.order-summary dt {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--adm-muted, #64748b);
}
.order-summary dd { margin: 0; font-size: 0.9rem; overflow-wrap: anywhere; }

/* Sélecteur de statut : boutons de couleur (un par état) au lieu d'une liste déroulante.
   Chaque option porte sa couleur via --status-color (cf. OrderStatus::chartColor()). */
/* Grille à colonnes égales : des boutons de même largeur s'alignent en rangées nettes,
   là où un flex libre produisait des lignes bancales (2 puis 3 puis 1).
   Deux colonnes exactement : le parcours normal occupe les deux premières rangées
   (En attente / Confirmée, puis Expédiée / Livrée) et les deux issues exceptionnelles
   (À relancer / Annulée) se retrouvent seules sur la dernière. */
.status-picker {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}
.status-picker__option { margin: 0; cursor: pointer; }
.status-picker__option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.status-picker__option span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.55rem 0.5rem;
    border: 1.5px solid var(--status-color);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--status-color);
    background: #fff;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.status-picker__option:hover span { background: color-mix(in srgb, var(--status-color) 12%, #fff); }
.status-picker__option input:checked + span {
    background: var(--status-color);
    border-color: var(--status-color);
    color: #fff;
}
/* L'état sélectionné doit rester repérable au clavier, pas seulement à la souris. */
.status-picker__option input:focus-visible + span {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-color) 35%, transparent);
}
@media (prefers-reduced-motion: reduce) {
    .status-picker__option span { transition: none; }
}

/* Fiche produit : rappel du mode de paiement (unique, donc affiché et non choisi) */
.shop-payment-note {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    background: var(--adm-bg);
    border-radius: var(--radius);
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--adm-text);
}
.shop-payment-note i { font-size: 1.15rem; color: var(--adm-orange); flex: 0 0 auto; }
.shop-side-card--trust { padding: 0.85rem; }
.shop-side-card--trust .shop-trust-badges { margin-top: 0; }
.shop-side-card .shop-review-summary { margin-bottom: 1rem; }
.shop-side-card details > summary { margin-bottom: 0; }

/* Fiche produit : bandeau de réassurance (livraison, paiement, retours) */
.shop-trust-badges {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    margin-top: 1rem;
}
.shop-trust-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.35rem;
    padding: 0.85rem 0.5rem;
    background: var(--adm-bg);
    border-radius: var(--radius);
    font-size: 0.75rem;
    color: var(--adm-text);
}
.shop-trust-badge i { font-size: 1.3rem; color: var(--adm-orange); }
@media (max-width: 575.98px) {
    .shop-trust-badges { grid-template-columns: 1fr; }
    .shop-trust-badge { flex-direction: row; text-align: left; justify-content: flex-start; }
}

/* Page Contact : boutons WhatsApp / téléphone */
.shop-contact-option {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1rem;
    border-radius: var(--radius);
    background: var(--adm-bg);
    color: var(--adm-text);
    text-decoration: none;
    margin-bottom: 0.7rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.shop-contact-option:last-child { margin-bottom: 0; }
.shop-contact-option:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.08); color: var(--adm-text); }
.shop-contact-option i { font-size: 1.5rem; flex-shrink: 0; }
.shop-contact-option span { display: flex; flex-direction: column; }
.shop-contact-option small { color: var(--adm-muted); }
.shop-contact-option--whatsapp i { color: #25d366; }
.shop-contact-option--phone i { color: var(--adm-blue); }

/* Bannière publicitaire vidéo de l'accueil : lecture auto, défilement si plusieurs.
   La hauteur suit le ratio naturel du média actif (--banner-ratio, calculé en JS une fois
   chargé) ; --banner-max-h est l'éventuelle limite fixée par l'admin dans Réglages. */
.shop-video-banner {
    position: relative;
    width: 100%;
    aspect-ratio: var(--banner-ratio, 21 / 9);
    max-height: var(--banner-max-h, 480px);
    background: #000;
    overflow: hidden;
}
.shop-video-banner__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease;
}
.shop-video-banner__slide.active { opacity: 1; visibility: visible; }
.shop-video-banner__link,
.shop-video-banner__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.shop-video-banner__title {
    position: absolute;
    left: 1.5rem;
    bottom: 1.5rem;
    color: #fff;
    font-family: var(--adm-font-heading, 'Playfair Display', Georgia, serif);
    font-size: 1.4rem;
    font-weight: 700;
    text-shadow: 0 2px 10px rgba(0,0,0,0.6);
    z-index: 2;
    max-width: 80%;
}
.shop-video-banner__dots {
    position: absolute;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 3;
    display: flex;
    gap: 0.4rem;
}
.shop-video-banner__dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.shop-video-banner__dots button.active { background: var(--adm-orange); transform: scale(1.25); }
@media (max-width: 767.98px) {
    .shop-video-banner { max-height: var(--banner-max-h, 220px); }
    .shop-video-banner__title { font-size: 1.1rem; left: 1rem; bottom: 1rem; }
}

/* Fiche produit : résumé des avis */
.shop-review-summary {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.shop-review-summary__score { font-size: 2.5rem; font-weight: 700; color: var(--adm-blue); line-height: 1; }
.shop-review-summary__meta { display: flex; flex-direction: column; gap: 0.2rem; }

/* Carrousel d'avis clients : 2 avis par diapositive, défilement auto + puces */
.shop-review-carousel { padding-bottom: 2.5rem; }
.shop-review-carousel .carousel-item { transition-duration: 0.5s; }
.shop-review-carousel__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.shop-review-carousel .shop-review-card { height: 100%; }

/* Bootstrap cible .carousel-indicators [data-bs-target] (2 sélecteurs de classe) :
   il faut au moins la même spécificité pour que nos puces (rondes, petites) l'emportent. */
.shop-review-carousel__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
}
.shop-review-carousel .carousel-indicators [data-bs-target] {
    box-sizing: content-box;
    width: 9px;
    height: 9px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: var(--adm-border);
    opacity: 1;
    text-indent: -9999px;
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.shop-review-carousel .carousel-indicators .active {
    background-color: var(--adm-orange);
    opacity: 1;
    transform: scale(1.2);
}

@media (max-width: 575.98px) {
    .shop-review-carousel__grid { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    .shop-review-carousel .shop-review-card { padding: 0.75rem 0.6rem; font-size: 0.85rem; }
    .shop-review-carousel .shop-review-card__date { display: none; }
}

@media (max-width: 575.98px) {
    .shop-main { padding: 1rem; }
    .shop-product-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.85rem; }
}

/* Badge d'urgence (stock) + bouton Partager sur la fiche produit */
.shop-product-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.65rem;
}
.shop-urgency-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    background: rgba(255,130,0,0.12);
    color: var(--adm-orange);
    font-weight: 600;
    font-size: 0.85rem;
}
.shop-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    border: 1px solid var(--adm-border);
    background: #fff;
    color: var(--adm-blue);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}
.shop-share-btn:hover { background: var(--adm-bg); transform: translateY(-1px); }
.shop-share-btn.shop-share-btn--copied { color: var(--adm-green); border-color: var(--adm-green); }

/* --- Champ leurre anti-robot (voir App\Services\SpamGuard) -------------------
   Sorti du flux plutôt que masqué par display:none ou visibility:hidden : les
   robots les plus courants ignorent les champs ainsi cachés, alors qu'ils
   remplissent un champ texte présent dans le DOM. Le visiteur, lui, ne le voit
   jamais — et tabindex="-1" plus aria-hidden l'excluent aussi du clavier et des
   lecteurs d'écran. */
.spam-guard {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Formulaire d'avis : notation par étoiles cliquables.

   Les étoiles sont de vrais boutons radio, masqués visuellement mais NON
   masqués pour le clavier ni pour les lecteurs d'écran (« display:none »
   les aurait sortis de l'ordre de tabulation). On les décale hors écran.

   Les étoiles sont écrites de 5 vers 1 dans le HTML puis remises à l'endroit
   par « row-reverse » : c'est ce qui permet d'allumer l'étoile choisie et
   toutes celles situées à sa gauche avec le seul sélecteur « ~ », qui ne sait
   viser que les éléments SUIVANTS dans le document.
   --------------------------------------------------------------------------- */
.review-stars {
    border: 0;
    padding: 0;
    margin: 0 0 0.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.review-stars__legend {
    float: none;                 /* sinon un <legend> casse l'alignement flex */
    width: auto;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--adm-text);
    margin: 0;
    padding: 0;
}

.review-stars__row {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 0.15rem;
}

.review-stars__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.review-stars__star {
    cursor: pointer;
    font-size: 1.6rem;
    line-height: 1;
    padding: 0.1rem;
    color: var(--adm-border);
    transition: color 0.12s ease, transform 0.12s ease;
    margin: 0;
}

/* Étoile choisie + toutes celles à sa gauche. */
.review-stars__input:checked ~ .review-stars__star {
    color: var(--adm-orange);
}

/* Aperçu au survol : même logique, mais prioritaire sur la sélection en cours. */
.review-stars__row:hover .review-stars__star {
    color: var(--adm-border);
}
.review-stars__row .review-stars__star:hover,
.review-stars__row .review-stars__star:hover ~ .review-stars__star {
    color: var(--adm-orange);
    transform: scale(1.08);
}

/* Le clavier doit voir où il se trouve : le radio étant hors écran, c'est son
   étiquette qui porte l'indicateur de focus. */
.review-stars__input:focus-visible + .review-stars__star {
    outline: 2px solid var(--adm-blue);
    outline-offset: 2px;
    border-radius: 4px;
}

.review-stars__value {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--adm-muted);
}

/* Ouverture du reste du formulaire. La classe n'est posée que par le script :
   sans JavaScript, le bloc reste affiché et le formulaire fonctionne. */
.review-form__rest.is-collapsed {
    display: none;
}

.review-form__rest {
    animation: review-reveal 0.22s ease-out;
}

@keyframes review-reveal {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .review-form__rest { animation: none; }
    .review-stars__star { transition: none; }
    .review-stars__row .review-stars__star:hover,
    .review-stars__row .review-stars__star:hover ~ .review-stars__star { transform: none; }
}

/* ---------------------------------------------------------------------------
   Messages d'erreur sous les champs de formulaire.

   Ils remplacent l'affichage précédent, qui ne montrait qu'UNE erreur, en haut
   de page, sans dire quel champ était en cause. Sur un formulaire de commande à
   cinq champs, cela obligeait à deviner.
   --------------------------------------------------------------------------- */
.field-error {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    margin: 0.35rem 0 0;
    font-size: 0.82rem;
    line-height: 1.35;
    color: #b91c1c;                    /* rouge foncé : lisible sur fond clair,
                                          contraste suffisant pour la lecture */
    font-weight: 500;
}

.field-error i {
    flex-shrink: 0;
    font-size: 0.9rem;
    line-height: 1.3;
}

/* Le champ lui-même signale le problème. La couleur ne peut pas être le seul
   indice — une personne daltonienne ne la distinguerait pas : le message texte
   sous le champ reste donc l'information principale, la bordure ne fait que
   guider l'œil vers le bon endroit. */
.adm-field input.is-invalid,
.adm-field select.is-invalid,
.adm-field textarea.is-invalid {
    border-color: #dc2626;
    background-color: #fef2f2;
}

.adm-field input.is-invalid:focus,
.adm-field select.is-invalid:focus,
.adm-field textarea.is-invalid:focus {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

/* Étiquette du champ en défaut : repère supplémentaire quand le formulaire est
   long et que le message se trouve hors de l'écran. */
.adm-field.has-error > label {
    color: #b91c1c;
}

/* Bandeau récapitulatif, affiché seulement quand plusieurs champs sont en
   défaut : sur un formulaire long, la première erreur peut se trouver hors de
   l'écran au rechargement. */
.form-error-summary {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-left: 4px solid #dc2626;
    border-radius: var(--radius);
    padding: 0.75rem 0.9rem;
    margin-bottom: 1rem;
    color: #7f1d1d;
    font-size: 0.88rem;
}

.form-error-summary ul {
    margin: 0.25rem 0 0;
    padding-left: 1.1rem;
}

.form-error-summary strong { font-weight: 600; }

/* ---------------------------------------------------------------------------
   Journal d'audit — liste des connexions.

   Remplace deux tableaux à quatre colonnes qui, côte à côte, laissaient environ
   450 px chacun : « Côte d'Ivoire » passait à la ligne, le nom de l'appareil
   aussi, et chaque entrée occupait trois lignes. Tout se confondait.

   Une liste plutôt qu'un tableau : les colonnes imposaient des largeurs égales à
   des contenus de longueurs très inégales. Ici l'identifiant et l'appareil
   prennent la place disponible, l'adresse et l'heure gardent la leur à droite.
   --------------------------------------------------------------------------- */
.login-list__head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.88rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--adm-border);
}

.login-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.6rem;
    border-radius: var(--radius);
    border-bottom: 1px solid var(--adm-border);
}

.login-row:last-child { border-bottom: 0; }
.login-row:hover { background: var(--adm-bg); }

/* Une bordure à gauche plutôt qu'un fond coloré : elle signale sans teinter le
   texte, qui doit rester lisible. */
.login-row--alert {
    border-left: 3px solid var(--adm-orange);
    background: rgba(255, 130, 0, 0.04);
}

/* min-width:0 est indispensable : sans lui un enfant flex refuse de rétrécir
   sous la largeur de son contenu, et l'ellipsis ne se déclenche jamais. */
.login-row__body { min-width: 0; flex: 1 1 auto; }

.login-row__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    line-height: 1.3;
}

.login-row__user {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--adm-text);
    overflow-wrap: anywhere;
}

.login-row__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.75rem;
    font-size: 0.78rem;
    color: var(--adm-muted);
    margin-top: 0.15rem;
}

.login-row__meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    min-width: 0;
}

.login-row__meta i { flex-shrink: 0; opacity: 0.8; }

.login-row__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
    flex-shrink: 0;
    text-align: right;
}

/* tabular-nums : les adresses IP s'alignent en colonne, chiffre sous chiffre,
   ce qui rend immédiatement visible qu'une même adresse revient. */
.login-row__ip {
    font-size: 0.76rem;
    color: var(--adm-muted);
    background: transparent;
    padding: 0;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.login-row__time {
    font-size: 0.74rem;
    color: var(--adm-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.login-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.22rem 0.42rem;
    border-radius: 999px;
    background: var(--adm-border);
    color: var(--adm-text);
    white-space: nowrap;
}

.login-chip--warn { background: #fef3c7; color: #92400e; }
.login-chip--pwd  { background: #fee2e2; color: #991b1b; }
.login-chip--count{ background: var(--adm-blue); color: #fff; }

@media (max-width: 575.98px) {
    .login-row { flex-direction: column; align-items: stretch; gap: 0.3rem; }
    .login-row__side { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ---------------------------------------------------------------------------
   Journal d'audit — le tableau tient dans la largeur de la page.

   Il débordait à droite, au point que le bouton « Voir » sortait de l'écran.
   Deux causes : la description occupait une colonne entière, et le libellé
   d'action (« Tentative de connexion échouée ») était en nowrap, donc
   incompressible.

   « table-layout: fixed » impose les largeurs ci-dessous au lieu de les laisser
   déduire du contenu — c'est ce qui empêche une seule longue valeur d'étirer
   toute la table.
   --------------------------------------------------------------------------- */
.audit-table {
    table-layout: fixed;
    width: 100%;
}

/* C'est la colonne Action qui porte les libellés les plus longs : c'est donc elle
   qui prend l'espace restant. Laisser « Utilisateur » en auto lui donnait toute la
   largeur disponible pendant que l'action débordait de sa cellule. */
.audit-table th:nth-child(1), .audit-table td:nth-child(1) { width: 7.5rem; }   /* Date */
.audit-table th:nth-child(2), .audit-table td:nth-child(2) { width: 12rem; }    /* Utilisateur */
.audit-table th:nth-child(3), .audit-table td:nth-child(3) { width: auto; }     /* Action */
.audit-table th:nth-child(4), .audit-table td:nth-child(4) { width: 9rem; }     /* Objet */
.audit-table th:nth-child(5), .audit-table td:nth-child(5) { width: 6.5rem; }   /* Détails */

/* Sans cela le bouton se casse en deux lignes, l'icône au-dessus du mot. */
.audit-table .audit-view { white-space: nowrap; }

/* Le libellé d'action peut désormais passer à la ligne : avec une largeur fixe,
   le garder sur une seule ligne le ferait déborder de sa cellule. */
.audit-table td:nth-child(3) .badge {
    white-space: normal;
    text-align: left;
    line-height: 1.25;
}

/* Un nom long ne doit pas élargir la colonne ni déborder. */
.audit-table td:nth-child(2) { overflow-wrap: anywhere; }

/* Le conteneur que DataTables insère autour du tableau ne doit jamais dépasser la
   carte qui l'accueille, sinon c'est la page entière qui défile latéralement au
   lieu du seul tableau. */
.table-scroll > .dt-container { max-width: 100%; }

@media (max-width: 991.98px) {
    /* Sous cette largeur, les colonnes fixes deviennent trop serrées : on rend la
       main au contenu, et le conteneur défilant prend le relais — c'est le tableau
       qui glisse sous le doigt, pas la page. */
    /* Les lignes deviennent des fiches empilees (.adm-table-cards) : les largeurs
       fixes et le nowrap n'ont plus lieu d'etre, et les imposer ferait deborder la
       page au lieu de la laisser s'adapter. */
    .audit-table, .securite-table { table-layout: auto; }
    .audit-table th, .audit-table td,
    .securite-table th, .securite-table td { white-space: normal; }
    .audit-table th:nth-child(n), .audit-table td:nth-child(n),
    .securite-table th:nth-child(n), .securite-table td:nth-child(n) { width: auto; }

    /* En mode fiches, une adresse IP ou un nom d'appareil ne doit pas pousser la
       carte au-delà de l'écran. */
    .securite-table td code, .audit-table td code { overflow-wrap: anywhere; }
}

/* ---------------------------------------------------------------------------
   En-tête : le titre cède la place, jamais la page.

   Le titre était borné par « max-width: calc(100vw - 140px) » — un nombre choisi
   pour la largeur qu'occupaient alors les actions de droite. Dès que celles-ci
   dépassent 140 px (cloche, profil, nom du compte, déconnexion), le titre ne
   rétrécit plus assez et c'est la page entière qui déborde latéralement. Constaté
   sur « Sécurité des connexions » et « Utilisateurs », à 390 px.

   Ici le groupe de gauche est déclaré rétrécissable (min-width: 0, sans quoi un
   enfant flex refuse de passer sous la largeur de son contenu) et celui de droite
   incompressible. Le titre s'ajuste alors à ce qui reste, quelle que soit la
   largeur d'écran — plus aucun nombre à maintenir.
   --------------------------------------------------------------------------- */
.top-navbar > div:first-child {
    min-width: 0;
    flex: 1 1 auto;
}

.top-navbar > div:last-child {
    flex: 0 0 auto;
}

@media (max-width: 991.98px) {
    .page-heading { max-width: 100%; }
}

/* ---------------------------------------------------------------------------
   Statistiques boutique — conteneurs de graphiques et compléments de tuiles.

   La hauteur inclut la bande des étiquettes d'axe : une hauteur calculée sur le
   seul tracé les fait sortir du cadre et la carte se dote d'une petite barre de
   défilement verticale, ce qui est toujours un défaut de mise en page.
   --------------------------------------------------------------------------- */
.chart-box { position: relative; height: 320px; }
.chart-box--sm { height: 260px; }
.chart-box--xs { height: 190px; }

@media (max-width: 767.98px) {
    .chart-box { height: 250px; }
    .chart-box--sm { height: 220px; }
    .chart-box--xs { height: 180px; }
}

/* Évolution par rapport à la période précédente, sous la valeur de la tuile. */
.stat-delta {
    font-size: 0.74rem;
    font-weight: 600;
    margin-top: 0.2rem;
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.stat-delta .text-muted { font-weight: 400; }

/* Pastille de couleur rappelant la série du graphique dans la vue tableau : c'est
   elle qui relie les deux lectures sans répéter la légende. */
.legend-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 0.45rem;
    vertical-align: baseline;
}

/* Tableaux d'appoint sous les graphiques : plus denses que les tableaux de gestion. */
.adm-table--compact th,
.adm-table--compact td { padding: 0.4rem 0.6rem; font-size: 0.82rem; }

/* tabular-nums seulement ici : les chiffres s'alignent en colonne. Sur les grandes
   valeurs des tuiles, des chiffres de largeur égale paraissent au contraire lâches. */
.adm-table td.num, .adm-table th.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ==========================================================================
   Consultation d'une boutique par un super admin (partials/impersonation-banner)
   Bandeau fixé en haut de page ; la barre latérale, la barre supérieure et l'en-tête de
   la vitrine sont décalés d'autant pour que le bandeau ne masque rien.
   ========================================================================== */
body.is-impersonating {
    --impersonation-banner-height: 44px;
    padding-top: var(--impersonation-banner-height);
}
.impersonation-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--impersonation-banner-height, 44px);
    z-index: 1045; /* au-dessus de la barre latérale (1040), sous les fenêtres modales (1050+) */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0 max(1rem, env(safe-area-inset-right)) 0 max(1rem, env(safe-area-inset-left));
    background: #0E2A6E;
    color: #fff;
    border-bottom: 3px solid #FF8A00;
    font-size: 0.9rem;
}
.impersonation-banner__text {
    margin: 0;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.impersonation-banner__mark { display: inline-block; width: 29px; height: auto; margin-right: 0.5rem; vertical-align: -3px; }
.impersonation-banner__short { display: none; }
.impersonation-banner__form { margin: 0; flex-shrink: 0; }
.impersonation-banner__leave {
    background: #FF8A00;
    color: #071C4F;
    border: 0;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.88rem;
    padding: 0.3rem 0.9rem;
    cursor: pointer;
}
.impersonation-banner__leave:hover { background: #fff; }
.impersonation-banner__leave:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
body.is-impersonating .sidebar { top: var(--impersonation-banner-height); }
body.is-impersonating .top-navbar,
body.is-impersonating .shop-header { top: var(--impersonation-banner-height); }
@media (max-width: 767.98px) {
    .impersonation-banner__long { display: none; }
    .impersonation-banner__short { display: inline; }
}
/* « Propulsé par Adiman » : logotype de la plateforme (partials/powered-by). */
.powered-by { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.powered-by__link { display: inline-flex; align-items: center; text-decoration: none !important; }
.powered-by__logo { display: block; height: 14px; width: auto; }
.shop-footer__copy .powered-by__logo { height: 15px; opacity: 0.85; }
.shop-footer__copy .powered-by__link:hover .powered-by__logo { opacity: 1; }
/* Pastille masquée tant qu'il n'y a rien à signaler (attribut hidden posé par la messagerie). */
.notif-badge[hidden] { display: none; }

/* Droits des groupes (lecture seule) : titre de section dans la grille onglets × actions. */
.groupes-grille { min-width: 640px; }
.groupes-grille tbody th[scope="row"] { text-transform: none; letter-spacing: 0; font-size: inherit; background: transparent; color: inherit; }
.groupes-grille td { padding: 0.6rem 1rem; }
.groupes-grille__section th { background: rgba(26, 58, 92, 0.06); font-weight: 600; }

/* Apparence de la boutique (phase 6) : en-tête, disposition du catalogue, pied de page.
   Les classes viennent de listes fermées (ShopTheme::HEADER_STYLES, CATALOG_LAYOUTS). */
@media (min-width: 768px) {
    .shop-header--center .shop-header__row { flex-wrap: wrap; justify-content: center; row-gap: 0.4rem; }
    .shop-header--center .shop-header__logo { flex-basis: 100%; justify-content: center; }
    .shop-header--center .shop-header__nav { flex: 0 1 auto; justify-content: center; }
    .shop-header--center .shop-header__actions { position: absolute; top: 0.7rem; right: 1.25rem; }

    .shop-catalog--grid-2 .shop-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shop-catalog--grid-3 .shop-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
    .shop-catalog--grid-4 .shop-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.shop-catalog--list .shop-product-grid { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-inline: auto; }
@media (min-width: 576px) {
    .shop-catalog--list .shop-card { display: grid; grid-template-columns: 220px minmax(0, 1fr); }
    .shop-catalog--list .shop-card__media { height: 100%; }
}

.shop-footer__text { color: rgba(255,255,255,0.7); font-size: 0.85rem; max-width: 320px; margin: 0.6rem 0 0; white-space: pre-line; }
.shop-footer__social { display: flex; gap: 0.5rem; margin-top: 0.9rem; }
.shop-footer__social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; border-radius: 50%;
    color: #fff; background: rgba(255,255,255,0.1); text-decoration: none;
}
.shop-footer__social a:hover, .shop-footer__social a:focus-visible { background: var(--adm-orange); color: #fff; }