/*
 * ESHOPPING CENTRALE — Finition visuelle globale
 * Couche purement graphique chargée après les styles historiques des pages.
 * Aucun comportement métier n'est défini ici.
 */
:root {
    --ui-surface: #ffffff;
    --ui-surface-soft: #f8fafc;
    --ui-border: #e7ecf2;
    --ui-border-strong: #dbe3ec;
    --ui-text: #0f172a;
    --ui-muted: #64748b;
    --ui-muted-soft: #94a3b8;
    --ui-radius-sm: 9px;
    --ui-radius: 14px;
    --ui-radius-lg: 18px;
    --ui-shadow: 0 1px 2px rgba(15,23,42,.03), 0 10px 28px -14px rgba(15,23,42,.18);
    --ui-shadow-hover: 0 2px 4px rgba(15,23,42,.04), 0 18px 36px -16px rgba(15,23,42,.22);
}

html { scroll-padding-top: 92px; }
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    line-height: 1.5;
}
::selection { background: rgba(234,88,12,.18); color: #9a3412; }

/* Navigation : plus nette, avec repère de la rubrique courante. */
nav {
    box-shadow: 0 1px 0 rgba(15,23,42,.035), 0 8px 30px -24px rgba(15,23,42,.28) !important;
}
nav .nav-container > a.serif {
    letter-spacing: -.02em;
    white-space: nowrap;
    transition: opacity .2s ease, transform .2s ease;
}
nav .nav-container > a.serif:hover { opacity: .86; transform: translateY(-1px); }
.nav-item {
    border-radius: 9px !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}
.nav-item.active {
    color: var(--azure) !important;
    background: rgba(234,88,12,.075) !important;
    border-color: rgba(234,88,12,.18) !important;
}
.nav-item.active::before {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 7px;
    height: 2px;
    border-radius: 999px;
    background: var(--azure);
}
.dropdown-menu {
    border-radius: 12px !important;
    padding: 8px !important;
    box-shadow: 0 18px 40px -18px rgba(15,23,42,.35) !important;
}
.dropdown-item {
    border-radius: 8px !important;
    line-height: 1.35;
}
.dropdown-item.active {
    background: rgba(234,88,12,.09) !important;
    color: var(--azure) !important;
    font-weight: 800 !important;
    border-color: rgba(234,88,12,.16) !important;
}
#mobileNavMenu a.active {
    color: var(--azure) !important;
    background: rgba(234,88,12,.07) !important;
    border-left: 3px solid var(--azure);
}
#mobileNavMenu .mnav-section { letter-spacing: .08em; }

/* Surfaces / cartes */
.glass-card,
.graph-card {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: var(--ui-shadow) !important;
}
.glass-card:hover,
.graph-card:hover {
    border-color: var(--ui-border-strong) !important;
    box-shadow: var(--ui-shadow-hover) !important;
}
.graph-card { padding: 24px !important; }
.service-card {
    border-radius: var(--ui-radius) !important;
    border-color: var(--ui-border) !important;
    box-shadow: var(--ui-shadow) !important;
}
.service-card:hover { box-shadow: var(--ui-shadow-hover) !important; }
.service-icon { border-radius: 12px !important; }

/* Hero : conserve les couleurs de chaque module, améliore uniquement la finition. */
.hero-banner {
    border-radius: var(--ui-radius-lg) !important;
    border: 1px solid rgba(255,255,255,.15);
    box-shadow: 0 20px 44px -20px rgba(15,23,42,.35) !important;
}
header.hero-banner .hero-banner-content { margin-bottom: 0 !important; }
.hero-banner h1 { text-wrap: balance; }
.hero-banner p { line-height: 1.6; }
.hero-stat {
    border-radius: 12px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.hero-stat span { font-size: 11px !important; }

/* Lisibilité : on remonte légèrement la taille et le contraste des labels. */
label {
    font-size: 11px !important;
    color: var(--ui-muted) !important;
    line-height: 1.35;
}
.hero-banner label { color: rgba(255,255,255,.86) !important; }
.hero-banner .text-\[10px\] { font-size: 11px !important; }

/* Champs de saisie */
.input-field,
input.input-field,
select.input-field,
textarea.input-field {
    min-height: 42px;
    border: 1px solid var(--ui-border-strong) !important;
    border-radius: var(--ui-radius-sm) !important;
    background: #fff !important;
    color: var(--ui-text) !important;
    font-size: 13px !important;
    box-shadow: 0 1px 1px rgba(15,23,42,.02);
}
textarea.input-field { min-height: 96px; resize: vertical; }
.input-field:hover { border-color: #cbd5e1 !important; }
.input-field:focus {
    border-color: var(--azure) !important;
    box-shadow: 0 0 0 3px rgba(234,88,12,.11) !important;
    outline: none !important;
}
.input-field::placeholder { color: #a8b3c2; opacity: 1; }
input[readonly].input-field,
input[disabled].input-field,
select[disabled].input-field {
    background: #f8fafc !important;
    color: #64748b !important;
}

/* Boutons communs : même hauteur et rythme, sans changer leur couleur métier. */
.btn-azure,
.btn-indigo,
.btn-teal,
.btn-secondary,
.btn-success,
.btn-green,
.btn-outline,
.btn-export-header,
.btn-product-search {
    min-height: 40px;
    border-radius: var(--ui-radius-sm) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    line-height: 1.15;
    white-space: nowrap;
    box-shadow: 0 1px 1px rgba(15,23,42,.04);
}
.btn-azure,
.btn-indigo,
.btn-teal,
.btn-success,
.btn-green,
.btn-product-search { font-weight: 800 !important; }
.btn-outline {
    background: #fff !important;
    border-color: var(--ui-border-strong) !important;
    color: #475569 !important;
}
.btn-outline:hover { background: #f8fafc !important; }
.btn-danger,
.btn-voir-detail {
    min-height: 32px;
    border-radius: 8px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.btn-export-excel { box-shadow: 0 6px 14px -8px rgba(21,128,61,.55) !important; }
.btn-export-pdf { box-shadow: 0 6px 14px -8px rgba(185,28,28,.55) !important; }
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(234,88,12,.18) !important;
    outline-offset: 2px;
}

/* Badges */
.badge {
    font-size: 10px !important;
    line-height: 1.25;
    padding: 5px 10px !important;
    letter-spacing: .035em;
    border-radius: 999px !important;
}

/* Tableaux : plus lisibles et plus adaptés au travail quotidien. */
.table-wrap {
    border-radius: var(--ui-radius) !important;
    scrollbar-gutter: stable;
}
table { border-collapse: separate; border-spacing: 0; }
table thead th {
    background: #f8fafc !important;
    color: #64748b !important;
    font-size: 11px !important;
    letter-spacing: .055em !important;
    line-height: 1.25;
    padding: 14px 16px !important;
    border-bottom: 1px solid #e9eef4 !important;
}
.table-wrap table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
}
table tbody td {
    padding: 14px 16px !important;
    color: #475569;
    vertical-align: middle;
    border-bottom-color: #f0f3f7 !important;
}
table tbody tr:hover td { background: #fafcff !important; }
table tbody tr:last-child td { border-bottom: 0 !important; }

/* Modales */
.modal-overlay {
    background: rgba(15,23,42,.58) !important;
    backdrop-filter: blur(5px) !important;
}
.modal-box {
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,.85);
    box-shadow: 0 28px 70px -24px rgba(15,23,42,.45) !important;
}
.modal-box h2.serif { letter-spacing: -.025em; }
.modal-box form { color: var(--ui-text); }

/* Pagination : compatible avec les boutons/liens déjà générés par les pages. */
#pagination button,
#pagination a {
    min-width: 36px;
    min-height: 36px;
    border-radius: 8px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Cartes et barres métier */
.product-toolbar,
.product-table-head { border-color: var(--ui-border) !important; }
.product-toolbar-title,
.product-table-title { letter-spacing: -.01em; }
.filter-bar { row-gap: 12px !important; }

/* Page de connexion : finition uniquement, sans toucher à l'authentification. */
body > .glass-card.max-w-md {
    box-shadow: 0 28px 70px -22px rgba(15,23,42,.48) !important;
    border: 1px solid rgba(255,255,255,.82) !important;
}
body > .glass-card.max-w-md label { color: #64748b !important; }
body > .glass-card.max-w-md footer p { color: #94a3b8 !important; }

/* Responsive global */
@media (max-width: 1024px) {
    .nav-container { padding-left: 22px !important; padding-right: 22px !important; }
}

@media (max-width: 768px) {
    body > .max-w-7xl,
    body > .max-w-6xl,
    body > .max-w-5xl { padding-left: 16px !important; padding-right: 16px !important; }

    header.hero-banner {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 20px;
        padding: 26px 20px !important;
    }
    header.hero-banner > .flex,
    header.hero-banner > div:last-child:not(.hero-banner-content) {
        max-width: 100%;
        flex-wrap: wrap;
    }
    header.hero-banner h1 { font-size: 2rem !important; line-height: 1.05 !important; }
    .hero-banner p { max-width: 100%; }
    .hero-stats { gap: 10px !important; }
    .hero-stat { min-width: calc(50% - 5px) !important; padding: 13px 14px !important; }
    .hero-stat strong { font-size: 1.5rem !important; }

    .glass-card,
    .graph-card,
    .service-card { border-radius: 12px !important; }

    .modal-box { padding: 20px !important; border-radius: 14px !important; }

    /* Les formulaires à 2/3 colonnes deviennent lisibles sur téléphone. */
    form .grid.grid-cols-2,
    form .grid.grid-cols-3,
    .modal-box .grid.grid-cols-2,
    .modal-box .grid.grid-cols-3 {
        grid-template-columns: minmax(0,1fr) !important;
    }

    .btn-azure,
    .btn-indigo,
    .btn-teal,
    .btn-secondary,
    .btn-success,
    .btn-green,
    .btn-outline,
    .btn-export-header,
    .btn-product-search { min-height: 42px; }

    table thead th,
    table tbody td { padding-left: 13px !important; padding-right: 13px !important; }
}

@media (max-width: 480px) {
    .hero-stat { min-width: 100% !important; }
    .modal-box { padding: 18px !important; }
    body > .glass-card.max-w-md { margin-left: 0 !important; margin-right: 0 !important; }
}

/* Moins de mouvement si l'utilisateur le demande au niveau du système. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Les exports conservent volontairement leurs couleurs métier distinctes. */
.btn-outline.btn-export-excel,
.btn-export-excel {
    background: #15803d !important;
    color: #ffffff !important;
    border-color: #166534 !important;
}
.btn-outline.btn-export-excel:hover,
.btn-export-excel:hover {
    background: #166534 !important;
    color: #ffffff !important;
}
.btn-outline.btn-export-pdf,
.btn-export-pdf {
    background: #b91c1c !important;
    color: #ffffff !important;
    border-color: #991b1b !important;
}
.btn-outline.btn-export-pdf:hover,
.btn-export-pdf:hover {
    background: #991b1b !important;
    color: #ffffff !important;
}

/* Les micro-textes historiques restent compacts mais deviennent plus lisibles. */
.text-\[9px\]:not(.badge) { font-size: 10px !important; }
.text-\[10px\]:not(.badge) { font-size: 11px !important; }


/* ===== Portail consultation société ===== */
.consult-nav { box-shadow: 0 10px 30px rgba(15,23,42,.06); }
.consult-nav-inner { gap: 28px; min-height: 74px; }
.brand-link { display:flex; align-items:center; gap:11px; text-decoration:none; flex-shrink:0; }
.brand-logo { width:38px; height:38px; object-fit:contain; filter:drop-shadow(0 5px 10px rgba(234,88,12,.16)); }
.brand-name { color:#EA580C; font-size:16px; font-weight:800; white-space:nowrap; }
.consultation-menu-wrap { flex:1; display:flex; justify-content:center; }
.consultation-menu { margin-right:0 !important; padding:25px 18px !important; border-radius:12px; }
.consultation-menu.active,.consultation-menu:hover { color:#EA580C; background:rgba(234,88,12,.055); }
.consultation-menu-title { letter-spacing:.14em; }
.consultation-chevron { margin-left:7px; }
.consultation-mega-menu { left:50% !important; transform:translateX(-50%); width:min(620px,78vw); min-width:560px !important; padding:0 !important; overflow:hidden; border-radius:16px !important; border-top:0 !important; box-shadow:0 24px 60px rgba(15,23,42,.16) !important; }
.consultation-menu-header { padding:18px 20px 14px; background:linear-gradient(135deg,#fff7ed,#fff); border-bottom:1px solid #ffedd5; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.consultation-menu-header strong { font:800 12px 'Sora',sans-serif; color:#9a3412; text-transform:uppercase; letter-spacing:.08em; }
.consultation-menu-header span { font-size:11px; color:#94a3b8; max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.consultation-menu-grid { padding:12px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.consultation-menu-grid .dropdown-item { border-radius:10px; padding:13px 12px !important; background:#f8fafc; line-height:1.3; }
.consultation-menu-grid .dropdown-item:hover,.consultation-menu-grid .dropdown-item.active { background:#fff7ed; color:#c2410c; }
.company-session-box { align-items:center; gap:15px !important; padding-left:18px; border-left:1px solid #eef2f7; }
.company-session-text { display:flex; flex-direction:column; align-items:flex-end; line-height:1.25; max-width:210px; }
.company-session-label { color:#94a3b8; font-size:8px; text-transform:uppercase; letter-spacing:.14em; font-weight:800; }
.company-session-text strong { color:#334155; font-size:11px; margin-top:3px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; max-width:210px; }
.company-session-text small { color:#EA580C; font-size:9px; font-weight:800; margin-top:2px; }
.logout-link { color:#ef4444; border:1px solid #fee2e2; background:#fff; border-radius:10px; padding:9px 12px; text-decoration:none; font-size:9px; font-weight:800; letter-spacing:.1em; }
.logout-link:hover { background:#fef2f2; }
.mnav-company { padding:14px 18px; background:#fff7ed; border-bottom:1px solid #ffedd5; display:flex; flex-direction:column; }
.mnav-company span { font-size:9px; color:#9a3412; text-transform:uppercase; font-weight:800; letter-spacing:.1em; }
.mnav-company strong { margin-top:3px; color:#334155; font-size:12px; }
@media(max-width:1000px){ .consultation-menu-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.company-session-text{display:none}.consultation-mega-menu{min-width:500px} }
@media(max-width:768px){ .brand-name{font-size:14px}.brand-logo{width:32px;height:32px}.consultation-menu-wrap,.company-session-box{display:none!important}.consult-nav-inner{justify-content:space-between} }

/* ===== Accueil consultation 2026 : accès direct, sans menu Consultation ===== */
.portal-topbar { height:76px !important; background:rgba(255,255,255,.97) !important; border-bottom:1px solid #eef2f7 !important; }
.portal-topbar-inner { min-height:76px; }
.portal-session { display:flex !important; margin-left:auto; }
.portal-welcome { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; padding:10px 2px 4px; }
.portal-eyebrow { display:block; color:#ea580c; font-size:10px; font-weight:800; letter-spacing:.16em; margin-bottom:9px; }
.portal-welcome h1 { margin:0; color:#0f172a; font-size:36px; line-height:1.1; letter-spacing:-.04em; }
.portal-welcome p { margin:10px 0 0; color:#64748b; font-size:14px; }
.portal-company-pill { min-width:230px; padding:13px 16px; background:#fff; border:1px solid #e8edf3; border-radius:14px; box-shadow:0 8px 24px rgba(15,23,42,.05); display:flex; flex-direction:column; align-items:flex-end; }
.portal-company-pill span { font-size:8px; color:#94a3b8; font-weight:800; text-transform:uppercase; letter-spacing:.14em; }
.portal-company-pill strong { margin-top:4px; color:#334155; font-size:12px; }
.portal-company-pill small { margin-top:2px; color:#ea580c; font-size:10px; font-weight:800; }
.portal-services { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:44px; }
.portal-service-card { min-height:104px; display:flex; align-items:center; gap:15px; padding:18px; background:#fff; border:1px solid #e8edf3; border-radius:16px; text-decoration:none; box-shadow:0 8px 28px rgba(15,23,42,.045); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.portal-service-card:hover { transform:translateY(-3px); border-color:#fed7aa; box-shadow:0 16px 38px rgba(234,88,12,.10); }
.portal-service-icon { width:40px; height:40px; flex:0 0 40px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:#fff7ed; color:#ea580c; font:800 11px 'Sora',sans-serif; }
.portal-service-card div { min-width:0; flex:1; display:flex; flex-direction:column; }
.portal-service-card strong { color:#1e293b; font:700 13px 'Sora',sans-serif; line-height:1.25; }
.portal-service-card small { margin-top:6px; color:#94a3b8; font-size:11px; line-height:1.4; }
.portal-service-card b { color:#fb923c; font-size:20px; font-weight:500; transition:transform .18s ease; }
.portal-service-card:hover b { transform:translateX(4px); }
@media(max-width:1000px){ .portal-services{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:768px){ .portal-session{display:flex!important}.portal-session .company-session-text{display:none}.portal-welcome{align-items:flex-start;flex-direction:column}.portal-company-pill{align-items:flex-start;min-width:0;width:100%}.portal-services{grid-template-columns:1fr}.portal-welcome h1{font-size:30px} }

/* ========================================================================== */
/* ESHOPPING CENTRALE — DESIGN PROFESSIONNEL 2026                            */
/* Couche finale : présentation uniquement, aucune logique métier.            */
/* ========================================================================== */
:root {
    --pro-brand: #ea580c;
    --pro-brand-dark: #c2410c;
    --pro-brand-soft: #fff7ed;
    --pro-ink: #0f172a;
    --pro-text: #334155;
    --pro-muted: #64748b;
    --pro-faint: #94a3b8;
    --pro-line: #e8edf3;
    --pro-line-strong: #dbe3ec;
    --pro-page: #f7f9fc;
    --pro-card: rgba(255,255,255,.96);
    --pro-shadow-xs: 0 1px 2px rgba(15,23,42,.035);
    --pro-shadow-sm: 0 8px 26px -18px rgba(15,23,42,.28);
    --pro-shadow-md: 0 18px 44px -24px rgba(15,23,42,.28);
    --pro-shadow-brand: 0 18px 42px -24px rgba(234,88,12,.42);
    --pro-r-sm: 10px;
    --pro-r-md: 16px;
    --pro-r-lg: 22px;
}

html { background: var(--pro-page); }
body {
    background-color: var(--pro-page) !important;
    background-image:
        radial-gradient(circle at 0 0, rgba(234,88,12,.055), transparent 34rem),
        radial-gradient(circle at 100% 0, rgba(79,70,229,.035), transparent 32rem),
        linear-gradient(180deg,#fbfcfe 0,#f7f9fc 38%,#f8fafc 100%) !important;
    color: var(--pro-ink) !important;
}

/* Topbar */
.portal-topbar,
.consult-nav {
    height: 78px !important;
    background: rgba(255,255,255,.94) !important;
    border-bottom: 1px solid rgba(226,232,240,.9) !important;
    box-shadow: 0 8px 32px -28px rgba(15,23,42,.55) !important;
    backdrop-filter: blur(16px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
}
.portal-topbar-inner,
.consult-nav-inner { min-height: 78px !important; }
.brand-link { gap: 12px !important; }
.brand-logo {
    width: 42px !important;
    height: 42px !important;
    padding: 4px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #f1f5f9;
    box-shadow: 0 8px 20px -12px rgba(234,88,12,.55);
}
.brand-name {
    color: var(--pro-ink) !important;
    font-size: 15px !important;
    letter-spacing: -.025em !important;
}
.brand-name::after {
    content: '  •  CONSULTATION';
    color: var(--pro-brand);
    font-family: 'Inter',sans-serif;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .12em;
    vertical-align: 2px;
}
.company-session-box {
    border-left: 1px solid var(--pro-line) !important;
    padding-left: 22px !important;
    gap: 16px !important;
}
.company-session-label { color: var(--pro-faint) !important; }
.company-session-text strong { color: var(--pro-text) !important; font-weight: 800 !important; }
.company-session-text small { color: var(--pro-brand) !important; }
.logout-link {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px !important;
    padding: 9px 14px !important;
    color: #b91c1c !important;
    border-color: #fee2e2 !important;
    background: #fff !important;
    transition: .18s ease !important;
}
.logout-link:hover { background: #fef2f2 !important; border-color: #fecaca !important; transform: translateY(-1px); }

/* Largeurs et rythme de page */
body > .max-w-7xl,
body > .max-w-6xl,
body > .max-w-5xl,
body > .max-w-4xl {
    padding-bottom: 28px;
}

/* Accueil */
.portal-welcome {
    position: relative;
    overflow: hidden;
    margin-top: 8px;
    padding: 30px 32px !important;
    border-radius: var(--pro-r-lg);
    background: linear-gradient(135deg,#fff 0%,#fffaf6 62%,#fff7ed 100%);
    border: 1px solid #f1e8df;
    box-shadow: var(--pro-shadow-md);
}
.portal-welcome::before {
    content: '';
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    right: -80px;
    top: -105px;
    background: radial-gradient(circle,rgba(234,88,12,.13),rgba(234,88,12,0) 68%);
    pointer-events: none;
}
.portal-eyebrow {
    color: var(--pro-brand) !important;
    font-size: 9px !important;
    letter-spacing: .18em !important;
}
.portal-welcome h1 {
    color: var(--pro-ink) !important;
    font-size: clamp(32px,4vw,48px) !important;
    line-height: 1.05 !important;
    letter-spacing: -.05em !important;
}
.portal-welcome p { color: var(--pro-muted) !important; font-size: 13px !important; max-width: 580px; }
.portal-company-pill {
    position: relative;
    z-index: 1;
    min-width: 240px !important;
    padding: 15px 17px !important;
    background: rgba(255,255,255,.88) !important;
    border: 1px solid rgba(234,88,12,.12) !important;
    box-shadow: 0 12px 28px -20px rgba(234,88,12,.45) !important;
}
.portal-company-pill strong { font-size: 13px !important; color: var(--pro-ink) !important; }

.portal-services { gap: 16px !important; margin-top: 18px; }
.portal-service-card {
    position: relative;
    overflow: hidden;
    min-height: 112px !important;
    padding: 20px !important;
    border-radius: var(--pro-r-md) !important;
    border: 1px solid var(--pro-line) !important;
    background: rgba(255,255,255,.96) !important;
    box-shadow: var(--pro-shadow-sm) !important;
}
.portal-service-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 3px;
    border-radius: 0 99px 99px 0;
    background: var(--pro-brand);
    opacity: 0;
    transform: scaleY(.45);
    transition: .2s ease;
}
.portal-service-card:hover {
    border-color: #fed7aa !important;
    box-shadow: var(--pro-shadow-brand) !important;
    transform: translateY(-3px) !important;
}
.portal-service-card:hover::before { opacity: 1; transform: scaleY(1); }
.portal-service-icon {
    width: 44px !important;
    height: 44px !important;
    flex-basis: 44px !important;
    border-radius: 13px !important;
    background: linear-gradient(145deg,#fff7ed,#ffedd5) !important;
    border: 1px solid #fed7aa;
    color: var(--pro-brand-dark) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.portal-service-card strong { font-size: 13px !important; color: var(--pro-ink) !important; }
.portal-service-card small { color: var(--pro-muted) !important; font-size: 11px !important; }
.portal-service-card b { color: var(--pro-brand) !important; }

/* Héros métier */
.hero-banner {
    position: relative;
    overflow: hidden;
    padding: 34px 34px !important;
    border-radius: var(--pro-r-lg) !important;
    box-shadow: 0 22px 48px -26px rgba(15,23,42,.46) !important;
}
.hero-banner::before,
.hero-banner::after { opacity: .72; }
.hero-banner h1 { letter-spacing: -.045em !important; }
.hero-banner p { letter-spacing: .14em !important; opacity: .88; }

/* Cartes / panneaux */
.glass-card,
.graph-card {
    border: 1px solid var(--pro-line) !important;
    border-radius: var(--pro-r-md) !important;
    background: var(--pro-card) !important;
    box-shadow: var(--pro-shadow-sm) !important;
}
.glass-card:hover,
.graph-card:hover { border-color: var(--pro-line-strong) !important; box-shadow: var(--pro-shadow-md) !important; }
.graph-card { position: relative; overflow: hidden; }
.graph-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,var(--pro-brand),#fb923c 42%,#fed7aa);
    opacity: .88;
}

/* Filtres */
.glass-card.p-6.mb-8,
.glass-card.p-6.mb-6,
.glass-card.p-6.mb-10 {
    backdrop-filter: blur(8px);
}
label {
    color: var(--pro-muted) !important;
    font-weight: 800 !important;
    letter-spacing: .055em;
}
.input-field,
input.input-field,
select.input-field,
textarea.input-field {
    min-height: 44px !important;
    padding: 10px 13px !important;
    border: 1px solid var(--pro-line-strong) !important;
    border-radius: var(--pro-r-sm) !important;
    background-color: #fff !important;
    box-shadow: var(--pro-shadow-xs) !important;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease !important;
}
select.input-field { cursor: pointer; }
.input-field:hover { border-color: #cbd5e1 !important; }
.input-field:focus {
    border-color: #fb923c !important;
    box-shadow: 0 0 0 4px rgba(234,88,12,.10) !important;
}

/* Boutons */
.btn-azure,
.btn-indigo,
.btn-teal,
.btn-outline,
.btn-success,
.btn-green,
.btn-secondary,
.btn-export-header,
.btn-product-search {
    min-height: 42px !important;
    padding: 10px 17px !important;
    border-radius: var(--pro-r-sm) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .065em !important;
    box-shadow: var(--pro-shadow-xs) !important;
}
.btn-azure {
    background: linear-gradient(135deg,#ea580c,#f97316) !important;
    box-shadow: 0 10px 22px -14px rgba(234,88,12,.72) !important;
}
.btn-azure:hover { box-shadow: 0 15px 26px -14px rgba(234,88,12,.72) !important; }
.btn-outline { background: #fff !important; border: 1px solid var(--pro-line-strong) !important; color: #475569 !important; }
.btn-outline:hover { border-color: #fdba74 !important; color: var(--pro-brand-dark) !important; background: #fffaf7 !important; }
.btn-voir-detail { min-height: 34px !important; border-radius: 9px !important; }

/* Tableaux */
.table-wrap {
    overflow: auto !important;
    border-radius: var(--pro-r-md) !important;
    box-shadow: var(--pro-shadow-sm) !important;
}
table { font-variant-numeric: tabular-nums; }
table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #f8fafc !important;
    color: #64748b !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .07em !important;
    padding: 15px 16px !important;
    border-bottom: 1px solid #e5eaf0 !important;
}
table tbody td {
    padding: 15px 16px !important;
    color: #475569 !important;
    border-bottom: 1px solid #f0f3f7 !important;
}
table tbody tr:nth-child(even) td { background: rgba(248,250,252,.46); }
table tbody tr:hover td { background: #fff8f3 !important; }
table tbody tr:last-child td { border-bottom: 0 !important; }

/* Badges */
.badge {
    padding: 5px 10px !important;
    border-radius: 999px !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: .045em !important;
}

/* Modal */
.modal-overlay { background: rgba(15,23,42,.62) !important; backdrop-filter: blur(7px) !important; }
.modal-box {
    border-radius: 20px !important;
    border: 1px solid rgba(255,255,255,.86) !important;
    box-shadow: 0 34px 90px -30px rgba(15,23,42,.62) !important;
}
.modal-box h2 { color: var(--pro-ink) !important; }

/* Pagination */
#pagination,
#paginationProduits { gap: 8px !important; }
#pagination button,
#pagination a,
#paginationProduits button,
#paginationProduits a {
    min-width: 40px !important;
    min-height: 38px !important;
    border-radius: 10px !important;
    background: #fff;
    border: 1px solid var(--pro-line) !important;
}

/* Login : rendu premium et sobre */
body:has(#loginForm) {
    background:
        linear-gradient(135deg,rgba(2,6,23,.72),rgba(15,23,42,.58)),
        url('eshopping.png') center/cover no-repeat fixed !important;
}
body:has(#loginForm)::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 15% 10%,rgba(234,88,12,.20),transparent 28rem),
        radial-gradient(circle at 92% 90%,rgba(251,146,60,.13),transparent 25rem);
    pointer-events: none;
}
body > .glass-card.max-w-md {
    max-width: 460px !important;
    padding: 46px !important;
    border-radius: 24px !important;
    background: rgba(255,255,255,.94) !important;
    box-shadow: 0 38px 100px -34px rgba(2,6,23,.75) !important;
    border: 1px solid rgba(255,255,255,.9) !important;
}
body > .glass-card.max-w-md header img {
    width: 78px !important;
    height: 78px !important;
    padding: 7px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 40px -22px rgba(234,88,12,.65);
}
body > .glass-card.max-w-md .input-field { min-height: 50px !important; padding: 13px 16px !important; }
body > .glass-card.max-w-md .btn-azure { min-height: 50px !important; border-radius: 12px !important; }

/* Accessibilité et robustesse */
a, button { -webkit-tap-highlight-color: transparent; }
button, select, input, textarea { font-family: inherit; }
button:disabled { opacity: .55 !important; cursor: not-allowed !important; }

/* Responsive */
@media (max-width: 1100px) {
    .nav-container { padding-left: 20px !important; padding-right: 20px !important; }
    .brand-name::after { display: none; }
    .portal-services { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width: 768px) {
    body { padding-top: 68px !important; }
    .portal-topbar,.consult-nav { height: 64px !important; }
    .portal-topbar-inner,.consult-nav-inner { min-height: 64px !important; }
    .brand-logo { width: 36px !important; height: 36px !important; border-radius: 10px; }
    .brand-name { font-size: 13px !important; }
    .portal-session { display: flex !important; padding-left: 10px !important; border-left: 0 !important; }
    .portal-session .company-session-text { display: none !important; }
    .logout-link { padding: 8px 10px !important; min-height: 34px; }
    .portal-welcome { padding: 24px 20px !important; gap: 18px !important; }
    .portal-welcome h1 { font-size: 31px !important; }
    .portal-services { grid-template-columns: 1fr !important; gap: 12px !important; }
    .portal-service-card { min-height: 96px !important; padding: 17px !important; }
    .hero-banner { padding: 26px 20px !important; border-radius: 18px !important; }
    .hero-banner h1 { font-size: 2rem !important; }
    .glass-card,.graph-card,.table-wrap { border-radius: 14px !important; }
    table thead th, table tbody td { padding: 13px 12px !important; }
    body > .glass-card.max-w-md { padding: 32px 24px !important; border-radius: 20px !important; }
}
@media (max-width: 480px) {
    .nav-container { padding-left: 12px !important; padding-right: 12px !important; }
    .brand-name { font-size: 12px !important; }
    .portal-welcome { border-radius: 16px !important; }
    .portal-company-pill { width: 100% !important; min-width: 0 !important; align-items: flex-start !important; }
}