@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&display=swap');
/* Charte HYGEXO · Hygiène & Emballage : bleu marine du logo + acier brossé */
:root{
  --hx-navy:#032457; --hx-navy-2:#0b3a7a; --hx-navy-3:#062e6b; --hx-steel:#8d97a5; --hx-steel-light:#c9cfd7; --hx-steel-soft:#e8ecf1;
  --bg:#f3f5f8; --surface:#ffffff; --sunk:#e7ebf0; --fg:#121a26; --muted:#5d6878; --line:#d5dbe3;
  --accent:#032457; --accent-fg:#ffffff; --mint:#0b3a7a; --mint-soft:#e3eaf5; --info:#0b3a7a;
  --brand-font:"Montserrat","Schibsted Grotesk",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0c121b; --surface:#141c28; --sunk:#1b2533; --fg:#e9edf2; --muted:#a3adba; --line:#2a3545;
  --accent:#8fb0e6; --accent-fg:#06142c; --mint:#8fb0e6; --mint-soft:#1d2b42;
}}
:root[data-theme="dark"]{--bg:#0c121b; --surface:#141c28; --sunk:#1b2533; --fg:#e9edf2; --muted:#a3adba; --line:#2a3545; --accent:#8fb0e6; --accent-fg:#06142c; --mint:#8fb0e6; --mint-soft:#1d2b42}

/* En-tête : blanc, logo couleur, liseré acier puis marine */
.top,.top[class]{background:#fff!important;color:var(--hx-navy);border-bottom:3px solid var(--hx-navy);box-shadow:0 1px 0 var(--hx-steel-light),0 6px 18px rgb(3 36 87 / .06)}
.top .brand{color:var(--hx-navy);gap:0}
.brand-mark{width:158px;height:46px;border-radius:0;background:url("uploads/ag-logo.png") left center/contain no-repeat!important;color:transparent!important;font-size:0!important;box-shadow:none!important}
.brand-mark::after{display:none!important}
.top .brand b,.top .brand small{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.top .nav a{color:#3a4658}
.top .nav a:hover{color:var(--hx-navy);background:var(--hx-steel-soft)}
.top .nav a[aria-current="page"]{color:#fff;background:var(--hx-navy)}
.top .nav .badge{background:#d23c3c}
.top .who{color:var(--hx-navy)}
.top .role{background:var(--hx-steel-soft);color:var(--hx-navy)}
.top .role.admin{background:var(--hx-navy);color:#fff}
.top .role.commercial{background:linear-gradient(180deg,#e9edf2,#c9cfd7);color:var(--hx-navy)}
.top .btn.ghost{color:var(--hx-navy)}.top .btn.ghost:hover{background:var(--hx-steel-soft)}
.top .fbell{background:#fff;border-color:var(--line);color:var(--hx-navy)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .top{background:#fff!important}}

/* Boutons et repères */
.btn.primary{background:var(--hx-navy);border-color:var(--hx-navy);color:#fff}
.btn.primary:hover{filter:none;background:var(--hx-navy-2);box-shadow:inset 0 -2px 0 var(--hx-steel-light)}
.btn.mint{background:linear-gradient(180deg,#f4f6f9,#cdd3db);border-color:#b7bfca;color:var(--hx-navy)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn.primary{background:#8fb0e6;border-color:#8fb0e6;color:#06142c}}
.chip[aria-pressed="true"]{background:var(--hx-navy);border-color:var(--hx-navy);color:#fff}
.kpi.hl{background:linear-gradient(135deg,var(--hx-navy),var(--hx-navy-2));border-color:var(--hx-navy);color:#fff}
.kpi.hl .v{color:#dfe5ee}
.head h1::after{content:"";display:block;width:56px;height:3px;background:linear-gradient(90deg,var(--hx-navy) 0 55%,var(--hx-steel) 55%);border-radius:3px;margin-top:8px}
.cartbar{background:var(--hx-navy);border-top:2px solid var(--hx-steel-light)}
.cartbar .btn{background:#fff;color:var(--hx-navy);border-color:#fff}
.step .n{background:var(--mint-soft);color:var(--hx-navy)}

/* Accueil : photo du dépôt HYGEXO + logo */
.hero{position:relative;overflow:hidden;color:#fff;border-radius:18px;padding:56px 32px;
  background:linear-gradient(100deg,rgba(3,22,54,.90) 0%,rgba(3,28,68,.62) 42%,rgba(3,28,68,.05) 75%),url("uploads/hygexo-facade.jpg") center 22%/cover no-repeat;min-height:500px}
.hero-in{max-width:640px;position:relative}
.hero-in::before{content:"";display:block;width:300px;height:96px;background:url("uploads/hygexo-logo-blanc.png") left center/contain no-repeat;margin-bottom:14px}
.hero .eyebrow{color:var(--hx-steel-light);opacity:1}
.hero h1{font-family:var(--brand-font);letter-spacing:.01em;color:#fff}
.hero .btn.primary{background:#fff;border-color:#fff;color:var(--hx-navy)}
.hero .btn{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.35)}
.hero::after{content:"Hygiène · Emballage · Livraison";position:absolute;right:24px;bottom:18px;font-family:var(--brand-font);font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--hx-steel-light)}
@media (max-width:700px){.hero{padding:30px 18px 52px;background-position:center,62% 22%}.hero-in::before{width:220px;height:70px}.hero::after{left:18px;right:auto}}
/* En-tête compact : menu sur deux lignes maximum */
.top-in{max-width:1440px;gap:10px 18px;padding-block:8px}
.top .nav{gap:2px 2px;justify-content:flex-start;align-content:center}
.top .nav a{padding:6px 9px;font-size:13.5px;border-radius:7px}
@media (max-width:700px){.brand-mark{width:124px;height:38px}}