/* =====================================================================
   DIGIT RESTO+ — Thème « Auth » v5
   Langage visuel des pages de connexion appliqué à toute la plateforme :
   dégradé rouge corail, cartes très arrondies, champs à bordure 2px,
   boutons en dégradé lumineux, typographie Inter 800, animations douces.
   Chargé après digit.css : il harmonise aussi les anciennes pages.
   ===================================================================== */

:root {
    --grad: linear-gradient(135deg, #ff4757 0%, #e84118 100%);
    --grad-soft: linear-gradient(135deg, rgba(255,71,87,.10), rgba(232,65,24,.06));
    --hero-glow: radial-gradient(circle at 18% 25%, rgba(255,255,255,.22), transparent 55%), radial-gradient(circle at 85% 80%, rgba(255,255,255,.12), transparent 55%);
    --r-card: 20px;
    --r-field: 14px;
    --sidebar-w: 268px;
    --topbar-h: 64px;
    --header-h: 72px;
    --tabbar-h: 70px;
    --page-pad: clamp(14px, 3vw, 40px);
}
html[data-theme="dark"] {
    --grad-soft: linear-gradient(135deg, rgba(255,71,87,.16), rgba(232,65,24,.08));
}

/* ---------------------------------------------------------------------
   Coquille : marges selon la navigation
   --------------------------------------------------------------------- */
body.shell-client { padding-top: var(--header-h) !important; --nav-height: var(--header-h); }
body.shell-staff { padding-top: var(--topbar-h) !important; --nav-height: var(--topbar-h); }
@media (min-width: 1024px) {
    body.shell-staff { padding-left: var(--sidebar-w) !important; padding-bottom: 0 !important; }
    body.shell-client { padding-bottom: 0 !important; }
}
@media (max-width: 1023px) {
    body.shell-client, body.shell-staff { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)) !important; }
    body.shell-client { --header-h: 60px; }
    body.shell-staff { --topbar-h: 60px; }
}
.toast-container { top: calc(var(--nav-height) + 12px) !important; }
body.kds-fullscreen .dr-shell-chrome { display: none !important; }
body.kds-fullscreen { padding: 0 !important; }

/* Pleine largeur : les conteneurs suivent l'écran (marges fluides) */
main > .container, main > .container-fluid, main > div > .container, .dr-page.container, main .container.dr-page {
    max-width: none !important;
    width: 100%;
    padding-left: var(--page-pad) !important;
    padding-right: var(--page-pad) !important;
}
@media (min-width: 2200px) { main > .container, main > .container-fluid { max-width: 2100px !important; } }

/* ---------------------------------------------------------------------
   En-tête client
   --------------------------------------------------------------------- */
.dc-header {
    position: fixed; top: 0; left: 0; right: 0; height: var(--header-h); z-index: 1040;
    background: var(--nav-bg); border-bottom: 1px solid var(--border-color);
    backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px);
}
.dc-inner { height: 100%; display: flex; align-items: center; gap: 18px; padding: 0 var(--page-pad); }
.dc-logo img { height: 38px; width: auto; max-width: 150px; object-fit: contain; display: block; }
.dc-links { display: flex; gap: 4px; margin: 0 auto; }
.dc-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; color: var(--text-color); font-weight: 600; font-size: .9rem; text-decoration: none; transition: var(--transition); }
.dc-link i { color: var(--text-muted); transition: var(--transition); }
.dc-link:hover { background: var(--primary-light); color: var(--primary); }
.dc-link:hover i, .dc-link.active i { color: inherit; }
.dc-link.active { background: var(--grad); color: #fff; box-shadow: 0 8px 20px rgba(255,71,87,.28); }
.dc-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.dc-icon, .ds-icon {
    position: relative; width: 42px; height: 42px; border-radius: 14px; border: 1px solid var(--border-color);
    background: var(--card-bg); color: var(--text-color); display: inline-flex; align-items: center; justify-content: center;
    transition: var(--transition); text-decoration: none; cursor: pointer;
}
.dc-icon:hover, .ds-icon:hover { color: var(--primary); border-color: var(--primary); transform: translateY(-1px); }
.dc-cart .cart-count, .ds-tab-ic .cart-count {
    position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
    background: var(--grad); color: #fff; font-size: .66rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid var(--card-bg);
}
.dc-lang select, .ds-lang select { height: 42px; border-radius: 14px; border: 1px solid var(--border-color); background: var(--card-bg); color: var(--text-color); font-weight: 700; font-size: .8rem; padding: 0 10px; cursor: pointer; }
/* Panneau « Plus » : le sélecteur occupe la largeur comme les autres préférences */
.dr-lang-sheet { flex: 1 1 auto; }
.dr-lang-sheet select { width: 100%; height: 42px; border-radius: 14px; border: 1px solid var(--border-color); background: var(--card-bg); color: var(--text-color); font-weight: 600; font-size: .88rem; padding: 0 12px; cursor: pointer; }
.dc-user { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px 0 4px; border-radius: 999px; border: 1px solid var(--border-color); background: var(--card-bg); color: var(--text-color); font-weight: 700; font-size: .85rem; }
.dc-user img, .ds-av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.ds-av { display: inline-flex; align-items: center; justify-content: center; background: var(--grad); color: #fff; font-weight: 800; font-size: .9rem; flex-shrink: 0; }
.dc-chev { font-size: .65rem; color: var(--text-muted); }
.dc-partner { font-weight: 700; font-size: .85rem; color: var(--text-color); text-decoration: none; padding: 10px 12px; border-radius: 999px; }
.dc-partner:hover { color: var(--primary); }
.dc-login { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 999px; background: var(--grad); color: #fff !important; font-weight: 700; font-size: .88rem; text-decoration: none; box-shadow: 0 10px 24px rgba(255,71,87,.28); transition: var(--transition); }
.dc-login:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(255,71,87,.4); }
@media (max-width: 1023px) {
    /* Sur téléphone le choix de la langue vit dans le panneau « Plus » */
    .dc-links, .dc-lang, .ds-lang, .dc-partner, .dc-cart, .dc-user-name, .dc-chev { display: none !important; }
    .dc-inner { gap: 10px; }
    .dc-logo img { height: 32px; }
    .dc-icon { width: 38px; height: 38px; border-radius: 12px; }
    .dc-user { padding: 0 3px; height: 38px; }
    .dc-login span { display: none; }
    .dc-login { width: 38px; padding: 0; justify-content: center; }
}

/* ---------------------------------------------------------------------
   Espace pro : barre latérale + barre haute
   --------------------------------------------------------------------- */
.ds-sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; width: var(--sidebar-w); z-index: 1045;
    display: flex; flex-direction: column; background: var(--card-bg); border-right: 1px solid var(--border-color);
}
.ds-brand {
    position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px;
    padding: 20px 18px; margin: 12px; border-radius: 20px; color: #fff;
    background: var(--hero-glow), var(--grad); box-shadow: 0 14px 30px rgba(255,71,87,.25);
}
.ds-brand::after { content: ''; position: absolute; top: -50px; right: -40px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.1); }
.ds-brand-logo { width: 54px; height: 54px; border-radius: 16px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 6px; flex-shrink: 0; box-shadow: 0 10px 24px rgba(0,0,0,.18); z-index: 1; }
.ds-brand-logo img { width: 100%; height: 100%; object-fit: contain; }
.ds-brand-txt { display: flex; flex-direction: column; min-width: 0; z-index: 1; }
.ds-brand-role { font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .9; }
.ds-brand-etab { font-weight: 800; font-size: .98rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-nav { flex: 1; overflow-y: auto; padding: 4px 12px 12px; scrollbar-width: thin; }
.ds-nav-group { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); padding: 14px 12px 6px; }
.ds-link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--text-color); text-decoration: none; font-weight: 600; font-size: .88rem; transition: var(--transition); margin-bottom: 2px; }
.ds-link i { width: 20px; text-align: center; color: var(--text-muted); transition: var(--transition); }
.ds-link:hover { background: var(--primary-light); color: var(--primary); }
.ds-link:hover i { color: var(--primary); }
.ds-link.active { background: var(--grad); color: #fff; box-shadow: 0 8px 20px rgba(255,71,87,.28); }
.ds-link.active i { color: #fff; }
.ds-side-foot { display: flex; align-items: center; gap: 8px; padding: 12px; border-top: 1px solid var(--border-color); }
.ds-user { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text-color); padding: 6px; border-radius: 12px; }
.ds-user:hover { background: var(--surface-2); color: var(--text-color); }
.ds-user img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.ds-user-txt { display: flex; flex-direction: column; min-width: 0; font-size: .8rem; }
.ds-user-txt b, .ds-user-txt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-user-txt small { color: var(--text-muted); }
.ds-topbar {
    position: fixed; top: 0; right: 0; left: 0; height: var(--topbar-h); z-index: 1040;
    display: flex; align-items: center; gap: 14px; padding: 0 var(--page-pad);
    background: var(--nav-bg); border-bottom: 1px solid var(--border-color);
    backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px);
}
@media (min-width: 1024px) { .ds-topbar { left: var(--sidebar-w); } .ds-top-logo { display: none; } }
.ds-top-logo img { height: 30px; width: auto; max-width: 120px; object-fit: contain; display: block; }
.ds-top-title { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.ds-hello { font-weight: 800; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-today { font-size: .75rem; color: var(--text-muted); text-transform: capitalize; }
.ds-top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ds-avatar-btn { border: 0; background: transparent; padding: 0; border-radius: 50%; }
.ds-avatar-btn img, .ds-avatar-btn .ds-av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
@media (max-width: 1023px) {
    .ds-sidebar { display: none; }
    .ds-top-title { display: none; }
    .ds-icon { width: 38px; height: 38px; border-radius: 12px; }
    .ds-avatar-btn img, .ds-avatar-btn .ds-av { width: 36px; height: 36px; }
}
@media (max-width: 380px) { .ds-top-actions [data-theme-toggle] { display: none; } }

/* ---------------------------------------------------------------------
   Onglets en bas (téléphone / tablette) — pour tous les utilisateurs
   --------------------------------------------------------------------- */
.ds-tabbar {
    position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 1040;
    height: calc(var(--tabbar-h) - 10px); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    background: var(--nav-bg); border: 1px solid var(--border-color); border-radius: 22px;
    backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px);
    box-shadow: 0 14px 40px rgba(16,24,40,.16);
}
html[data-theme="dark"] .ds-tabbar { box-shadow: 0 14px 40px rgba(0,0,0,.5); }
@media (min-width: 1024px) { .ds-tabbar { display: none; } }
.ds-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--text-muted); text-decoration: none; font-size: .64rem; font-weight: 700; background: none; border: 0; padding: 0; min-width: 0; }
.ds-tab-ic { position: relative; width: 44px; height: 30px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; transition: var(--transition); }
.ds-tab-lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
.ds-tab.active { color: var(--primary); }
.ds-tab.active .ds-tab-ic { background: var(--grad); color: #fff; box-shadow: 0 8px 18px rgba(255,71,87,.35); }
.ds-dot { position: absolute; top: 2px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--primary); border: 2px solid var(--card-bg); }

/* Panneau « Plus » */
.ds-sheet.offcanvas-bottom { height: auto; max-height: 86vh; border-radius: 26px 26px 0 0; background: var(--card-bg); color: var(--text-color); border-top: 1px solid var(--border-color); }
.ds-sheet-grip { width: 44px; height: 5px; border-radius: 999px; background: var(--border-color); margin: 10px auto 0; }
.ds-sheet .offcanvas-header { padding: 14px 20px 6px; }
.ds-sheet .offcanvas-body { padding: 6px 20px calc(24px + env(safe-area-inset-bottom, 0px)); }
.ds-sheet-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ds-sheet-head h5 { font-weight: 800; margin: 0; font-size: 1.05rem; }
.ds-sheet-head small { color: var(--text-muted); }
.ds-sheet-av { width: 46px !important; height: 46px !important; border-radius: 50%; object-fit: cover; }
.ds-sheet-logo { height: 34px; width: auto; }
.ds-sheet-cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 6px; }
.ds-sheet-cta .dr-btn { justify-content: center; }
.ds-sheet-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 560px) { .ds-sheet-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ds-sheet-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 14px 6px; border-radius: 16px; border: 1px solid var(--border-color); color: var(--text-color); text-decoration: none; font-size: .74rem; font-weight: 700; text-align: center; min-width: 0; transition: var(--transition); }
.ds-sheet-item i { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--primary-light); color: var(--primary); font-size: 1rem; }
.ds-sheet-item span { line-height: 1.2; overflow-wrap: anywhere; }
.ds-sheet-item.active, .ds-sheet-item:hover { border-color: var(--primary); color: var(--primary); }
.ds-sheet-prefs { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ds-sheet-prefs .form-select { min-width: 140px; }

/* ---------------------------------------------------------------------
   Pied de page
   --------------------------------------------------------------------- */
.site-footer { background: var(--card-bg); border-top: 1px solid var(--border-color); padding: 28px 0 22px; margin-top: auto; }
.sf-inner { padding: 0 var(--page-pad); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr); gap: 18px 30px; align-items: center; }
.sf-brand { display: flex; align-items: center; gap: 14px; }
.sf-brand img { height: 36px; width: auto; }
.sf-brand p { margin: 0; color: var(--text-muted); font-size: .84rem; max-width: 360px; }
.sf-links { display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: flex-end; }
.sf-links a { color: var(--text-color); text-decoration: none; font-weight: 600; font-size: .86rem; }
.sf-links a:hover { color: var(--primary); }
.sf-copy { grid-column: 1 / -1; margin: 0; padding-top: 14px; border-top: 1px solid var(--border-color); color: var(--text-muted); font-size: .78rem; text-align: center; }
@media (max-width: 767px) { .sf-inner { grid-template-columns: 1fr; text-align: center; } .sf-brand { flex-direction: column; } .sf-links { justify-content: center; } }
body.shell-staff .site-footer { padding: 14px 0; }
body.shell-staff .sf-brand, body.shell-staff .sf-links { display: none; }
body.shell-staff .sf-copy { border-top: 0; padding-top: 0; }

/* ---------------------------------------------------------------------
   En-têtes de page : bandeau dégradé comme le panneau de connexion
   (nouvelles pages .dr-page-head et anciennes pages .page-header)
   --------------------------------------------------------------------- */
html body main .dr-page-head,
html body main .page-header {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
    padding: clamp(20px, 3.4vw, 34px) clamp(18px, 3.4vw, 36px) !important;
    margin: 4px 0 22px !important; border-radius: 24px !important; border: 0 !important;
    background: var(--hero-glow), var(--grad) !important; color: #fff !important;
    box-shadow: 0 18px 40px rgba(255,71,87,.22);
    animation: drFadeUp .5s ease both;
}
html body main .dr-page-head::after,
html body main .page-header::after {
    content: ''; position: absolute; z-index: -1; top: -70px; right: -60px; width: 220px; height: 220px; border-radius: 50%;
    background: rgba(255,255,255,.10);
}
html body main .dr-page-head h1, html body main .page-header h1,
html body main .dr-page-head h2, html body main .page-header h2 {
    color: #fff !important; font-weight: 800 !important; letter-spacing: -.02em; margin: 0 !important;
    font-size: clamp(1.35rem, 3.2vw, 2rem) !important; display: flex; align-items: center; gap: 12px;
}
html body main .dr-page-head h1 i, html body main .page-header h1 i { color: #fff !important; opacity: .95; }
html body main .dr-page-head p, html body main .page-header p,
html body main .page-header .subtitle, html body main .dr-page-head .subtitle,
html body main .dr-page-head .text-muted, html body main .page-header .text-muted {
    color: rgba(255,255,255,.9) !important; margin: 6px 0 0 !important; font-size: .95rem;
}
html body main .dr-page-head .dr-btn-ghost, html body main .page-header .btn,
html body main .page-header .btn-outline-secondary, html body main .page-header .btn-back,
html body main .page-header a:not(.btn-primary-custom):not(.dr-btn-primary) {
    background: rgba(255,255,255,.16) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.35) !important;
    border-radius: 999px !important; backdrop-filter: blur(6px);
}
html body main .dr-page-head .dr-btn-primary, html body main .page-header .btn-primary-custom,
html body main .page-header .dr-btn-primary, html body main .page-header .btn-primary, html body main .page-header .btn-danger {
    background: #fff !important; color: var(--primary) !important; border: 0 !important; box-shadow: 0 10px 24px rgba(0,0,0,.15) !important;
    border-radius: 999px !important; font-weight: 800 !important;
}
html body main .page-header .dr-badge, html body main .dr-page-head .dr-badge { background: rgba(255,255,255,.2); color: #fff; }

/* ---------------------------------------------------------------------
   Cartes, sections et blocs
   --------------------------------------------------------------------- */
main .card, main .dr-card, main .card-custom {
    border-radius: var(--r-card) !important; border: 1px solid var(--border-color) !important;
    background: var(--card-bg); box-shadow: 0 2px 10px rgba(16,24,40,.04); transition: var(--transition);
}
main .card:hover, main .dr-card:hover { box-shadow: 0 14px 34px rgba(16,24,40,.08); }
html[data-theme="dark"] main .card:hover, html[data-theme="dark"] main .dr-card:hover { box-shadow: 0 14px 34px rgba(0,0,0,.4); }
main .card-header { background: transparent; border-bottom: 1px solid var(--border-color); border-radius: var(--r-card) var(--r-card) 0 0 !important; font-weight: 800; }
main .dr-section-title, main .section-title { font-weight: 800 !important; letter-spacing: -.01em; }
main .dr-section-title .ic { background: var(--grad) !important; color: #fff !important; box-shadow: 0 6px 14px rgba(255,71,87,.25); }
main .form-section { border-radius: var(--r-card) !important; }
main .info-item { border-radius: 14px; }

/* États vides */
main .empty-state, main .dr-empty { padding: 44px 18px !important; text-align: center; }
main .empty-state > i:first-child, main .dr-empty .ic {
    width: 76px; height: 76px; border-radius: 24px !important; display: inline-flex !important; align-items: center; justify-content: center;
    background: var(--grad-soft) !important; color: var(--primary) !important; font-size: 1.8rem !important; margin-bottom: 14px; opacity: 1 !important;
}

/* ---------------------------------------------------------------------
   Formulaires : style des pages de connexion
   --------------------------------------------------------------------- */
main .form-control, main .form-select,
main input[type="text"]:not([class]), main input[type="email"]:not([class]), main input[type="tel"]:not([class]),
main input[type="password"]:not([class]), main input[type="number"]:not([class]), main input[type="search"]:not([class]),
main input[type="url"]:not([class]), main input[type="date"]:not([class]), main input[type="time"]:not([class]),
main input[type="datetime-local"]:not([class]), main textarea:not([class]), main select:not([class]) {
    border: 2px solid var(--border-color) !important; border-radius: var(--r-field) !important;
    background-color: var(--input-bg, var(--card-bg)) !important; color: var(--text-color) !important;
    padding: 12px 16px; font-size: .95rem; transition: border-color .25s, box-shadow .25s; box-shadow: none;
    min-height: 48px;
}
main textarea.form-control, main textarea:not([class]) { min-height: 96px; }
main .form-control-sm, main .form-select-sm { min-height: 38px; padding: 6px 12px; border-radius: 12px !important; }
main .form-control:focus, main .form-select:focus, main input:not([class]):focus, main textarea:not([class]):focus, main select:not([class]):focus {
    border-color: var(--primary) !important; box-shadow: 0 0 0 4px var(--primary-light) !important; outline: none;
}
main .form-control::placeholder, main input::placeholder, main textarea::placeholder { color: var(--gray-500); }
main .form-label, main label.form-label { font-weight: 700 !important; font-size: .84rem; margin-bottom: 6px; color: var(--text-color); }
main .form-check-input { width: 1.15em; height: 1.15em; border: 2px solid var(--gray-400); }
main .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
main .form-check-input:focus { box-shadow: 0 0 0 4px var(--primary-light); border-color: var(--primary); }
main .form-switch .form-check-input { width: 2.4em; height: 1.3em; }
main .input-group-text { border: 2px solid var(--border-color); border-radius: var(--r-field); background: var(--surface-2); color: var(--text-muted); }
main .invalid-feedback, main .errorlist { color: var(--danger); font-size: .82rem; }
main .errorlist { list-style: none; padding: 0; margin: 6px 0 0; }

/* ---------------------------------------------------------------------
   Boutons : dégradé lumineux (CTA en pilule)
   --------------------------------------------------------------------- */
main .btn { border-radius: 12px; font-weight: 700; padding: 10px 18px; transition: var(--transition); }
main .btn-sm { padding: 6px 12px; border-radius: 10px; }
main .btn-lg { padding: 14px 26px; border-radius: 14px; }
main .btn-primary, main .btn-danger, main .btn-primary-custom, main .dr-btn-primary, main .btn-submit, main .btn-auth {
    background: var(--grad) !important; border: 0 !important; color: #fff !important;
    box-shadow: 0 10px 24px rgba(255,71,87,.28); border-radius: 999px !important;
}
main .btn-primary:hover, main .btn-danger:hover, main .btn-primary-custom:hover, main .dr-btn-primary:hover, main .btn-submit:hover {
    transform: translateY(-2px); box-shadow: 0 14px 32px rgba(255,71,87,.4); color: #fff !important;
}
main .btn-outline-danger, main .btn-outline-primary {
    border: 2px solid var(--primary) !important; color: var(--primary) !important; background: transparent; border-radius: 999px !important;
}
main .btn-outline-danger:hover, main .btn-outline-primary:hover { background: var(--grad) !important; color: #fff !important; border-color: transparent !important; }
main .btn-outline-secondary, main .btn-light, main .btn-secondary, main .dr-btn-ghost, main .btn-cancel {
    border: 1px solid var(--border-color) !important; background: var(--surface-2) !important; color: var(--text-color) !important; border-radius: 999px !important;
}
main .btn-outline-secondary:hover, main .btn-light:hover, main .dr-btn-ghost:hover { border-color: var(--primary) !important; color: var(--primary) !important; background: var(--primary-light) !important; }
main .btn-success { background: linear-gradient(135deg, #2ecc71, #16a34a) !important; border: 0 !important; color: #fff !important; border-radius: 999px !important; }
main .dr-btn { border-radius: 999px; font-weight: 700; }
main .btn-action { border-radius: 12px !important; font-weight: 700; transition: var(--transition); }
main .btn-back { border-radius: 999px !important; font-weight: 700; }
main .btn:focus-visible, main .dr-btn:focus-visible { box-shadow: 0 0 0 4px var(--primary-light) !important; outline: none; }

/* ---------------------------------------------------------------------
   Tableaux
   --------------------------------------------------------------------- */
main .table { --bs-table-bg: transparent; color: var(--text-color); margin-bottom: 0; }
main .table > thead th, main .table-header th, main thead th {
    font-size: .72rem !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-muted) !important; background: var(--surface-2) !important; border-bottom: 0 !important; padding: 12px 14px !important; white-space: nowrap;
}
main .table > thead th:first-child { border-radius: 12px 0 0 12px; }
main .table > thead th:last-child { border-radius: 0 12px 12px 0; }
main .table > tbody td { padding: 12px 14px; border-color: var(--border-color) !important; vertical-align: middle; }
main .table-hover > tbody > tr:hover > *, main .table > tbody > tr:hover > * { background: var(--primary-light); }
main .table-wrapper, main .table-responsive { border-radius: 18px; }

/* Badges / statuts */
main .badge, main .status-badge, main .dr-badge { border-radius: 999px !important; font-weight: 700; letter-spacing: .01em; }

/* Modales */
.modal-content { border-radius: 24px !important; border: 1px solid var(--border-color) !important; background: var(--card-bg) !important; color: var(--text-color); box-shadow: 0 30px 70px rgba(16,24,40,.25) !important; overflow: hidden; }
.modal-header { border-bottom: 1px solid var(--border-color) !important; padding: 18px 22px; }
.modal-header .modal-title { font-weight: 800 !important; }
.modal-footer { border-top: 1px solid var(--border-color) !important; }
.modal-backdrop.show { opacity: .55; backdrop-filter: blur(3px); }

/* Alertes */
main .alert { border-radius: 16px; border-width: 1px; }
main .alert-info { background: var(--primary-light); border-color: rgba(255,71,87,.25); color: var(--text-color); }

/* Menus déroulants */
.dropdown-menu { border-radius: 16px !important; border: 1px solid var(--border-color) !important; background: var(--card-bg) !important; box-shadow: 0 18px 44px rgba(16,24,40,.16) !important; padding: 6px !important; }
.dropdown-item { border-radius: 10px; padding: 9px 12px; color: var(--text-color); font-weight: 600; font-size: .88rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--primary-light); color: var(--primary); }

/* Pagination */
main .pagination .page-link { border-radius: 12px !important; margin: 0 3px; border: 1px solid var(--border-color); color: var(--text-color); background: var(--card-bg); font-weight: 700; }
main .pagination .active .page-link { background: var(--grad); border-color: transparent; color: #fff; }

/* Cartes de produits / établissements : relief au survol */
main .product-card, main .etab-card, main .resto-card, main .stat-card, main .kpi-card { border-radius: var(--r-card) !important; transition: var(--transition); }
main .product-card:hover, main .etab-card:hover, main .resto-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(16,24,40,.12) !important; }

/* KPI : icônes en dégradé */
main .kpi-icon, main .stat-icon, main .stat-card .icon { border-radius: 14px !important; }

/* Animations d'entrée (comme le formulaire de connexion) */
/* « translate » (et non « transform ») : ne casse pas les éléments centrés via transform */
@keyframes drFadeUp { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
main > *:not(script):not(style) { animation: drFadeUp .45s ease both; }
@media (prefers-reduced-motion: reduce) { main > *, html body main .page-header, html body main .dr-page-head { animation: none !important; } }

/* Titres */
main h1, main h2, main h3, main .h1, main .h2, main .h3 { font-weight: 800; letter-spacing: -.02em; }

/* Liens « retour » des anciennes pages : discrets */
main .back-link:not(.position-fixed) { color: var(--text-muted); font-weight: 700; text-decoration: none; }

/* Bandeau réseau : en haut, sous l'en-tête, pour ne pas couvrir les boutons du bas */
.dr-netbar { top: calc(var(--header-h, 64px) + 10px); bottom: auto; transform: translate(-50%, -16px); z-index: 1060; }
.dr-netbar.show { transform: translate(-50%, 0); }
body.shell-staff .dr-netbar { top: calc(var(--topbar-h, 64px) + 10px); }

/* Code / identifiants dans les bandeaux dégradés */
html body main .dr-page-head code, html body main .page-header code {
    background: rgba(255,255,255,.18) !important; color: #fff !important; border-radius: 8px; padding: 2px 8px; word-break: break-all;
}

/* Hub local (service en salle sans Internet) */
.dr-hub-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 800;
    background: rgba(40,167,69,.12); color: var(--success); white-space: nowrap; vertical-align: middle; }
html.dr-server-down .dr-hub-pill { background: rgba(220,53,69,.12); color: var(--danger); }