:root{--sh-bg:#020617;--sh-panel:#07101f;--sh-blue:#2563eb;--sh-cyan:#06b6d4;--sh-text:#f8fafc;--sh-muted:#94a3b8;--sh-border:rgba(59,130,246,.16)}
html{scroll-behavior:smooth}body{background:#020617!important;color:#f8fafc}::selection{background:#2563eb;color:#fff}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:#020617}::-webkit-scrollbar-thumb{background:#1e3a5f;border-radius:99px;border:2px solid #020617}
body.bg-\[\#f5f3ff\],.dark\:bg-\[\#07001a\],.dark\:bg-slate-900{background:#020617!important}
.dark .dark\:bg-\[\#07001a\],.dark .dark\:bg-\[\#0f0527\]\/95,.dark .dark\:bg-\[\#0a0120\]\/80{background:rgba(2,6,23,.94)!important}
.bg-white,.dark .dark\:bg-gray-800,.dark .dark\:bg-slate-800{background-color:#07101f!important}
.bg-gray-50,.bg-gray-100,.dark .dark\:bg-gray-900{background-color:#020617!important}
.border-gray-200,.border-gray-300,.dark .dark\:border-gray-700{border-color:rgba(59,130,246,.14)!important}
.text-gray-900,.text-gray-800,.dark .dark\:text-white{color:#f8fafc!important}
.text-gray-700,.text-gray-600,.text-gray-500,.dark .dark\:text-gray-400{color:#94a3b8!important}
input:not([type=checkbox]):not([type=radio]),select,textarea{background:#050d1c!important;color:#f8fafc!important;border-color:rgba(59,130,246,.18)!important;border-radius:12px!important}
input:focus,select:focus,textarea:focus{border-color:#3b82f6!important;box-shadow:0 0 0 3px rgba(37,99,235,.15)!important}
input::placeholder,textarea::placeholder{color:#64748b!important}
.bg-blue-600{background:linear-gradient(135deg,#2563eb,#0891b2)!important}.text-blue-600,.dark .dark\:text-blue-400{color:#60a5fa!important}
footer{background:#020611!important;border-top:1px solid rgba(59,130,246,.14)!important}
body .bg-gradient-to-br.from-blue-700{background:radial-gradient(circle at 30% 25%,rgba(37,99,235,.30),transparent 35%),radial-gradient(circle at 70% 75%,rgba(6,182,212,.16),transparent 38%),linear-gradient(145deg,#020617,#07152d)!important}
.sh-network{position:relative;overflow:hidden;padding:105px 20px 70px;background:#020617}
.sh-network:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 65%,rgba(37,99,235,.16),transparent 38%)}
.sh-network-inner{position:relative;z-index:2;max-width:1320px;margin:auto}.sh-network-head{text-align:center;max-width:820px;margin:0 auto 24px}
.sh-kicker{font-size:12px;font-weight:900;letter-spacing:.28em;text-transform:uppercase;color:#22d3ee;margin-bottom:14px}
.sh-network h2{margin:0;color:#fff;font-weight:900;letter-spacing:-.05em;line-height:.98;font-size:clamp(38px,5vw,68px)}
.sh-network h2 span{display:block;background:linear-gradient(100deg,#60a5fa,#22d3ee);-webkit-background-clip:text;background-clip:text;color:transparent}
.sh-network-sub{color:#94a3b8;margin:20px auto 0;font-size:16px}#sh-globe{width:100%;height:620px;position:relative;margin-top:-10px}
#sh-globe canvas{outline:none}.sh-globe-fallback{position:absolute;inset:15% 20%;border-radius:50%;border:1px solid rgba(56,189,248,.35);background:radial-gradient(circle at 35% 30%,#123b72,#06142d 55%,#020617 75%);box-shadow:0 0 100px rgba(37,99,235,.25)}
.sh-location-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1080px;margin:-80px auto 0;position:relative;z-index:5}
.sh-location{padding:20px 22px;border-radius:18px;background:rgba(3,10,25,.88);border:1px solid rgba(56,189,248,.22);backdrop-filter:blur(16px);box-shadow:0 18px 50px rgba(0,0,0,.35)}
.sh-location-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.sh-location-left{display:flex;align-items:center;gap:12px}.sh-flag{font-size:27px}.sh-city{font-size:17px;font-weight:800;color:#fff}.sh-country{font-size:12px;color:#64748b;margin-top:2px}
.sh-online{display:flex;align-items:center;gap:7px;color:#4ade80;font-size:11px;font-weight:900}.sh-online i{display:block;width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 12px #22c55e}
.sh-globe-note{text-align:center;color:#64748b;font-size:11px;letter-spacing:.08em;margin-top:18px}
@media(max-width:800px){#sh-globe{height:480px}.sh-location-grid{grid-template-columns:1fr;margin:-35px auto 0}.sh-network{padding-top:80px}}

/* v4: cover store/auth/client dashboard — these pages only got the base
   dark recolor (v1-v3 overrides), not the bespoke home.blade.php treatment,
   so their light-mode hover states and off-palette accents (fuchsia/indigo)
   were still showing through untouched. */
.border-gray-100{border-color:rgba(59,130,246,.14)!important}

/* v4b: the header itself on non-hero pages (store, helpdesk...) uses
   bg-white/95 + dark:bg-gray-800/95 — Tailwind's opacity-suffixed classes
   compile to a DIFFERENT selector than plain bg-gray-800, so the earlier
   dark:bg-gray-800 override above never matched it. Left the header as a
   lighter gray-800 slab visibly seamed against the page's dark navy. */
.bg-white\/95{background-color:rgba(7,16,31,.95)!important}

/* v4d: the mobile-nav overlay container (bg-white / dark:bg-gray-800 base
   classes) is meant to go transparent on desktop via its own sm:bg-transparent
   utility, but our !important override above beats it regardless of
   breakpoint — leaving a solid dark slab floating in the header next to the
   logo on every non-hero page (store, auth, client...). Restore transparency
   at the same sm breakpoint Tailwind uses (640px). */
@media(min-width:640px){.sm\:bg-transparent{background-color:transparent!important}}

/* v4e: in dark mode the overlay uses the compound class dark:sm:bg-transparent
   instead of the plain one above, and it has equal specificity + !important
   vs. our earlier .dark .dark:bg-gray-800 rule — so on the client area
   (which still showed the empty slab) that earlier rule was winning ties by
   coming first. This one is declared after it, so it wins the tie instead. */
@media(min-width:640px){.dark .dark\:sm\:bg-transparent{background-color:transparent!important}}

/* v4f: client-area jump-links nav (Espace client/Mes services/...) — clean
   up the native horizontal-scroll scrollbar to match the brand palette
   instead of the default light-gray thumb, and hint at overflow with a
   fade on the trailing edge instead of a stark cut-off "Af…" label. */
nav[aria-label="Jump links"]{position:relative}
nav[aria-label="Jump links"] > div{scrollbar-width:thin;scrollbar-color:rgba(56,189,248,.35) transparent}
nav[aria-label="Jump links"] > div::-webkit-scrollbar{height:5px}
nav[aria-label="Jump links"] > div::-webkit-scrollbar-track{background:transparent!important}
nav[aria-label="Jump links"] > div::-webkit-scrollbar-thumb{background:rgba(56,189,248,.4)!important;border-radius:99px}

/* v4g: client dashboard — two inline-styled (not class-based, so untouched
   by earlier overrides) off-palette spots. Targeted via attribute selectors
   on the raw style string rather than editing the blade files/addon, so
   these survive a theme or addon update without a merge conflict. */
[style*="rgba(15,5,39"]{background:rgba(7,16,31,.9)!important;border-color:rgba(56,189,248,.16)!important}
[style*="rgba(29,78,216,0.05)"]{background:rgba(56,189,248,.04)!important;border-color:rgba(56,189,248,.12)!important}
/* discordlink addon card header — solid Discord blurple; keep a hint of it
   as a glow instead of a flat block that clashes with the navy/cyan theme */
[style*="5865F2"]{background:radial-gradient(circle at 30% 15%,rgba(88,101,242,.4),transparent 62%),linear-gradient(135deg,#0b1330,#050914)!important}
nav[aria-label="Jump links"]::after{content:"";position:absolute;top:0;right:0;bottom:0;width:56px;background:linear-gradient(90deg,transparent,#07101f);pointer-events:none}

/* v4c: fade between the hero card's rotating locations (Gravelines/Londres/
   Beauharnois), cycled every 60s by the inline script in home.blade.php */
.sh-loc-slide{opacity:0;pointer-events:none;transition:opacity .8s ease}
.sh-loc-slide.is-active{opacity:1;pointer-events:auto}
.dark\:bg-gray-800\/95{background-color:rgba(7,16,31,.95)!important}
.bg-neutral-700,.bg-neutral-800,.dark .dark\:bg-neutral-800,.dark .dark\:bg-neutral-900{background-color:#07101f!important}
.border-neutral-700,.dark .dark\:border-neutral-700{border-color:rgba(59,130,246,.14)!important}
.text-neutral-200,.text-neutral-300{color:#e2e8f0!important}
.bg-indigo-100,.bg-indigo-50{background-color:rgba(37,99,235,.12)!important}
.text-indigo-600,.text-indigo-700{color:#60a5fa!important}

/* light-mode hover utilities (no dark: prefix, so they always fired full
   brightness against the dark background) */
.hover\:bg-blue-50:hover,.hover\:bg-gray-50:hover,.hover\:bg-gray-100:hover{background-color:rgba(37,99,235,.10)!important}
.hover\:bg-gray-700:hover,.hover\:bg-neutral-900:hover{background-color:rgba(37,99,235,.14)!important}
.hover\:text-blue-700:hover,.hover\:text-blue-600:hover{color:#7dd3fc!important}
.hover\:border-blue-300:hover,.hover\:border-blue-700:hover{border-color:rgba(56,189,248,.45)!important}

/* off-palette gradient stops (fuchsia) -> brand cyan, via Tailwind's own
   gradient custom properties so from-/via- stops still blend correctly */
.to-fuchsia-600,.to-fuchsia-700{--tw-gradient-to:#06b6d4 !important}
.via-fuchsia-500,.via-fuchsia-600{--tw-gradient-via:#0891b2 !important}
.from-fuchsia-600,.from-fuchsia-700{--tw-gradient-from:#0891b2 !important}
.text-fuchsia-500,.text-fuchsia-600{color:#22d3ee!important}

/* card hover polish shared by store/product/dashboard cards */
.rounded-2xl.border,.rounded-xl.border{transition:border-color .2s ease,box-shadow .2s ease}
.group:hover>.rounded-2xl,.rounded-2xl.hover\:shadow-xl:hover{border-color:rgba(56,189,248,.35)!important;box-shadow:0 20px 50px rgba(2,6,23,.5),0 0 0 1px rgba(56,189,248,.08)!important}

/* focus rings */
.ring-gray-600,.focus\:ring-gray-600:focus{--tw-ring-color:rgba(56,189,248,.4)!important}

/* v5: factures (espace client) — .card et .btn-* ne sont JAMAIS recouverts
   par les règles ci-dessus car leur couleur est injectée via @apply au
   moment du build (aucune classe Tailwind littérale "bg-white"/"bg-blue-600"
   ne reste dans le HTML rendu, donc les sélecteurs plus haut ne matchent
   rien) — la carte "Factures récentes" du dashboard et la page facture
   utilisent justement .card, ce qui donne un gris/violet hors charte. */
.card,.card-sm{background-color:#07101f!important;border:1px solid rgba(59,130,246,.16)!important;box-shadow:none!important}
.dark\:bg-\[\#0f0527\]{background-color:#07101f!important}
.dark .dark\:bg-gray-700\/50,.dark .dark\:bg-gray-700\/30{background-color:rgba(12,26,48,.6)!important}
.dark .dark\:divide-gray-700>:not([hidden])~:not([hidden]){border-color:rgba(59,130,246,.14)!important}
.btn-primary,.btn-info{background:linear-gradient(135deg,#2563eb,#0891b2)!important;border-color:transparent!important}
.btn-primary:hover,.btn-info:hover{background:linear-gradient(135deg,#1d4ed8,#0891b2)!important}
.btn-action-with-icon{background-color:#07101f!important;border-color:rgba(59,130,246,.16)!important;color:#94a3b8!important}
.btn-action-with-icon:hover{background-color:#0c1a30!important;color:#f8fafc!important}

/* v6: alertes (succès/erreur/avertissement/info) — les pastels Tailwind par
   défaut (jaune vif, vert clair sur fond blanc...) tranchaient violemment
   avec le thème sombre du site, très visible sur le panier ("vous devez
   être connecté" en bandeau jaune plein). Recolorées en boîtes teintées
   transparentes avec liseré, cohérent avec le reste du site. Ces mêmes
   classes servent aussi à d'autres badges de statut (services, paiement),
   qui héritent du même traitement — cohérent partout où elles apparaissent. */
.alert{border-radius:12px!important;border:1px solid transparent!important;border-left-width:3px!important}
.text-green-800,.bg-green-100{background-color:rgba(16,185,129,.08)!important;border-color:rgba(16,185,129,.35)!important;color:#6ee7b7!important}
.text-red-700,.bg-red-100{background-color:rgba(239,68,68,.08)!important;border-color:rgba(239,68,68,.35)!important;color:#fca5a5!important}
.text-yellow-800,.bg-yellow-100{background-color:rgba(245,158,11,.08)!important;border-color:rgba(245,158,11,.35)!important;color:#fcd34d!important}
.bg-primary{background:linear-gradient(135deg,#2563eb,#0891b2)!important}