/* ============================================================================
 *  Nexhost 3D — Design system
 *  Palette : navy profond + accent orange. Surfaces douces, ombres discrètes.
 *  Toutes les classes existantes (admin inclus) restent compatibles.
 * ==========================================================================*/

/* ------------------------------------------------------------------- Tokens */
:root{
  /* neutres */
  --ink:#0b1220;          /* titres */
  --ink-2:#1e293b;
  --body:#334155;
  --muted:#5b6878;
  --line:#e5eaf1;
  --line-2:#eef2f8;
  --surface:#ffffff;
  --bg:#f6f8fb;
  --bg-2:#eef2f8;

  /* marque */
  --accent:#ff5a1f;
  --accent-600:#ea4c0d;
  --accent-700:#c2410c;
  --accent-soft:#fff2ec;
  --accent-ring:rgba(255,90,31,.30);
  --dark:#0b1220;
  --dark-2:#111c33;

  /* états */
  --ok:#15803d;  --ok-soft:#eafaf0;
  --warn:#b45309; --warn-soft:#fff7ed;
  --danger:#dc2626; --danger-soft:#fef2f2;
  --info:#1d4ed8; --info-soft:#eff6ff;

  /* formes */
  --r-xs:8px; --r-sm:10px; --r:14px; --r-lg:18px; --r-xl:26px; --r-full:999px;
  --sh-xs:0 1px 2px rgba(11,18,32,.06);
  --sh-sm:0 2px 8px rgba(11,18,32,.06);
  --sh:0 10px 28px -10px rgba(11,18,32,.16), 0 2px 8px rgba(11,18,32,.05);
  --sh-lg:0 30px 60px -24px rgba(11,18,32,.30), 0 6px 18px rgba(11,18,32,.07);
  --ring:0 0 0 4px var(--accent-ring);

  --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif;
  --maxw:1160px;
  --header-h:68px;
}

/* --------------------------------------------------------------------- Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);color:var(--body);background:var(--bg);
  line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-size:16px;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{color:var(--ink);line-height:1.18;letter-spacing:-.02em;margin:0 0 .5rem;font-weight:800}
h1{font-size:clamp(2rem,4.4vw,3.35rem)}
h2{font-size:clamp(1.5rem,2.6vw,2.1rem)}
h3{font-size:1.12rem;font-weight:700}
p{margin:0 0 .8rem}
hr{border:0;border-top:1px solid var(--line);margin:1.5rem 0}
strong,b{color:var(--ink)}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-xs)}
a:focus-visible,button:focus-visible{outline:none}
.skip-link{position:absolute;left:-999px;top:0;z-index:200;background:#fff;padding:.6rem 1rem;border-radius:0 0 var(--r-sm) 0;font-weight:700;box-shadow:var(--sh)}
.skip-link:focus{left:0}

/* ------------------------------------------------------------------ Layout */
.wrap{width:min(var(--maxw),100% - 2.5rem);margin:0 auto}
.section{padding:clamp(2.4rem,5vw,4.2rem) 0}
.section-tight{padding:2rem 0}
.center{text-align:center}
.muted{color:var(--muted)}
.hide{display:none!important}
.mt{margin-top:1rem}.mt2{margin-top:2rem}.mb0{margin-bottom:0}
.lead{font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--muted);max-width:64ch}
.row{display:flex;gap:.85rem;flex-wrap:wrap}
.row>*{flex:1;min-width:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
@media(max-width:760px){.grid2,.grid3{grid-template-columns:1fr}}
.divider{height:1px;background:var(--line);margin:2rem 0}

/* -------------------------------------------------------------- Typo addon */
.eyebrow{display:inline-flex;align-items:center;gap:.45rem;font-size:.78rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.09em;color:var(--accent-700);
  background:var(--accent-soft);border-radius:var(--r-full);padding:.3rem .75rem}
.section-head{max-width:64ch;margin-bottom:2rem}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head h2{margin-bottom:.35rem}
.section-head p{color:var(--muted);margin:0}

/* ----------------------------------------------------------------- Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--accent);color:#fff;border:0;border-radius:var(--r-sm);
  padding:.72rem 1.15rem;font-weight:700;font-size:.95rem;line-height:1;cursor:pointer;
  box-shadow:0 6px 16px -8px rgba(255,90,31,.75);
  transition:transform .12s ease,box-shadow .18s ease,background .18s ease,color .18s ease,border-color .18s ease}
.btn:hover{background:var(--accent-600);box-shadow:0 10px 22px -10px rgba(255,90,31,.85);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:var(--sh-xs)}
.btn.ghost:hover{border-color:#cfd8e6;background:#fbfcfe;color:var(--ink)}
.btn.dark{background:var(--ink);box-shadow:0 8px 20px -12px rgba(11,18,32,.8)}
.btn.dark:hover{background:var(--ink-2)}
.btn.sm{padding:.5rem .8rem;font-size:.85rem;border-radius:var(--r-xs)}
.btn.lg{padding:.9rem 1.5rem;font-size:1.02rem;border-radius:var(--r)}
.btn.block{width:100%}
.btn[disabled],.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.btn.ghost.on{border-color:var(--accent);color:var(--accent-700);background:var(--accent-soft)}
.link{color:var(--accent-700);font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.link:hover{color:var(--accent)}

/* ------------------------------------------------------------------- Forms */
input,select,textarea{font-family:inherit;font-size:.98rem;width:100%;padding:.7rem .85rem;
  border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;color:var(--ink);
  transition:border-color .15s ease,box-shadow .15s ease}
input::placeholder,textarea::placeholder{color:#9aa7b8}
input:hover,select:hover,textarea:hover{border-color:#cfd8e6}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right .7rem center;padding-right:2.2rem}
label{display:block;font-size:.84rem;font-weight:700;margin:.75rem 0 .3rem;color:var(--ink-2)}
.field-help{font-size:.8rem;color:var(--muted);margin:.35rem 0 0}
input[type=checkbox],input[type=radio],input[type=file]{width:auto}

/* ------------------------------------------------------------ Badges/chips */
.tag{display:inline-block;background:var(--accent-soft);color:var(--accent-700);
  border-radius:var(--r-full);padding:.22rem .65rem;font-size:.76rem;font-weight:800;letter-spacing:.01em}
.badge-soft{display:inline-block;background:var(--bg-2);color:#475569;border-radius:var(--r-full);
  padding:.2rem .6rem;font-size:.74rem;font-weight:800}
.badge-ok{background:var(--ok-soft);color:var(--ok)}
.badge-info{background:var(--info-soft);color:var(--info)}
.badge-warn{background:var(--warn-soft);color:var(--warn)}
.chip{background:#fff;border:1px solid var(--line);border-radius:var(--r-full);padding:.45rem .95rem;
  font-weight:700;font-size:.9rem;cursor:pointer;color:var(--ink-2);transition:all .15s ease}
.chip:hover{border-color:#cfd8e6;background:#fbfcfe}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.cats{display:flex;gap:.55rem;flex-wrap:wrap;margin:1.2rem 0 1.6rem}
.stars{display:inline-flex;gap:2px;color:#f59e0b}
.stars svg{width:15px;height:15px}

/* ------------------------------------------------------------------ Header */
header.top{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line)}
.top .bar{display:flex;align-items:center;gap:1.1rem;height:var(--header-h)}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.14rem;letter-spacing:-.02em;color:var(--ink)}
.brand .logo{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--accent),#ffa46b);
  display:grid;place-items:center;color:#fff;font-size:17px;box-shadow:0 6px 14px -6px rgba(255,90,31,.9)}
nav.main{display:flex;gap:.2rem;margin-left:.6rem}
nav.main a{position:relative;font-weight:650;color:#41506b;font-size:.94rem;padding:.5rem .7rem;border-radius:var(--r-xs);transition:color .15s,background .15s}
nav.main a:hover{color:var(--ink);background:var(--bg-2)}
nav.main a.on{color:var(--accent-700);background:var(--accent-soft)}
.top .right{margin-left:auto;display:flex;align-items:center;gap:.5rem}
.cartbtn{position:relative}
.cartbtn .badge{position:absolute;top:-7px;right:-7px;background:var(--accent);color:#fff;border-radius:var(--r-full);
  font-size:.68rem;min-width:19px;height:19px;display:grid;place-items:center;padding:0 5px;font-weight:800;
  box-shadow:0 0 0 2px #fff}
.burger{display:none;background:#fff;border:1px solid var(--line);border-radius:var(--r-xs);
  width:40px;height:40px;font-size:1.25rem;line-height:1;cursor:pointer;color:var(--ink);place-items:center}
@media(max-width:920px){
  nav.main{display:none;position:absolute;top:var(--header-h);left:0;right:0;background:#fff;
    flex-direction:column;gap:.15rem;border-bottom:1px solid var(--line);padding:.7rem 1.25rem 1rem;
    box-shadow:var(--sh);margin-left:0}
  nav.main.open{display:flex}
  nav.main a{padding:.7rem .6rem}
  .burger{display:grid}
  .hide-sm{display:none!important}
}

/* -------------------------------------------------------------------- Hero */
.hero{position:relative;overflow:hidden;color:#eaf0fb;
  background:
    radial-gradient(900px 380px at 88% -12%,rgba(255,90,31,.30),transparent 60%),
    radial-gradient(700px 500px at 8% 120%,rgba(56,116,255,.20),transparent 60%),
    linear-gradient(160deg,#0b1220 0%,#101b33 55%,#0b1220 100%)}
.hero::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:46px 46px;mask-image:linear-gradient(180deg,#000,transparent 92%)}
.hero .inner{position:relative;padding:clamp(3rem,7vw,5.5rem) 0}
.hero h1{color:#fff;margin:.7rem 0 .8rem;max-width:20ch}
.hero p{color:#b9c4da;font-size:clamp(1.02rem,1.5vw,1.18rem);max-width:56ch}
.hero .cta{display:flex;gap:.7rem;margin-top:1.6rem;flex-wrap:wrap}
.hero .tag{background:rgba(255,255,255,.10);color:#ffd9c6;border:1px solid rgba(255,255,255,.16)}
.hero .pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.7rem}
.hero .pill{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#dbe4f3;
  border-radius:var(--r-full);padding:.4rem .85rem;font-size:.84rem;font-weight:650;display:inline-flex;align-items:center;gap:.4rem}
.hero .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:2.2rem;align-items:center}
@media(max-width:900px){.hero .hero-grid{grid-template-columns:1fr;gap:1.6rem}}
.hero-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);border-radius:var(--r-lg);
  padding:1.3rem;backdrop-filter:blur(6px);box-shadow:var(--sh-lg)}
.hero-card .kpi{display:flex;align-items:center;gap:.9rem;padding:.7rem .2rem}
.hero-card .kpi+.kpi{border-top:1px solid rgba(255,255,255,.10)}
.hero-card .kpi b{display:block;color:#fff;font-size:1.35rem;line-height:1.1}
.hero-card .kpi span{color:#b9c6dc;font-size:.85rem}
.hero-card .ic{width:42px;height:42px;border-radius:12px;background:rgba(255,90,31,.18);display:grid;place-items:center;color:#ff9b6b;flex:0 0 auto}
.hero-card .ic svg{width:22px;height:22px}
@media(max-width:420px){.hero h1{max-width:none}}

/* -------------------------------------------------------------- Trust bar */
.trustbar{background:#fff;border-bottom:1px solid var(--line)}
.trustbar .items{display:flex;flex-wrap:wrap;gap:1.6rem;justify-content:space-between;padding:1.1rem 0}
.trustbar .it{display:flex;align-items:center;gap:.65rem;color:var(--ink-2);font-weight:650;font-size:.9rem}
.trustbar .it svg{width:20px;height:20px;color:var(--accent)}
@media(max-width:760px){.trustbar .items{gap:1rem;justify-content:flex-start}}

/* ------------------------------------------------------------------- Cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.4rem}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-xs);display:flex;flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:#d8e0ec}
.card .body{padding:1.05rem 1.15rem 1.25rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.card h3{margin:.1rem 0 0;font-size:1.03rem}
.card h3 a:hover{color:var(--accent-700)}
.card .desc{color:var(--muted);font-size:.9rem;margin:0;flex:1}
.card .foot{margin-top:auto;display:flex;gap:.6rem;align-items:center;justify-content:space-between;padding-top:.35rem}
.price{font-weight:800;font-size:1.12rem;color:var(--ink);letter-spacing:-.01em}
.thumb{position:relative;aspect-ratio:4/3;background:linear-gradient(140deg,#f3f6fb,#e7edf6);display:grid;place-items:center;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.card:hover .thumb img{transform:scale(1.045)}
.thumb svg{width:44%;height:44%;opacity:.42}
.thumb .flag{position:absolute;top:.7rem;left:.7rem;z-index:2}
@media(max-width:640px){.grid{grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:1rem}.card .body{padding:.85rem}}

/* ------------------------------------------------- Séparateurs de sections */
.alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ----------------------------------------------------------------- Services */
.svc{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.5rem;
  box-shadow:var(--sh-xs);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;display:flex;flex-direction:column}
.svc:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:#d8e0ec}
.icon-badge{width:48px;height:48px;border-radius:14px;background:var(--accent-soft);color:var(--accent-700);
  display:grid;place-items:center;margin-bottom:.9rem}
.icon-badge svg{width:24px;height:24px}
.svc h3{margin-bottom:.35rem}
.svc p{color:var(--muted);font-size:.93rem;margin:0 0 .9rem}
.svc .more{margin-top:auto;font-weight:700;color:var(--accent-700);font-size:.9rem;display:inline-flex;align-items:center;gap:.35rem}
.svc .more:hover{color:var(--accent)}

/* -------------------------------------------------------------------- Stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
@media(max-width:760px){.stats{grid-template-columns:1fr 1fr}}
.stat-big{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.3rem;text-align:center;box-shadow:var(--sh-xs)}
.stat-big b{display:block;font-size:clamp(1.6rem,3vw,2.2rem);color:var(--ink);letter-spacing:-.03em;line-height:1}
.stat-big span{color:var(--muted);font-size:.88rem}

/* ------------------------------------------------------------- Comment ça */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.3rem;counter-reset:s}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.5rem 1.3rem;box-shadow:var(--sh-xs)}
.step .n{width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:800;margin-bottom:.8rem}
.step h3{margin:0 0 .3rem;font-size:1.03rem}
.step p{margin:0;color:var(--muted);font-size:.92rem}

/* ------------------------------------------------------------ Features/CTA */
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.2rem}
.feature{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.3rem;box-shadow:var(--sh-xs)}
.feature b{display:flex;align-items:center;gap:.5rem;margin-bottom:.35rem;color:var(--ink)}
.feature b svg{width:18px;height:18px;color:var(--accent)}
.feature p{margin:0;color:var(--muted);font-size:.92rem}
.band{position:relative;overflow:hidden;background:linear-gradient(135deg,#101b33,#0b1220);color:#fff;
  border-radius:var(--r-xl);padding:clamp(1.8rem,4vw,3rem);box-shadow:var(--sh-lg)}
.band::after{content:"";position:absolute;right:-80px;top:-80px;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,90,31,.45),transparent 70%)}
.band h2{color:#fff}
.band p{color:#c3cee2}
.band .btn{background:var(--accent)}
.band .btn.ghost{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.24)}
.band-inner{position:relative;display:flex;gap:2rem;align-items:center;flex-wrap:wrap}
.band-inner .txt{flex:2;min-width:260px}
.band-inner .act{flex:1;min-width:200px;text-align:right}
@media(max-width:700px){.band-inner .act{text-align:left}}

/* ----------------------------------------------------------------- Reviews */
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.3rem}
.review{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.4rem;box-shadow:var(--sh-xs);display:flex;flex-direction:column;gap:.7rem}
.review p{margin:0;color:var(--ink-2);font-size:.95rem}
.review .who{display:flex;align-items:center;gap:.7rem;margin-top:auto}
.avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#ffa46b);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:.9rem;flex:0 0 auto}
.review .who b{display:block;font-size:.9rem}
.review .who span{color:var(--muted);font-size:.8rem}

/* --------------------------------------------------------------------- FAQ */
.faq{max-width:840px;margin:0 auto}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--r);margin-bottom:.7rem;box-shadow:var(--sh-xs);overflow:hidden}
.faq-item summary{list-style:none;cursor:pointer;padding:1.05rem 1.2rem;font-weight:700;color:var(--ink);
  display:flex;align-items:center;justify-content:space-between;gap:1rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.4rem;font-weight:700;color:var(--accent);line-height:1;transition:transform .2s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .a{padding:0 1.2rem 1.15rem;color:var(--muted);font-size:.95rem}
.faq-item[open]{border-color:#d8e0ec;box-shadow:var(--sh-sm)}

/* ------------------------------------------------------------- Breadcrumb */
.breadcrumb{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;font-size:.85rem;color:var(--muted);margin-bottom:1.2rem}
.breadcrumb a:hover{color:var(--accent-700)}
.breadcrumb span.sep{opacity:.5}

/* --------------------------------------------------------------- Sections */
.section h2{margin-bottom:.6rem}
.section-head+.grid,.section-head+.steps,.section-head+.feat,.section-head+.stats,.section-head+.reviews{margin-top:.4rem}

/* ---------------------------------------------------------- Product page */
.pgrid{display:grid;grid-template-columns:1.05fr 1fr;gap:2.4rem;align-items:start}
@media(max-width:880px){.pgrid{grid-template-columns:1fr;gap:1.6rem}}
.pimage{position:relative;background:linear-gradient(140deg,#f3f6fb,#e7edf6);border:1px solid var(--line);
  border-radius:var(--r-lg);aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden}
.pimage img{width:100%;height:100%;object-fit:cover}
.pimage svg{width:40%;opacity:.4}
.pinfo h1{margin:.5rem 0 .6rem}
.pinfo .price{font-size:1.7rem}
.pinfo .buy{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;margin-top:1rem}
.pinfo .trust{display:flex;flex-direction:column;gap:.5rem;margin-top:1.3rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.pinfo .trust .it{display:flex;align-items:center;gap:.6rem;font-size:.9rem;color:var(--ink-2)}
.pinfo .trust svg{width:18px;height:18px;color:var(--ok)}
.specs{list-style:none;padding:0;margin:1rem 0 0;display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1.2rem}
.specs li{font-size:.9rem;color:var(--muted);display:flex;gap:.5rem}
.specs li b{color:var(--ink-2)}

/* ------------------------------------------------------------------- Cart */
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:.75rem .5rem;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:800}
tbody tr:hover{background:#fbfcfe}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-xs);overflow:hidden;background:#fff}
.qty button{border:0;background:#f4f7fb;width:32px;height:34px;font-size:1.15rem;cursor:pointer;color:var(--ink);transition:background .15s;display:grid;place-items:center}
.qty button:hover{background:#e9eef6}
.qty span{width:38px;text-align:center;font-weight:700}
.summary{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.35rem;box-shadow:var(--sh-sm);position:sticky;top:calc(var(--header-h) + 1rem)}
.summary .line{display:flex;justify-content:space-between;margin:.45rem 0;color:var(--body)}
.summary .tot{font-size:1.25rem;font-weight:800;color:var(--ink);border-top:1px solid var(--line);padding-top:.8rem;margin-top:.8rem}

/* ------------------------------------------------------------------ Panels */
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.35rem;box-shadow:var(--sh-xs)}
.panel h3{margin:0 0 .7rem}
.panel+.panel{margin-top:1.1rem}
.empty{text-align:center;padding:3rem 1rem;color:var(--muted)}
.empty svg{width:46px;height:46px;color:#cbd5e1;margin:0 auto 1rem}

/* ------------------------------------------------------------------- Toast */
#toasts{position:fixed;right:1rem;bottom:1rem;z-index:120;display:flex;flex-direction:column;gap:.5rem;max-width:min(92vw,360px)}
.toast{background:var(--ink);color:#fff;padding:.8rem 1.05rem;border-radius:var(--r-sm);box-shadow:var(--sh-lg);
  font-weight:650;font-size:.9rem;animation:pop .22s ease}
.toast.ok{background:var(--ok)}.toast.err{background:var(--danger)}
@keyframes pop{from{opacity:0;transform:translateY(10px)}}

/* ------------------------------------------------------------------ Footer */
footer.site{background:var(--dark);color:#9fb0cc;margin-top:3.5rem;padding:3rem 0 1.4rem;border-top:1px solid rgba(255,255,255,.06)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:2rem}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}
footer.site h4,footer.site .foot-head{color:#fff;font-size:.82rem;text-transform:uppercase;letter-spacing:.07em;margin:0 0 .9rem;font-weight:800}
footer.site a{color:#c3cee2;display:inline-block;padding:.18rem 0;transition:color .15s}
footer.site a:hover{color:#fff}
footer.site .brand{color:#fff;margin-bottom:.7rem}
footer.site .brand .logo{color:#fff}
footer.site .desc{color:#8395b3;font-size:.9rem;max-width:34ch}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.09);margin-top:2rem;padding-top:1.3rem;font-size:.83rem;color:#7e8fae}
.pay-badges{display:flex;gap:.5rem;flex-wrap:wrap}
.pay-badges span{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:6px;
  padding:.25rem .55rem;font-size:.72rem;font-weight:800;color:#dbe4f3;letter-spacing:.02em}

/* ------------------------------------------------------------------- Admin */
.admin{display:grid;grid-template-columns:236px 1fr;min-height:calc(100vh - var(--header-h))}
@media(max-width:900px){.admin{grid-template-columns:1fr}.side{display:none}.side.open{display:block}}
.side{background:var(--dark);color:#9fb0cc;padding:1.2rem 1rem}
.side a{display:block;padding:.62rem .75rem;border-radius:var(--r-xs);font-weight:650;color:#a9b8d3;margin-bottom:.15rem;transition:background .15s,color .15s}
.side a.on,.side a:hover{background:rgba(255,255,255,.09);color:#fff}
.main{padding:1.6rem}
.main>h2{margin-top:0}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.1rem;box-shadow:var(--sh-xs)}
.stat b{display:block;font-size:1.65rem;color:var(--ink);letter-spacing:-.02em;margin-top:.15rem}
.side .brand{margin-bottom:.9rem}
.side nav a{font-size:.94rem}

/* --------------------------------------------------------- Pages de contenu */
.legal{max-width:860px}
.legal h2{margin-bottom:.3rem}
.legal h3{margin:1.8rem 0 .4rem;font-size:1.08rem}
.legal p,.legal li{color:var(--body)}
.legal p{margin:.5rem 0}
.legal ul{margin:.4rem 0;padding-left:1.2rem}
.legal li{margin:.25rem 0}
.legal .updated{font-size:.88rem;color:var(--muted)}
.legal a:not(.btn){color:var(--accent-700);text-decoration:underline;text-underline-offset:2px}
.prose h3{margin-top:1.6rem}

/* ------------------------------------------------------------------- Divers */
.toolbar{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;margin-bottom:1.2rem}
.toolbar .grow{flex:1;min-width:200px}
.pill-list{display:flex;flex-wrap:wrap;gap:.5rem}
.note{background:var(--accent-soft);border:1px solid #ffd9c6;border-radius:var(--r-sm);padding:.8rem 1rem;color:#9a3412;font-size:.9rem}
.muted-box{background:var(--bg-2);border-radius:var(--r-sm);padding:.8rem 1rem;color:var(--muted);font-size:.9rem}
.checklist{list-style:none;padding:0;margin:0}
.checklist li{display:flex;gap:.6rem;align-items:flex-start;margin:.5rem 0;color:var(--body)}
.checklist svg{width:18px;height:18px;color:var(--ok);flex:0 0 auto;margin-top:.25rem}

/* ======================================================================== */
/*  ANIMATIONS & INTERACTIONS — donner vie au site, guider l'œil, inciter   */
/*  à l'achat. Tout est désactivé si l'utilisateur préfère réduire le       */
/*  mouvement (voir bloc prefers-reduced-motion en fin de fichier).         */
/* ======================================================================== */

@keyframes nx-fade-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes nx-fade{from{opacity:0}to{opacity:1}}
@keyframes nx-pop{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.18)}100%{transform:scale(1);opacity:1}}
@keyframes nx-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes nx-shine{0%{transform:translateX(-140%) skewX(-14deg)}100%{transform:translateX(260%) skewX(-14deg)}}
@keyframes nx-drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-28px,18px,0) scale(1.12)}}
@keyframes nx-shimmer{0%{background-position:-420px 0}100%{background-position:420px 0}}
@keyframes nx-pulse{0%{box-shadow:0 0 0 0 rgba(255,90,31,.5)}70%{box-shadow:0 0 0 14px rgba(255,90,31,0)}100%{box-shadow:0 0 0 0 rgba(255,90,31,0)}}
@keyframes nx-badge{0%{transform:scale(1)}35%{transform:scale(1.5)}100%{transform:scale(1)}}
@keyframes nx-slide-down{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@keyframes nx-slide-left{from{transform:translateX(102%)}to{transform:none}}
@keyframes nx-toast-in{from{opacity:0;transform:translateY(16px) scale(.95)}to{opacity:1;transform:none}}
@keyframes nx-toastbar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes nx-ripple{to{transform:translate(-50%,-50%) scale(24);opacity:0}}
@keyframes nx-fly{0%{transform:translate(-50%,-50%) scale(1);opacity:1}70%{opacity:.9}100%{transform:translate(calc(-50% + var(--fx)),calc(-50% + var(--fy))) scale(.25);opacity:0}}
@keyframes nx-cube{0%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(2deg)}100%{transform:translateY(0) rotate(0)}}

html{scroll-behavior:smooth}

/* --- Révélation au défilement --- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);transition-delay:var(--d,0ms);will-change:opacity,transform}
.reveal.in{opacity:1;transform:none}

/* --- Héros : entrée + halos animés --- */
.hero::after{content:"";position:absolute;width:620px;height:620px;right:-140px;top:-220px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,90,31,.28),transparent 62%);pointer-events:none;animation:nx-drift 14s ease-in-out infinite alternate}
.hero .hero-grid>div:first-child>*{animation:nx-fade-up .8s cubic-bezier(.22,1,.36,1) both}
.hero .hero-grid>div:first-child>*:nth-child(1){animation-delay:.05s}
.hero .hero-grid>div:first-child>*:nth-child(2){animation-delay:.14s}
.hero .hero-grid>div:first-child>*:nth-child(3){animation-delay:.23s}
.hero .hero-grid>div:first-child>*:nth-child(4){animation-delay:.32s}
.hero .hero-grid>div:first-child>*:nth-child(5){animation-delay:.41s}
.hero-card{animation:nx-fade-up .9s .3s cubic-bezier(.22,1,.36,1) both,nx-float 6.5s ease-in-out 1.4s infinite}
.hero-card .kpi{transition:transform .25s ease}
.hero-card:hover .kpi{transform:translateX(3px)}

/* --- Cartes produits : survol vivant + brillance --- */
.card{transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease,border-color .35s ease}
.card:hover{transform:translateY(-7px);box-shadow:0 26px 50px -26px rgba(15,23,42,.42);border-color:#cfd9e8}
.card .thumb::after{content:"";position:absolute;top:0;left:0;width:55%;height:100%;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-160%) skewX(-14deg)}
.card:hover .thumb::after{animation:nx-shine .9s ease}
.card .thumb img{transition:transform .6s cubic-bezier(.22,1,.36,1)}
.card:hover .thumb img{transform:scale(1.08)}
.card .thumb svg{transition:transform .6s cubic-bezier(.22,1,.36,1)}
.card:hover .thumb svg{transform:scale(1.07) rotate(-3deg)}
.card .body>.tag{transition:transform .25s ease}
.card:hover .body>.tag{transform:translateX(2px)}
.card .price{transition:color .25s ease}
.card:hover .price{color:var(--accent-700)}
.thumb .flag{animation:nx-pop .5s cubic-bezier(.22,1,.36,1) both}

/* --- Boutons : relief, brillance, ondulation --- */
.btn{position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .25s ease,background .2s ease,border-color .2s ease,color .2s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 28px -12px rgba(255,90,31,.75)}
.btn:active{transform:translateY(0) scale(.985)}
.btn::after{content:"";position:absolute;top:0;left:0;width:55%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);transform:translateX(-160%) skewX(-14deg)}
.btn:hover::after{animation:nx-shine .8s ease}
.btn.ghost:hover{box-shadow:0 12px 24px -16px rgba(15,23,42,.5);border-color:#c3cfe0}
.btn.ghost::after{background:linear-gradient(100deg,transparent,rgba(15,23,42,.07),transparent)}
.btn.dark::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent)}
.ripple{position:absolute;width:12px;height:12px;border-radius:50%;background:currentColor;opacity:.3;
  transform:translate(-50%,-50%) scale(0);pointer-events:none;animation:nx-ripple .6s ease-out forwards}

/* --- Navigation : soulignement glissant --- */
nav.main a::after{content:"";position:absolute;left:.7rem;right:.7rem;bottom:.28rem;height:2px;border-radius:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:center;transition:transform .28s cubic-bezier(.22,1,.36,1)}
nav.main a:hover::after,nav.main a.on::after{transform:scaleX(1)}
@media(max-width:920px){nav.main.open{animation:nx-slide-down .32s cubic-bezier(.22,1,.36,1) both}}

/* --- Icône « en savoir plus » --- */
.more svg,.svc .more svg{transition:transform .25s ease}
.more:hover svg,.svc .more:hover svg{transform:translateX(5px)}

/* --- Chips, étapes, engagements, FAQ --- */
.chip{transition:transform .18s ease,background .2s ease,border-color .2s ease,color .2s ease}
.chip:hover{transform:translateY(-2px)}
.chip.on{transform:translateY(-2px);box-shadow:0 10px 22px -14px rgba(15,23,42,.7)}
.step,.feature,.svc,.stat-big{transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease,border-color .35s ease}
.step:hover,.feature:hover,.svc:hover{transform:translateY(-5px);box-shadow:0 22px 44px -26px rgba(15,23,42,.4)}
.step .n{transition:transform .35s cubic-bezier(.34,1.56,.64,1),background .25s ease}
.step:hover .n{transform:scale(1.12) rotate(-6deg);background:var(--accent)}
.stat-big:hover{transform:translateY(-4px)}
.stat-big b{display:inline-block}
.faq-item{transition:box-shadow .3s ease,border-color .3s ease}
.faq-item:hover{border-color:#cfd9e8;box-shadow:var(--sh-sm)}
.faq-item[open] .a{animation:nx-fade-up .4s ease both}
.faq-item summary::after{transition:transform .25s cubic-bezier(.22,1,.36,1),color .2s}
.faq-item summary:hover::after{color:var(--accent-700)}

/* --- Toast --- */
.toast{animation:nx-toast-in .35s cubic-bezier(.22,1,.36,1) both;position:relative;overflow:hidden}
.toast::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:rgba(255,255,255,.6);
  transform-origin:left;animation:nx-toastbar 3.2s linear forwards}

/* --- Badge panier --- */
.badge.pop{animation:nx-badge .55s cubic-bezier(.34,1.56,.64,1)}
.cartbtn.has{animation:nx-pulse 2.4s ease-in-out 1}

/* --- Pastille « vol vers le panier » --- */
.flydot{position:fixed;left:0;top:0;width:14px;height:14px;border-radius:50%;z-index:200;pointer-events:none;
  background:radial-gradient(circle at 35% 35%,#ffb27a,var(--accent));box-shadow:0 6px 16px -4px rgba(255,90,31,.8);
  animation:nx-fly .7s cubic-bezier(.5,-0.15,.75,.9) forwards}

/* --- Squelettes de chargement --- */
.skl{background:linear-gradient(90deg,#eef2f8 25%,#e3e9f2 37%,#eef2f8 63%);background-size:420px 100%;
  animation:nx-shimmer 1.25s linear infinite;border-radius:var(--r-lg);border:1px solid var(--line)}
.skl-card{height:320px}
.skl-line{height:12px;border-radius:6px;margin:.55rem 0}
.skl-line.w60{width:60%}.skl-line.w85{width:85%}.skl-line.w40{width:40%}

/* --- Mini-panier coulissant --- */
.minicart{position:fixed;inset:0;z-index:180;display:none}
.minicart.open{display:block}
.mc-ov{position:absolute;inset:0;background:rgba(8,12,22,.48);animation:nx-fade .25s ease both}
.mc-panel{position:absolute;top:0;right:0;bottom:0;width:min(92vw,410px);background:#fff;display:flex;flex-direction:column;
  box-shadow:-24px 0 60px -24px rgba(8,12,22,.55);animation:nx-slide-left .38s cubic-bezier(.22,1,.36,1) both}
.mc-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 1.2rem;border-bottom:1px solid var(--line)}
.mc-head h3{margin:0;font-size:1.05rem}
.mc-body{flex:1;overflow:auto;padding:.4rem 1.2rem}
.mc-row{display:flex;gap:.8rem;align-items:center;padding:.8rem 0;border-bottom:1px solid var(--line)}
.mc-thumb{width:56px;height:56px;border-radius:10px;background:var(--bg-2);display:grid;place-items:center;overflow:hidden;flex:0 0 auto}
.mc-thumb img{width:100%;height:100%;object-fit:cover}
.mc-thumb svg{width:58%;height:58%;opacity:.5}
.mc-info{flex:1;min-width:0}
.mc-name{font-weight:650;color:var(--ink);font-size:.92rem;display:block}
.mc-name:hover{color:var(--accent-700)}
.mc-price{color:var(--muted);font-size:.85rem}
.mc-color{display:inline-block;margin:.1rem 0;font-size:.78rem;color:var(--muted);background:var(--bg-2);border-radius:999px;padding:.05rem .5rem}
.mc-x{background:transparent;border:0;color:var(--muted);cursor:pointer;font-size:1rem;line-height:1;padding:.3rem .4rem;border-radius:6px;transition:background .15s,color .15s}
.mc-x:hover{background:var(--bg-2);color:var(--danger)}
.mc-foot{border-top:1px solid var(--line);padding:1.1rem 1.2rem;display:grid;gap:.6rem;background:#fff}
.mc-total{display:flex;justify-content:space-between;font-weight:800;color:var(--ink);font-size:1.05rem}
.mc-empty{text-align:center;padding:3rem 1rem;color:var(--muted)}
.mc-empty svg{width:44px;height:44px;color:#cbd5e1;margin:0 auto 1rem}

/* --- Barre d'achat collante (mobile / fiche produit) --- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
  border-top:1px solid var(--line);padding:.7rem 1rem;display:flex;gap:.8rem;align-items:center;justify-content:space-between;
  box-shadow:0 -14px 34px -22px rgba(15,23,42,.5);transform:translateY(130%);transition:transform .4s cubic-bezier(.22,1,.36,1)}
.buybar.show{transform:none}
.buybar .bb-info{min-width:0}
.buybar .bb-name{font-weight:700;color:var(--ink);font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52vw}
.buybar .bb-price{color:var(--accent-700);font-weight:800}
@media(min-width:821px){.buybar{display:none!important}}

/* --- Barre de progression de lecture --- */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:left;z-index:150;
  background:linear-gradient(90deg,var(--accent),#ffb27a);pointer-events:none;transition:transform .1s linear}

/* --- Liens texte --- */
.link{color:var(--accent-700);font-weight:650;text-decoration:underline;text-underline-offset:2px;transition:color .2s}
.link:hover{color:var(--accent)}

/* --------------------------------------------------------------- A11y/motif */
/* Info banner - PLA uniquement */
.info-banner{
  background:#0f7b3e;
  color:#fff;
  padding:.55rem 0;
  font-size:.98rem;
  text-align:center;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.12);
  position:relative;
  z-index:59;
}
.info-banner .wrap{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
  justify-content:center;
}
.info-banner .banner-icon{font-size:1rem}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .hero::after{animation:none}
}

/* ======================================================================== */
/*  BOUTON DE THÈME (clair / sombre)                                        */
/* ======================================================================== */
.iconbtn{display:inline-grid;place-items:center;width:40px;height:40px;flex:0 0 auto;
  border-radius:10px;background:#fff;border:1px solid var(--line);color:var(--ink);cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease}
.iconbtn:hover{transform:translateY(-1px);border-color:#cfd8e6;background:#fbfcfe}
.iconbtn svg{width:19px;height:19px;display:block}
[data-theme-toggle] [data-ic-sun]{display:none}
[data-theme-toggle] [data-ic-moon]{display:inline-flex}
[data-theme="dark"] [data-theme-toggle] [data-ic-sun]{display:inline-flex}
[data-theme="dark"] [data-theme-toggle] [data-ic-moon]{display:none}

/* ======================================================================== */
/*  BANDEAU PROMOTIONNEL (1ʳᵉ commande)                                     */
/* ======================================================================== */
.promo-bar{position:relative;z-index:61;color:#fff;
  background:linear-gradient(90deg,#b53a0a,var(--accent),#ff8a3d);
  box-shadow:0 2px 12px -6px rgba(255,90,31,.85);font-size:.9rem;animation:nx-slide-down .4s ease both}
.promo-inner{display:flex;align-items:center;justify-content:center;gap:.7rem;flex-wrap:wrap;padding:.5rem 0}
.promo-ico{display:inline-flex;align-items:center}
.promo-ico svg{width:17px;height:17px}
.promo-txt{font-weight:600;letter-spacing:.01em}
.promo-code{background:rgba(255,255,255,.22);border:1px dashed rgba(255,255,255,.65);border-radius:6px;
  padding:.1rem .55rem;font-weight:800;letter-spacing:.07em;white-space:nowrap}
.promo-timer{display:inline-flex;align-items:center;gap:.35rem;background:rgba(0,0,0,.22);border-radius:6px;
  padding:.22rem .6rem;font-weight:700}
.promo-timer svg{width:15px;height:15px}
.promo-timer b{font-variant-numeric:tabular-nums;letter-spacing:.05em}
@keyframes nx-blink{0%,100%{opacity:1}50%{opacity:.45}}
.promo-timer b[data-promo-timer]{animation:nx-blink 2s ease-in-out infinite}
.promo-copy{background:#fff;color:#b53a0a;border:0;border-radius:6px;padding:.32rem .75rem;
  font-weight:800;font-size:.82rem;cursor:pointer;transition:transform .15s ease,background .15s ease,box-shadow .2s ease}
.promo-copy:hover{transform:translateY(-1px);background:#fff7ed;box-shadow:0 6px 14px -8px rgba(0,0,0,.5)}
.promo-go{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.45);border-radius:6px;
  padding:.32rem .75rem;font-weight:700;font-size:.82rem;color:#fff;transition:background .15s ease}
.promo-go:hover{background:rgba(255,255,255,.3)}
.promo-x{background:transparent;border:0;color:#fff;opacity:.9;cursor:pointer;font-size:1rem;line-height:1;
  padding:.2rem .4rem;border-radius:6px;transition:background .15s ease,opacity .15s ease}
.promo-x:hover{opacity:1;background:rgba(255,255,255,.2)}
@media(max-width:680px){.promo-txt{font-size:.84rem}.promo-go{display:none}}

/* ======================================================================== */
/*  THÈME SOMBRE                                                            */
/*  On redéfinit d'abord les jetons, puis on corrige les rares surfaces qui  */
/*  utilisent une couleur codée en dur (#fff, #fbfcfe, …).                   */
/* ======================================================================== */
:root[data-theme="dark"]{
  --ink:#f1f5f9;
  --ink-2:#e2e8f0;
  --body:#c4cedd;
  --muted:#93a1b5;
  --line:#28313f;
  --line-2:#1f2735;
  --surface:#141b28;
  --bg:#0b1220;
  --bg-2:#161f2d;
  --accent-soft:#2c1c15;
  --accent-700:#ff9b6b;
  --accent-600:#ff7a3d;
  --dark:#0b1220;
  --dark-2:#111c33;
  --ok:#4ade80;   --ok-soft:#122a1e;
  --warn:#fbbf24; --warn-soft:#2c2410;
  --danger:#f87171; --danger-soft:#2e1618;
  --info:#7db2ff;  --info-soft:#14233f;
  --sh-xs:0 1px 2px rgba(0,0,0,.4);
  --sh-sm:0 2px 10px rgba(0,0,0,.45);
  --sh:0 12px 30px -12px rgba(0,0,0,.65),0 2px 8px rgba(0,0,0,.4);
  --sh-lg:0 34px 64px -26px rgba(0,0,0,.75),0 8px 20px rgba(0,0,0,.45);
  --accent-ring:rgba(255,122,61,.35);
}
[data-theme="dark"] body{background:var(--bg);color:var(--body)}
[data-theme="dark"] ::selection{background:var(--accent);color:#0b1220}
[data-theme="dark"] strong,[data-theme="dark"] b{color:var(--ink)}

/* En-tête, navigation, footer */
[data-theme="dark"] header.top{background:rgba(11,18,32,.82);border-bottom-color:var(--line)}
[data-theme="dark"] nav.main a{color:#a9b8d3}
[data-theme="dark"] nav.main a:hover{color:#fff;background:var(--bg-2)}
[data-theme="dark"] nav.main a.on{color:#ffb27a;background:rgba(255,90,31,.16)}
@media(max-width:920px){[data-theme="dark"] nav.main{background:#0e1626;border-bottom-color:var(--line)}}
[data-theme="dark"] .cartbtn .badge{box-shadow:0 0 0 2px #0e1626}
[data-theme="dark"] .burger{background:#18212f;border-color:var(--line);color:var(--ink)}
[data-theme="dark"] .iconbtn{background:#18212f;border-color:var(--line);color:#e2e8f0}
[data-theme="dark"] .iconbtn:hover{background:#1e2938;border-color:#334155}
[data-theme="dark"] .skip-link{background:#18212f;color:var(--ink)}

/* Cartes, encarts, séparateurs */
[data-theme="dark"] .card,[data-theme="dark"] .svc,[data-theme="dark"] .step,[data-theme="dark"] .feature,
[data-theme="dark"] .stat-big,[data-theme="dark"] .review,[data-theme="dark"] .faq-item,[data-theme="dark"] .panel,
[data-theme="dark"] .stat,[data-theme="dark"] .summary,[data-theme="dark"] .trustbar,[data-theme="dark"] .alt{
  background:var(--surface);border-color:var(--line)}
[data-theme="dark"] .card:hover{border-color:#33405a}
[data-theme="dark"] .card:hover .price{color:#ffb27a}
[data-theme="dark"] .card h3 a:hover{color:#ffb27a}
[data-theme="dark"] .thumb,[data-theme="dark"] .pimage{background:linear-gradient(140deg,#18212f,#121a26)}
[data-theme="dark"] .thumb svg,[data-theme="dark"] .pimage svg{opacity:.32}
[data-theme="dark"] .empty svg,[data-theme="dark"] .mc-empty svg{color:#475569}
[data-theme="dark"] .step .n{background:var(--accent);color:#fff}
[data-theme="dark"] .stat-big:hover,[data-theme="dark"] .step:hover,[data-theme="dark"] .svc:hover,[data-theme="dark"] .feature:hover{box-shadow:var(--sh)}

/* Formulaires et boutons */
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{background:#121b28;color:var(--ink);border-color:var(--line)}
[data-theme="dark"] input::placeholder,[data-theme="dark"] textarea::placeholder{color:#64748b}
[data-theme="dark"] input:hover,[data-theme="dark"] select:hover,[data-theme="dark"] textarea:hover{border-color:#3a465b}
[data-theme="dark"] select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2393a1b5' stroke-width='2.2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>")}
[data-theme="dark"] .btn.ghost{background:#18212f;color:var(--ink);border-color:var(--line)}
[data-theme="dark"] .btn.ghost:hover{background:#1e2938;border-color:#334155;color:#fff}
[data-theme="dark"] .btn.ghost.on{border-color:var(--accent);color:#ffb27a;background:var(--accent-soft)}
[data-theme="dark"] .btn.dark{background:#26314a;color:#fff}
[data-theme="dark"] .btn.dark:hover{background:#303d59}
[data-theme="dark"] .chip{background:#18212f;color:var(--ink-2);border-color:var(--line)}
[data-theme="dark"] .chip:hover{background:#1e2938;border-color:#334155}
[data-theme="dark"] .chip.on{background:#f1f5f9;color:#0b1220;border-color:#f1f5f9}

/* Pills / étiquettes */
[data-theme="dark"] .tag{background:var(--accent-soft);color:#ffb27a}
[data-theme="dark"] .eyebrow{background:var(--accent-soft);color:#ffb27a}
[data-theme="dark"] .badge-soft{background:var(--bg-2);color:#cbd5e1}
[data-theme="dark"] .badge-ok{background:var(--ok-soft);color:var(--ok)}
[data-theme="dark"] .badge-info{background:var(--info-soft);color:var(--info)}
[data-theme="dark"] .badge-warn{background:var(--warn-soft);color:var(--warn)}
[data-theme="dark"] .icon-badge{background:var(--accent-soft);color:#ffb27a}
[data-theme="dark"] .link{color:#ff9b6b}
[data-theme="dark"] .card .price,[data-theme="dark"] .pinfo .price,[data-theme="dark"] .bb-price{color:#ffb27a}

/* Tableaux, panier, mini-panier */
[data-theme="dark"] tbody tr:hover{background:#161f2d}
[data-theme="dark"] .qty{background:#121b28;border-color:var(--line)}
[data-theme="dark"] .qty button{background:#1b2433;color:var(--ink)}
[data-theme="dark"] .qty button:hover{background:#243044}
[data-theme="dark"] .mc-panel,[data-theme="dark"] .mc-foot{background:var(--surface)}
[data-theme="dark"] .mc-ov{background:rgba(0,0,0,.66)}
[data-theme="dark"] .mc-x:hover{background:var(--bg-2)}
[data-theme="dark"] .buybar{background:rgba(11,18,32,.96);border-top-color:var(--line)}
[data-theme="dark"] .summary .tot,[data-theme="dark"] .summary .line{border-color:var(--line)}

/* Divers */
[data-theme="dark"] .note{background:#2c1c15;border-color:#5a3320;color:#fdba74}
[data-theme="dark"] .muted-box{background:var(--bg-2);color:var(--muted)}
[data-theme="dark"] .toast{background:#25324a;color:#f8fafc}
[data-theme="dark"] .skl{background:linear-gradient(90deg,#1a2331 25%,#22303f 37%,#1a2331 63%);background-size:420px 100%;border-color:var(--line)}
[data-theme="dark"] .progress{background:linear-gradient(90deg,var(--accent),#ffb27a)}
[data-theme="dark"] .legal a:not(.btn){color:#ff9b6b}
[data-theme="dark"] .faq-item:hover{border-color:#334155}
[data-theme="dark"] hr{border-top-color:var(--line)}
[data-theme="dark"] .side{background:#0e1626}

/* Transition douce lors du basculement */
html.theme-anim,html.theme-anim *{transition:background-color .35s ease,color .35s ease,border-color .35s ease!important}

/* Champ mot de passe (bouton afficher/masquer) + indicateur de robustesse */
.passwrap{position:relative;display:block}
.passwrap input{width:100%;padding-right:2.8rem}
.passwrap .eye{position:absolute;top:50%;right:.35rem;transform:translateY(-50%);width:2.1rem;height:2.1rem;
  display:inline-flex;align-items:center;justify-content:center;background:none;border:0;border-radius:var(--r-xs);
  color:var(--muted);cursor:pointer;padding:0}
.passwrap .eye:hover{color:var(--ink);background:var(--bg-2)}
.passwrap .eye.on{color:var(--accent)}
.strength{height:6px;border-radius:999px;background:var(--line);overflow:hidden;margin:.5rem 0 .25rem}
.strength .bar{height:100%;width:0;border-radius:999px;transition:width .25s ease,background .25s ease}

/* Couleurs de filament : pastilles, sélecteur produit, admin */
.swatch{display:inline-block;width:20px;height:20px;border-radius:6px;border:1px solid var(--line);vertical-align:middle}
.colorpick{margin-top:.9rem}
.cp-label{display:block;font-weight:650;color:var(--ink);font-size:.92rem;margin-bottom:.45rem}
.cp-list{display:flex;flex-wrap:wrap;gap:.5rem}
.cp-opt{display:inline-flex;align-items:center;gap:.45rem;background:var(--surface);border:1.5px solid var(--line);border-radius:999px;padding:.28rem .7rem .28rem .35rem;cursor:pointer;font:inherit;color:var(--ink);transition:border-color .15s,background .15s,box-shadow .15s}
.cp-opt:hover{border-color:var(--accent)}
.cp-opt.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.cp-dot{width:22px;height:22px;border-radius:50%;border:1px solid rgba(0,0,0,.18);flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.cp-name{font-size:.88rem;white-space:nowrap}
[data-theme="dark"] .cp-opt{background:var(--surface)}
[data-theme="dark"] .cp-dot{border-color:rgba(255,255,255,.25)}

/* Messages d'état (succès / erreur / info) — utilisables en encart */
.notice{border-radius:var(--r-sm);padding:.7rem .9rem;font-size:.92rem;font-weight:600;margin:.4rem 0;
  background:var(--info-soft);color:var(--info);border:1px solid rgba(29,78,216,.18)}
.notice.ok{background:var(--ok-soft);color:var(--ok);border-color:rgba(21,128,61,.2)}
.notice.err{background:var(--danger-soft);color:var(--danger);border-color:rgba(220,38,38,.2)}
.notice.warn{background:var(--warn-soft);color:var(--warn);border-color:rgba(180,83,9,.2)}

/* Suivi de commande : frise verticale des étapes */
.track{list-style:none;margin:1rem 0 .5rem;padding:0 0 0 .2rem;display:flex;flex-direction:column;gap:.1rem;counter-reset:step}
.track li{position:relative;display:flex;align-items:center;gap:.7rem;padding:.45rem 0 .7rem 0;color:var(--muted)}
.track .dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--line);background:var(--surface);flex:0 0 auto;position:relative;z-index:1}
.track li:not(:last-child)::before{content:"";position:absolute;left:7px;top:1.6rem;bottom:-.2rem;width:2px;background:var(--line)}
.track li.done .dot{background:var(--accent);border-color:var(--accent)}
.track li.done .lbl{color:var(--ink)}
.track li.current .dot{box-shadow:0 0 0 4px var(--accent-ring)}
.track .lbl{font-weight:600}
[data-theme="dark"] .track li.done .lbl{color:var(--ink)}
.avail{margin:.15rem 0 .4rem}
.avail .badge-soft{font-size:.72rem;padding:.15rem .5rem}

/* Réalisations — « Nos réalisations 3D » (galerie) */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.2rem}
.work{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow-xs,0 1px 2px rgba(11,18,32,.06));transition:transform .2s ease,box-shadow .2s ease}
.work:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(11,18,32,.10)}
.work .pic{position:relative;aspect-ratio:4/3;background:var(--bg-2);overflow:hidden}
.work .pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.work:hover .pic img{transform:scale(1.04)}
.work-picbtn{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;cursor:zoom-in;padding:0}
.work-picbtn img{width:100%;height:100%;object-fit:cover}
.work .meta{padding:.85rem .95rem 1rem;display:flex;flex-direction:column;gap:.3rem;flex:1}
.work .meta h3{margin:0;font-size:1.02rem}
.work .work-desc{margin:.05rem 0 0;font-size:.92rem;color:var(--muted);line-height:1.5}
.work .work-specs{margin-top:auto;padding-top:.55rem;display:flex;flex-wrap:wrap;gap:.35rem}
.work .work-specs span{background:var(--bg-2);color:var(--ink-2);border-radius:999px;padding:.18rem .55rem;font-size:.74rem;font-weight:600}
.work .work-act{margin-top:.6rem}
.work .featured-tag{position:absolute;top:.6rem;left:.6rem;z-index:1}
.gallery-empty{border:1px dashed var(--line);border-radius:var(--r-sm);padding:1.4rem;text-align:center;color:var(--muted);background:var(--bg-2)}

/* Lightbox galerie */
.nx-no-scroll{overflow:hidden}
.nx-lb[hidden]{display:none}
.nx-lb{position:fixed;inset:0;z-index:500;display:grid;place-items:center;padding:1rem}
.nx-lb-ov{position:absolute;inset:0;background:rgba(8,12,22,.82);animation:nx-fade .2s ease both}
.nx-lb-x{position:absolute;top:1rem;right:1rem;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(15,23,42,.6);color:#fff;font-size:1.4rem;line-height:1;cursor:pointer;display:grid;place-items:center;z-index:2}
.nx-lb-fig{position:relative;z-index:1;max-width:min(96vw,1100px);max-height:90vh;display:flex;flex-direction:column;align-items:center;gap:.6rem;margin:0}
.nx-lb-fig img{max-width:100%;max-height:82vh;border-radius:var(--r-sm);box-shadow:var(--sh-lg);background:#000}
.nx-lb-cap{color:#e2e8f0;font-size:.9rem;text-align:center}

/* Fiche produit — délais (réponse, fabrication, expédition) */
.delays{list-style:none;margin:.9rem 0 0;padding:.85rem 1rem;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-sm);display:flex;flex-direction:column;gap:.4rem}
.delay{display:flex;gap:.55rem;align-items:flex-start;font-size:.92rem}
.delay .k{font-weight:650;color:var(--ink);white-space:nowrap}
.delays .muted{color:var(--muted)}

/* Section « Pourquoi choisir Nexhost 3D ? » */
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem}
.why .item{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r-sm);padding:1rem 1.1rem}
.why .item b{display:flex;align-items:center;gap:.5rem;color:var(--ink)}
.why .item p{margin:.4rem 0 0;color:var(--muted);font-size:.93rem;line-height:1.55}

/* ======================================================================== */
/*  LIVRAISON (Sendcloud) — modes d'envoi, points relais, modale carte      */
/* ======================================================================== */
.ship-opt{display:flex;align-items:center;gap:.7rem;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:.7rem .85rem;margin:.5rem 0;background:var(--surface);transition:border-color .15s,box-shadow .15s}
.ship-opt.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.ship-opt input[type=radio]{flex:0 0 auto;width:auto;margin:0}
.ship-label{display:flex;align-items:center;gap:.7rem;flex:1;min-width:0;cursor:pointer;margin:0}
.ship-logo{flex:0 0 auto;width:40px;height:40px;border-radius:9px;background:var(--bg-2);display:grid;place-items:center;overflow:hidden;color:var(--muted)}
.ship-logo img{max-width:86%;max-height:86%;object-fit:contain}
.ship-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.12rem}
.ship-info strong{color:var(--ink);font-size:.95rem}
.ship-info small{color:var(--muted);font-size:.82rem}
.ship-relay{font-size:.79rem;color:var(--accent-700)}
.ship-price{flex:0 0 auto;font-weight:800;color:var(--ink);white-space:nowrap}
.ship-pick{flex:0 0 auto}

/* Modale générique (point relais) */
.nx-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:1rem}
.nx-modal[hidden]{display:none}
.nx-modal-ov{position:absolute;inset:0;background:rgba(8,12,22,.55);animation:nx-fade .2s ease both}
.nx-modal-panel{position:relative;width:min(96vw,880px);max-height:90vh;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-lg);display:flex;flex-direction:column;overflow:hidden;animation:nx-fade .22s ease both}
.nx-modal-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.2rem;border-bottom:1px solid var(--line)}
.nx-modal-head h3{margin:0;font-size:1.05rem}
.nx-modal-search{display:flex;gap:.5rem;padding:.9rem 1.2rem;border-bottom:1px solid var(--line);flex-wrap:wrap}
.nx-modal-search input{flex:1;min-width:130px}
.nx-modal-body{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;overflow:hidden}
#relayMap{height:100%;min-height:340px;background:var(--bg-2);border-right:1px solid var(--line)}
.relay-list{overflow:auto;min-height:0}
.relay-item{display:flex;gap:.7rem;align-items:flex-start;width:100%;text-align:left;background:transparent;border:0;
  border-bottom:1px solid var(--line);padding:.8rem 1.1rem;cursor:pointer;transition:background .14s}
.relay-item:hover{background:var(--bg-2)}
.relay-item:last-child{border-bottom:0}
.relay-ico{flex:0 0 auto;width:32px;height:32px;border-radius:8px;background:var(--accent-soft);color:var(--accent-700);display:grid;place-items:center;overflow:hidden}
.relay-ico img{max-width:78%;max-height:78%;object-fit:contain}
.relay-txt{display:flex;flex-direction:column;gap:.12rem;min-width:0}
.relay-txt strong{color:var(--ink);font-size:.92rem}
.relay-txt small{color:var(--muted);font-size:.8rem}
.relay-dist{color:var(--accent-700)}
@media(max-width:720px){
  .nx-modal-body{grid-template-columns:1fr;overflow:auto}
  #relayMap{height:220px;min-height:220px;border-right:0;border-bottom:1px solid var(--line)}
  .relay-list{overflow:visible}
}




/* ---- Connexion sociale (Google / Microsoft) ---- */
.so-sep{display:flex;align-items:center;gap:.7rem;margin:.9rem 0 .6rem;color:var(--muted,#777);font-size:.8rem}
.so-sep::before,.so-sep::after{content:"";flex:1;height:1px;background:var(--line,#e3e3e3)}
.so-sep span{white-space:nowrap}
.so-row{display:flex;gap:.5rem;flex-wrap:wrap}
.so-btn{flex:1;min-width:140px;justify-content:center;gap:.5rem;text-decoration:none}
.so-btn svg{flex:none}
.so-linked{display:inline-flex;align-items:center;gap:.35rem;font-size:.85rem;color:#2f9e44;font-weight:600;padding:.4rem 0}
.hero-note{margin-top:.8rem;font-size:.9rem}

/* ============================================================================
 *  Lecteur de musique (barre flottante, repliable)
 *  Masqué tant que le visiteur n'a pas lancé la lecture : aucune lecture
 *  automatique, aucun son au chargement de la page.
 * ==========================================================================*/
.nxmp{position:fixed;right:1rem;bottom:1rem;z-index:120;font-family:var(--font);
  display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;
  padding-bottom:env(safe-area-inset-bottom,0)}
.nxmp[hidden]{display:none}
.nxmp-panel{width:min(92vw,320px);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:.85rem .9rem;animation:nxmp-in .22s ease both}
.nxmp-panel[hidden]{display:none}
.nxmp-head{display:flex;align-items:center;gap:.6rem}
.nxmp-cover{flex:0 0 auto;width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--accent),var(--accent-700));color:#fff;box-shadow:var(--sh-sm)}
.nxmp-cover svg{width:22px;height:22px}
.nxmp-id{min-width:0;flex:1}
.nxmp-id b{display:block;color:var(--ink);font-size:.92rem;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nxmp-id span{display:block;color:var(--muted);font-size:.78rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nxmp-x{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:transparent;
  color:var(--muted);font-size:1.15rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.nxmp-x:hover{background:var(--bg-2);color:var(--ink)}
.nxmp-ctrl{display:flex;align-items:center;gap:.6rem;margin-top:.7rem}
.nxmp-play{flex:0 0 auto;width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;
  background:var(--accent);color:#fff;display:grid;place-items:center;transition:transform .15s ease,background .15s ease}
.nxmp-play:hover{background:var(--accent-600);transform:scale(1.05)}
.nxmp-play svg{width:18px;height:18px}
.nxmp-play .nxmp-i-pause{display:none}
.nxmp.playing .nxmp-play .nxmp-i-play{display:none}
.nxmp.playing .nxmp-play .nxmp-i-pause{display:block}
.nxmp-bar{flex:1;min-width:0}
.nxmp-seek{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:999px;border:0;cursor:pointer;
  background:linear-gradient(to right,var(--accent) var(--p,0%),var(--bg-2) var(--p,0%))}
.nxmp-seek::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:13px;height:13px;border-radius:50%;
  background:var(--accent);border:2px solid var(--surface);box-shadow:var(--sh-xs);cursor:pointer}
.nxmp-seek::-moz-range-thumb{width:13px;height:13px;border:2px solid var(--surface);border-radius:50%;background:var(--accent);cursor:pointer}
.nxmp-seek::-moz-range-track{height:5px;border-radius:999px;background:transparent}
.nxmp-time{display:flex;justify-content:space-between;color:var(--muted);font-size:.7rem;
  font-variant-numeric:tabular-nums;margin-top:.2rem}
.nxmp-vol{display:flex;align-items:center;gap:.45rem;margin-top:.5rem;color:var(--muted)}
.nxmp-vol svg{width:15px;height:15px;flex:0 0 auto}
.nxmp-vol input{-webkit-appearance:none;appearance:none;flex:1;min-width:0;height:4px;border-radius:999px;border:0;
  background:var(--bg-2);cursor:pointer;margin:0}
.nxmp-vol input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;
  background:var(--ink-2);border:2px solid var(--surface);cursor:pointer}
.nxmp-vol input::-moz-range-thumb{width:12px;height:12px;border:2px solid var(--surface);border-radius:50%;background:var(--ink-2);cursor:pointer}
/* Bouton d'ouverture de la barre */
.nxmp-fab{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--line);cursor:pointer;
  background:var(--surface);color:var(--ink);border-radius:var(--r-full);padding:.55rem .95rem;
  box-shadow:var(--sh);font:inherit;font-size:.88rem;font-weight:650;transition:transform .15s ease,box-shadow .15s ease}
.nxmp-fab:hover{transform:translateY(-2px);box-shadow:var(--sh-lg)}
.nxmp-fab svg{width:17px;height:17px;color:var(--accent)}
.nxmp-fab-note{display:none}
.nxmp.paused-fab .nxmp-fab-note{display:inline-flex}
.nxmp.paused-fab .nxmp-fab-note svg{width:15px;height:15px}
.nxmp.equal{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.nxmp.equal i{width:3px;background:var(--accent);border-radius:1px;height:5px}
.nxmp.playing .nxmp.equal i{animation:nxmp-eq .9s ease-in-out infinite}
.nxmp.playing .nxmp.equal i:nth-child(2){animation-delay:.15s}
.nxmp.playing .nxmp.equal i:nth-child(3){animation-delay:.3s}
@keyframes nxmp-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes nxmp-eq{0%,100%{height:4px}50%{height:14px}}
@keyframes nx-fade{from{opacity:0}to{opacity:1}}
@media(max-width:600px){
  .nxmp{right:.7rem;bottom:.7rem;left:.7rem;align-items:stretch}
  .nxmp-panel{width:auto}
  .nxmp-fab{align-self:flex-end}
  .nx-lb{padding:.6rem}
}
@media(prefers-reduced-motion:reduce){
  .nxmp-panel{animation:none}
  .nxmp.playing .nxmp.equal i{animation:none;height:10px}
  .nx-lb-ov{animation:none}
}

/* ============================================================ Admin 2026 ==== */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.adm-brandtag{display:inline-block;font-size:.63rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;background:var(--accent-soft);color:var(--accent-700);padding:.18rem .38rem;border-radius:6px;margin-left:.15rem;vertical-align:middle;line-height:1.2}
.adm-search{display:flex;align-items:center;gap:.45rem;background:var(--bg-2);border:1px solid var(--line);border-radius:999px;padding:.1rem .75rem;min-width:220px;max-width:330px;transition:border-color .15s,box-shadow .15s}
.adm-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.adm-search svg{color:var(--muted);flex:0 0 auto}
.adm-search input{border:0!important;background:transparent!important;box-shadow:none!important;padding:.46rem 0!important;font-size:.89rem;width:100%;min-width:0;height:auto}
.adm-search input:focus{outline:none}
.admin{grid-template-columns:266px minmax(0,1fr);align-items:start}
.side{position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h));overflow:auto;display:flex;flex-direction:column;gap:.15rem;padding:.9rem .72rem;background:linear-gradient(180deg,#0a1322 0%,#111f36 100%);border-right:1px solid rgba(255,255,255,.06);scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.side-head{display:flex;align-items:center;gap:.6rem;padding:.3rem .35rem 1rem;color:#fff}
.side-logo{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);flex:0 0 auto}
.side-head strong{display:block;font-size:.96rem;letter-spacing:-.01em;line-height:1.2}
.side-head span{display:block;font-size:.73rem;color:#8ea2c4;margin-top:.1rem}
.side-close{display:none;margin-left:auto;width:32px;height:32px;border-radius:8px;border:1px solid rgba(255,255,255,.15);background:transparent;color:#c4d2e8;font-size:1.3rem;line-height:1;cursor:pointer}
.side nav{display:flex;flex-direction:column;gap:.08rem;flex:1}
.navgroup{margin:.85rem .7rem .3rem;font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;color:#6b80a5;font-weight:800}
.side nav a{display:flex;align-items:center;gap:.58rem;padding:.52rem .68rem;border-radius:9px;font-weight:600;font-size:.89rem;color:#a9b8d3;margin-bottom:0;line-height:1.25;transition:background .15s,color .15s,transform .15s}
.side nav a svg{flex:0 0 auto;opacity:.78}
.side nav a.on,.side nav a:hover{background:rgba(255,255,255,.09);color:#fff}
.side nav a.on{background:linear-gradient(90deg,rgba(255,90,31,.22),rgba(255,90,31,.06));box-shadow:inset 2px 0 0 var(--accent)}
.side nav a.on svg{opacity:1;color:#ffb08c}
.navcount{margin-left:auto;min-width:20px;height:20px;padding:0 .35rem;border-radius:999px;background:var(--accent);color:#fff;font-size:.7rem;font-weight:800;display:none;align-items:center;justify-content:center;line-height:1}
.navcount.show{display:inline-flex}
.side-foot{margin-top:auto;padding:.85rem .55rem 0;border-top:1px solid rgba(255,255,255,.09);color:#8ea2c4;font-size:.76rem;display:flex;flex-direction:column;gap:.32rem}
.side-foot a{color:#ccd9ec;font-weight:600}
.side-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,.18);margin-right:.3rem;vertical-align:middle}
.main{padding:1.35rem clamp(.85rem,2vw,1.9rem) 3.2rem;min-width:0}
.main>h2{margin-top:0}
.adm-pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:0 0 1.1rem}
.adm-pagehead h1{margin:0;font-size:clamp(1.35rem,2.4vw,1.8rem);letter-spacing:-.025em;line-height:1.15}
.adm-sub{margin:.22rem 0 0;color:var(--muted);font-size:.88rem}
.adm-pageact{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.adm-date{font-size:.8rem;color:var(--muted);background:var(--bg-2);border:1px solid var(--line);padding:.35rem .6rem;border-radius:999px}
.adm-loading{display:flex;align-items:center;gap:.7rem;color:var(--muted);padding:2.2rem 0;font-weight:600}
.adm-spin{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--accent);animation:adm-spin .8s linear infinite;flex:0 0 auto}
@keyframes adm-spin{to{transform:rotate(360deg)}}
.adm-hero{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;background:radial-gradient(120% 140% at 0% 0%,#1c2d4b 0%,#0d1728 60%);color:#fff;border-radius:18px;padding:1.25rem 1.35rem;margin-bottom:1rem;border:1px solid rgba(255,255,255,.06);box-shadow:0 18px 40px -28px rgba(2,6,23,.8)}
.adm-hero h2{margin:0 0 .28rem;color:#fff;font-size:clamp(1.15rem,2vw,1.5rem);letter-spacing:-.02em}
.adm-hero p{margin:0;color:#a9b8d3;font-size:.9rem;max-width:60ch}
.adm-hero-act{display:flex;gap:.45rem;flex-wrap:wrap}
.adm-hero-act .btn{background:#fff;color:#0b1220;border-color:transparent}
.adm-hero-act .btn.ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.18)}
.adm-alerts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.7rem;margin-bottom:1rem}
.adm-alert{display:flex;align-items:center;gap:.7rem;padding:.78rem .9rem;border-radius:13px;border:1px solid var(--line);background:#fff;text-decoration:none;color:inherit;box-shadow:var(--sh-xs);transition:transform .15s,box-shadow .15s,border-color .15s}
.adm-alert:hover{transform:translateY(-1px);box-shadow:var(--sh-sm);border-color:#ffcfae}
.adm-alert-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto;background:var(--warn-soft);color:var(--warn)}
.adm-alert.danger .adm-alert-ic{background:var(--danger-soft);color:var(--danger)}
.adm-alert.info .adm-alert-ic{background:#eff6ff;color:#1d4ed8}
.adm-alert b{display:block;font-size:.88rem}
.adm-alert span{display:block;font-size:.77rem;color:var(--muted)}
.adm-alert-n{margin-left:auto;font-size:1.05rem;font-weight:800;color:var(--warn)}
.adm-alert.danger .adm-alert-n{color:var(--danger)}
.adm-allgood{display:flex;align-items:center;gap:.7rem;padding:.8rem .9rem;border-radius:13px;background:var(--ok-soft);border:1px solid rgba(21,128,61,.16);color:var(--ok)}
.adm-allgood b{display:block;font-size:.88rem}
.adm-allgood span{display:block;font-size:.77rem;opacity:.85}
.adm-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:.75rem}
.adm-kpi{display:flex;align-items:flex-start;gap:.72rem;background:#fff;border:1px solid var(--line);border-radius:14px;padding:.85rem .9rem;box-shadow:var(--sh-xs);text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s,border-color .15s;min-width:0}
a.adm-kpi:hover{transform:translateY(-1px);box-shadow:var(--sh-sm);border-color:#ffcfae}
.adm-kpi-ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-700);flex:0 0 auto}
.adm-kpi-txt{min-width:0}
.adm-kpi-txt>span:first-child{display:block;font-size:.76rem;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-kpi-txt b{display:block;font-size:clamp(1.12rem,1.6vw,1.35rem);letter-spacing:-.02em;line-height:1.18;margin:.05rem 0 .1rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-kpi-foot{display:block;font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-kpi.good .adm-kpi-ic{background:var(--ok-soft);color:var(--ok)}
.adm-kpi.bad .adm-kpi-ic{background:var(--danger-soft);color:var(--danger)}
.adm-grid2{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:1rem;margin-top:1rem}
.adm-panelhead{display:flex;align-items:flex-start;justify-content:space-between;gap:.7rem;flex-wrap:wrap;margin-bottom:.65rem}
.adm-panelhead h3{margin:0;font-size:1.02rem;letter-spacing:-.01em}
.adm-panelhead p{margin:.15rem 0 0;font-size:.8rem}
.adm-legend{display:flex;gap:.7rem;font-size:.74rem;color:var(--muted);align-items:center}
.adm-legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:.25rem;vertical-align:middle}
.adm-legend .lg-ca{background:var(--accent)}
.adm-legend .lg-exp{background:#f5a524}
.adm-chart{display:flex;align-items:flex-end;gap:.45rem;height:185px;padding-top:.4rem;overflow-x:auto;scrollbar-width:thin}
.adm-chart .col{flex:1 1 0;min-width:30px;display:flex;flex-direction:column;align-items:center;gap:.3rem;height:100%;justify-content:flex-end}
.adm-chart .bars{display:flex;align-items:flex-end;justify-content:center;gap:3px;height:100%;width:100%}
.adm-chart .bar{width:40%;min-height:2px;border-radius:4px 4px 1px 1px;background:var(--accent);opacity:.92}
.adm-chart .bar.exp{background:#f5a524}
.adm-chart .lbl{font-size:.66rem;color:var(--muted);text-transform:capitalize;line-height:1}
.adm-details{margin-top:.6rem;border-top:1px dashed var(--line);padding-top:.5rem}
.adm-details summary{cursor:pointer;font-size:.8rem;color:var(--muted);font-weight:600}
.adm-details[open] summary{margin-bottom:.4rem}
.adm-healthlist{display:flex;flex-direction:column;gap:.35rem}
.adm-health{display:flex;align-items:center;gap:.6rem;padding:.52rem .6rem;border-radius:9px;text-decoration:none;color:inherit;border:1px solid transparent;transition:background .15s,border-color .15s}
.adm-health:hover{background:var(--bg-2);border-color:var(--line)}
.adm-health-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}
.adm-health.warn .adm-health-dot{background:var(--warn);box-shadow:0 0 0 3px var(--warn-soft)}
.adm-health b{display:block;font-size:.82rem;line-height:1.2}
.adm-health span{display:block;font-size:.72rem;color:var(--muted)}
.adm-health-act{margin-left:auto;font-size:.72rem;font-weight:700;color:var(--accent-700);white-space:nowrap}
.adm-quick{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.75rem}
.adm-list{display:flex;flex-direction:column;gap:.3rem}
.adm-listrow{display:flex;align-items:center;gap:.6rem;padding:.6rem .55rem;border-radius:9px;text-decoration:none;color:inherit;border:1px solid transparent;transition:background .15s,border-color .15s}
.adm-listrow:hover{background:var(--bg-2);border-color:var(--line)}
.adm-listrow-ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-700);flex:0 0 auto}
.adm-listrow div{min-width:0}
.adm-listrow b{display:block;font-size:.83rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-listrow span{display:block;font-size:.73rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-listrow-arrow{margin-left:auto;color:var(--muted);flex:0 0 auto}
.adm-toolbar{display:flex;gap:.45rem;align-items:center;flex-wrap:wrap;margin:.1rem 0 .6rem}
.adm-toolbar input,.adm-toolbar select{margin:0;min-width:0}
.adm-toolbar input[type=search]{flex:1 1 190px;min-width:150px}
.adm-toolbar select{flex:0 0 auto;max-width:220px}
.adm-tabs{display:flex;gap:.35rem;flex-wrap:wrap;margin:.2rem 0 .7rem}
.adm-tab{display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--line);background:#fff;border-radius:999px;padding:.34rem .68rem;font-size:.79rem;font-weight:700;color:var(--muted);cursor:pointer;line-height:1.2;transition:background .15s,color .15s,border-color .15s}
.adm-tab:hover{border-color:#ffcfae;color:var(--ink)}
.adm-tab.on{background:var(--accent-soft);color:var(--accent-700);border-color:#ffd9c6}
.adm-tab .c{min-width:18px;height:18px;padding:0 .28rem;border-radius:999px;background:rgba(15,23,42,.07);font-size:.68rem;display:inline-flex;align-items:center;justify-content:center;font-weight:800}
.adm-tab.on .c{background:rgba(194,65,12,.12)}
.adm-tablewrap{overflow-x:auto;scrollbar-width:thin}
.adm-table{width:100%;border-collapse:collapse;font-size:.86rem}
.adm-table th{font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:800;text-align:left;padding:.5rem .45rem;border-bottom:1px solid var(--line);white-space:nowrap}
.adm-table td{padding:.55rem .45rem;border-bottom:1px solid var(--line);vertical-align:middle}
.adm-table tr:last-child td{border-bottom:0}
.adm-table tbody tr:hover{background:rgba(255,90,31,.035)}
.adm-right{text-align:right!important}
.adm-nowrap{white-space:nowrap}
.adm-muted{color:var(--muted);font-size:.78rem}
.adm-link{background:none;border:0;padding:0;color:var(--accent-700);font-weight:700;text-decoration:none;cursor:pointer;font-size:inherit;font-family:inherit}
.adm-link:hover{text-decoration:underline;text-underline-offset:2px}
.adm-empty{text-align:center;color:var(--muted);padding:1.4rem .5rem!important;font-size:.86rem}
.adm-track{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.78rem;background:var(--bg-2);padding:.1rem .3rem;border-radius:4px;border:1px solid var(--line)}
.adm-thumb-empty{width:42px;height:42px;border-radius:8px;display:grid;place-items:center;background:var(--bg-2);color:var(--muted);border:1px solid var(--line)}
.adm-chip{display:inline-block;font-size:.68rem;font-weight:600;background:var(--bg-2);border:1px solid var(--line);border-radius:999px;padding:.14rem .45rem;margin:0 .2rem .2rem 0;color:var(--body)}
.adm-quote-msg{white-space:pre-wrap;font-size:.8rem;color:var(--body);background:var(--bg-2);border-radius:8px;padding:.55rem .65rem;margin-top:.3rem;max-height:220px;overflow:auto}
.adm-check{display:flex!important;align-items:center;gap:.4rem;font-weight:500!important;margin:.55rem 0!important;font-size:.84rem}
.adm-check input{width:auto!important;margin:0!important}
.adm-badge{display:inline-flex;align-items:center;gap:.3rem;padding:.18rem .5rem;border-radius:999px;font-size:.7rem;font-weight:700;background:var(--bg-2);color:var(--muted);border:1px solid var(--line);white-space:nowrap;line-height:1.4}
.adm-badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto;opacity:.8}
.adm-badge.st-pending{background:#fff7ed;color:#b45309;border-color:#fde3c4}
.adm-badge.st-paid{background:#eff6ff;color:#1d4ed8;border-color:#d6e4ff}
.adm-badge.st-preparing{background:#fffbeb;color:#b45309;border-color:#fde68a}
.adm-badge.st-shipped{background:#f5f3ff;color:#6d28d9;border-color:#e4ddff}
.adm-badge.st-done{background:var(--ok-soft);color:var(--ok);border-color:#c7ecd6}
.adm-badge.st-cancelled{background:var(--danger-soft);color:var(--danger);border-color:#fbd5d5}
.adm-badge.st-ok{background:var(--ok-soft);color:var(--ok);border-color:#c7ecd6}
.adm-badge.st-warn{background:var(--warn-soft);color:var(--warn);border-color:#fde3c4}
.adm-badge.st-err{background:var(--danger-soft);color:var(--danger);border-color:#fbd5d5}
.adm-badge.q-new{background:var(--accent-soft);color:var(--accent-700);border-color:#ffd9c6}
.adm-badge.q-contacted{background:#eff6ff;color:#1d4ed8;border-color:#d6e4ff}
.adm-badge.q-replied{background:#fffbeb;color:#b45309;border-color:#fde68a}
.adm-badge.q-done{background:var(--ok-soft);color:var(--ok);border-color:#c7ecd6}
.adm-badge.q-archived{background:var(--bg-2);color:var(--muted)}
.adm-danger{color:var(--danger)!important;border-color:#f3c4c4!important}
.adm-danger:hover{background:var(--danger-soft)!important}
.adm-no-scroll{overflow:hidden}
/* Tiroir de detail */
.adm-drawer{position:fixed;inset:0;z-index:90;display:flex;justify-content:flex-end;animation:nx-fade .18s ease}
.adm-drawer-bd{position:absolute;inset:0;background:rgba(8,15,28,.48);backdrop-filter:blur(2px)}
.adm-drawer-panel{position:relative;width:min(660px,100%);height:100%;overflow:auto;background:#fff;box-shadow:-24px 0 70px rgba(2,6,23,.32);padding:1.15rem 1.2rem 2.2rem;animation:adm-slide .22s ease;scrollbar-width:thin}
@keyframes adm-slide{from{transform:translateX(40px);opacity:.4}to{transform:none;opacity:1}}
.adm-drawer-x{position:absolute;top:.8rem;right:.8rem;width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--bg-2);color:var(--muted);font-size:1.35rem;line-height:1;cursor:pointer;display:grid;place-items:center;font-family:inherit}
.adm-drawer-x:hover{color:var(--ink);background:#fff}
.adm-drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem;padding-right:2.2rem;padding-bottom:.8rem;border-bottom:1px solid var(--line)}
.adm-drawer-head h2{margin:.05rem 0 .2rem;font-size:1.25rem;letter-spacing:-.02em}
.adm-drawer-head p{margin:0;font-size:.78rem}
.adm-sect{padding:.85rem 0;border-bottom:1px solid var(--line)}
.adm-sect:last-child{border-bottom:0}
.adm-sect h4{margin:0 0 .45rem;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.adm-sect p{margin:.2rem 0;font-size:.84rem}
.adm-client{display:flex;gap:1rem;justify-content:space-between;flex-wrap:wrap;font-size:.85rem}
.adm-client b{display:block;font-size:.92rem}
.adm-client a,.adm-client span{display:block;font-size:.8rem;color:var(--muted)}
.adm-totals{display:flex;flex-direction:column;gap:.25rem;align-items:flex-end;margin-top:.6rem;font-size:.84rem}
.adm-totals span{display:flex;justify-content:space-between;gap:1.4rem;min-width:210px;color:var(--muted)}
.adm-totals b{color:var(--ink)}
.adm-totals .adm-total{border-top:1px solid var(--line);padding-top:.35rem;margin-top:.2rem;font-weight:800;color:var(--ink);font-size:1rem}
.adm-steps{display:flex;gap:.3rem;flex-wrap:wrap}
.adm-step{flex:1 1 0;min-width:74px;text-align:center;font-size:.7rem;font-weight:700;padding:.44rem .3rem;border-radius:8px;background:var(--bg-2);color:var(--muted);border:1px solid var(--line);line-height:1.2}
.adm-step.done{background:var(--ok-soft);color:var(--ok);border-color:#c7ecd6}
.adm-step.now{background:var(--accent-soft);color:var(--accent-700);border-color:#ffd9c6;box-shadow:0 0 0 2px rgba(255,90,31,.12)}
.adm-timeline{list-style:none;margin:.2rem 0 0;padding:0 0 0 1rem;border-left:2px solid var(--line)}
.adm-timeline li{position:relative;padding:0 0 .75rem 0}
.adm-timeline li:last-child{padding-bottom:0}
.adm-timeline li:before{content:"";position:absolute;left:-1.34rem;top:.32rem;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--bg)}
.adm-timeline b{display:block;font-size:.8rem;line-height:1.3}
.adm-timeline span{display:block;font-size:.72rem;color:var(--muted)}
.adm-timeline li>span{display:block}
.adm-feed{display:flex;flex-direction:column;gap:.2rem}
.adm-tlrow{display:flex;align-items:flex-start;gap:.65rem;padding:.6rem .45rem;border-bottom:1px solid var(--line);border-radius:8px}
.adm-tlrow:last-child{border-bottom:0}
.adm-tlrow:hover{background:var(--bg-2)}
.adm-tlrow-ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-700);flex:0 0 auto}
.adm-tlrow-txt{flex:1;min-width:0}
.adm-tlrow-head{display:flex;align-items:baseline;justify-content:space-between;gap:.7rem;flex-wrap:wrap}
.adm-tlrow-head b{font-size:.85rem;line-height:1.3}
.adm-tlrow-head span{font-size:.71rem;color:var(--muted);white-space:nowrap}
.adm-tlrow p{margin:.1rem 0;font-size:.79rem;color:var(--body);overflow-wrap:anywhere}
.adm-tlrow .adm-muted{font-size:.72rem}
.adm-tlrow>.btn{flex:0 0 auto}
.adm-healthlist+.adm-quick{margin-top:.7rem}
@media(max-width:1180px){.adm-grid2{grid-template-columns:1fr}}
@media(max-width:900px){
  .admin{grid-template-columns:1fr}
  .side{display:flex;position:fixed;z-index:75;left:0;top:0;bottom:0;height:100vh;width:min(300px,86vw);transform:translateX(-104%);transition:transform .24s ease;box-shadow:24px 0 60px rgba(2,6,23,.4);border-right:0}
  .side.open{display:flex;transform:none}
  .side-close{display:inline-grid;place-items:center}
  body.adm-menu-open:after{content:"";position:fixed;inset:0;background:rgba(8,15,28,.45);z-index:70}
  .main{padding:1.05rem .85rem 2.6rem}
  .adm-search{min-width:0;flex:1;max-width:none}
  .adm-hide-sm{display:none!important}
  .adm-pagehead{align-items:flex-start}
  .adm-hero{padding:1.05rem}
  .adm-kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .adm-drawer-panel{width:100%;padding:1rem .9rem 2rem}
  .adm-tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.2rem}
  .adm-tab{flex:0 0 auto}
  .main .panel>table{display:block;max-width:100%;overflow-x:auto;white-space:nowrap}
}
@media(max-width:620px){
  .adm-search{max-width:150px}
  .adm-search input{font-size:.82rem}
  .adm-pagehead h1{font-size:1.3rem}
  .adm-kpi{padding:.7rem .75rem;gap:.55rem}
  .adm-kpi-ic{width:32px;height:32px}
  .adm-kpi-txt b{font-size:1.05rem}
  .adm-chart{height:150px}
  .adm-table{font-size:.82rem}
  .adm-step{min-width:60px;font-size:.66rem}
  .adm-hero-act{width:100%}
  .adm-hero-act .btn{flex:1}
}
@media(prefers-reduced-motion:reduce){
  .adm-drawer,.adm-drawer-panel,.adm-spin{animation:none}
  .adm-alert,.adm-kpi{transition:none}
}
[data-theme="dark"] .adm-search{background:#161f2e;border-color:var(--line)}
[data-theme="dark"] .adm-kpi,[data-theme="dark"] .adm-alert,[data-theme="dark"] .adm-tab,[data-theme="dark"] .adm-listrow,[data-theme="dark"] .adm-drawer-panel,[data-theme="dark"] .adm-health:hover,[data-theme="dark"] .adm-details .adm-quote-msg{background:#111a29;border-color:var(--line);color:var(--ink)}
[data-theme="dark"] .adm-alert:hover,[data-theme="dark"] .adm-kpi:hover,[data-theme="dark"] .adm-tab:hover{border-color:#33405a}
[data-theme="dark"] .adm-tab.on{background:rgba(255,90,31,.16);color:#ffb27a;border-color:rgba(255,90,31,.3)}
[data-theme="dark"] .adm-tab .c{background:rgba(255,255,255,.08)}
[data-theme="dark"] .adm-badge{background:#18212f;border-color:var(--line)}
[data-theme="dark"] .adm-muted,[data-theme="dark"] .adm-kpi-txt>span:first-child,[data-theme="dark"] .adm-kpi-foot{color:#94a3b8}
[data-theme="dark"] .adm-table th{border-bottom-color:var(--line)}
[data-theme="dark"] .adm-table td{border-bottom-color:var(--line)}
[data-theme="dark"] .adm-table tbody tr:hover{background:rgba(255,255,255,.03)}
[data-theme="dark"] .adm-drawer-x{background:#18212f}
[data-theme="dark"] .adm-drawer-x:hover{background:#1f2a3d;color:#fff}
[data-theme="dark"] .adm-timeline:before{border-color:var(--line)}
[data-theme="dark"] .adm-step{background:#18212f;border-color:var(--line)}
[data-theme="dark"] .adm-step.done{background:rgba(21,128,61,.2);border-color:rgba(21,128,61,.35);color:#7ddba3}
[data-theme="dark"] .adm-step.now{background:rgba(255,90,31,.16);border-color:rgba(255,90,31,.3);color:#ffb27a}
[data-theme="dark"] .adm-quote-msg,[data-theme="dark"] .adm-thumb-empty,[data-theme="dark"] .adm-chip,[data-theme="dark"] .adm-track{background:#18212f;border-color:var(--line)}
[data-theme="dark"] .adm-chart .bar{opacity:1}
[data-theme="dark"] .adm-health-act{color:#ffb27a}
[data-theme="dark"] .adm-alert-ic{background:rgba(180,83,9,.2);color:#fbbf24}
[data-theme="dark"] .adm-alert.info .adm-alert-ic{background:rgba(29,78,216,.2);color:#93c5fd}
[data-theme="dark"] .adm-alert.danger .adm-alert-ic{background:rgba(220,38,38,.2);color:#fca5a5}
[data-theme="dark"] .adm-badge.st-pending,[data-theme="dark"] .adm-badge.st-preparing,[data-theme="dark"] .adm-badge.st-warn{background:rgba(180,83,9,.2);border-color:rgba(180,83,9,.42);color:#fbbf24}
[data-theme="dark"] .adm-badge.st-paid,[data-theme="dark"] .adm-badge.q-contacted{background:rgba(29,78,216,.22);border-color:rgba(29,78,216,.45);color:#93c5fd}
[data-theme="dark"] .adm-badge.st-shipped{background:rgba(109,40,217,.24);border-color:rgba(109,40,217,.45);color:#c4b5fd}
[data-theme="dark"] .adm-badge.st-done,[data-theme="dark"] .adm-badge.st-ok,[data-theme="dark"] .adm-badge.q-done{background:rgba(21,128,61,.22);border-color:rgba(21,128,61,.42);color:#7ddba3}
[data-theme="dark"] .adm-badge.st-cancelled,[data-theme="dark"] .adm-badge.st-err{background:rgba(220,38,38,.2);border-color:rgba(220,38,38,.4);color:#fca5a5}
[data-theme="dark"] .adm-badge.q-new{background:rgba(255,90,31,.18);border-color:rgba(255,90,31,.32);color:#ffb27a}
[data-theme="dark"] .adm-badge.q-replied{background:rgba(180,83,9,.2);border-color:rgba(180,83,9,.42);color:#fbbf24}
[data-theme="dark"] .adm-badge.q-archived{background:#18212f;border-color:var(--line);color:#94a3b8}