:root{color-scheme:dark;--bg:#070d19;--panel:#101b2c;--line:#273a50;--text:#edf5ff;--muted:#a4b6ca;--gold:#f5b757;--teal:#52dccb;--blue:#82a9ff}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at 79% 0%,#17304b 0,transparent 38%),var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
a{color:inherit;text-decoration:none}
button,a{touch-action:manipulation}
a:focus-visible{outline:2px solid var(--teal);outline-offset:4px}
img{max-width:100%}
.topbar{border-bottom:1px solid #26384b;background:#091321ec;backdrop-filter:blur(15px)}
.topbar-inner,.page,.footer{width:min(1200px,calc(100% - 42px));margin:auto}
.topbar-inner{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:26px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand img{width:130px;height:52px;object-fit:contain}
.brand span{padding-left:11px;border-left:1px solid #56647b;color:var(--teal);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;white-space:nowrap}
.topbar nav{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.topbar nav a{padding:10px 13px;border-radius:10px;color:#c6d4e3;font-size:13px;font-weight:700;transition:.18s ease}
.topbar nav a:hover,.topbar nav a.active{background:#1a3144;color:#fff}
.topbar nav .nav-account{margin-left:8px;border:1px solid #477a83;color:#d7fff9;background:#173a42}
.nav-account span{color:var(--teal)}
.page{padding:32px 0 55px}
.hero{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(345px,.78fr);gap:35px;align-items:center;padding:42px 46px;border:1px solid #32506a;border-radius:25px;background:linear-gradient(115deg,#0d1a2c 6%,#14243b 52%,#112635);box-shadow:0 24px 70px #0207108c}
.hero:before{content:"";position:absolute;width:390px;height:390px;border-radius:50%;background:#19b9ab19;filter:blur(40px);right:-145px;top:-185px;z-index:-1}
.hero-grid{position:absolute;inset:0;z-index:-1;opacity:.18;background-image:linear-gradient(#78a6b219 1px,transparent 1px),linear-gradient(90deg,#78a6b219 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(90deg,transparent 15%,#000)}
.eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--teal);font-size:11px;font-weight:850;letter-spacing:.16em}
.eyebrow i,.pulse{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 12px var(--teal)}
h1,h2,h3,p{margin-top:0}
h1{max-width:660px;margin:18px 0 17px;font-size:clamp(32px,4vw,56px);line-height:1.08;letter-spacing:-.052em}
h1 em{font-style:normal;color:var(--gold)}
.hero-copy>p{max-width:560px;margin-bottom:24px;color:#c2d0df;font-size:15px;line-height:1.65}
.hero-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:23px;min-height:43px;padding:10px 17px;border-radius:10px;font-size:13px;font-weight:850;transition:transform .18s,box-shadow .18s,background .18s}
.button:hover{transform:translateY(-2px)}
.button-primary{background:linear-gradient(105deg,#f7c36f,#e8a33d);color:#202016;box-shadow:0 8px 21px #eaa83a3c}
.button-primary:hover{box-shadow:0 10px 30px #eaa83a66}
.button-quiet{background:#21354a;border:1px solid #466079;color:#eaf5ff}
.button-quiet:hover{background:#2d465f}
.trust-row{display:flex;gap:7px;flex-wrap:wrap;margin-top:25px}
.trust-row span{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid #355066;border-radius:8px;background:#15283b;color:#d5e3f0;font-size:11px;font-weight:700;white-space:nowrap}
.trust-icon{font-style:normal;font-size:12px}
.trust-price{color:var(--gold)}
.trust-bank{color:var(--blue)}
.trust-track{color:var(--teal)}
.hero-console{padding:17px;border:1px solid #496777;border-radius:17px;background:linear-gradient(150deg,#172b3b,#0d1a29);box-shadow:0 18px 45px #02091699}
.console-head{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:3px 2px 15px}
.console-head span:first-child,.section-heading span{color:var(--teal);font-size:10px;letter-spacing:.15em;font-weight:850}
.console-head h2{margin:4px 0 0;font-size:19px;letter-spacing:-.03em}
.console-mark{color:var(--gold);font-size:22px}
.game-list{display:grid;gap:9px}
.game-card{display:flex;align-items:center;gap:12px;min-height:72px;padding:12px;border:1px solid #46607b;border-radius:12px;background:#1a3044;transition:transform .18s,border-color .18s,background .18s,box-shadow .18s}
.game-card:hover{transform:translateX(3px);border-color:var(--gold);background:#263b4d;box-shadow:0 8px 20px #030a1680}
.game-symbol{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:10px;background:#5b4025;color:#ffd58c;font-size:22px;font-weight:900}
.game-touch .game-symbol{background:#203d57;color:#9bc9ff}
.game-copy{display:grid;min-width:0}
.game-copy strong{font-size:14px}
.game-copy small{color:#b7c9d8;font-size:11px}
.game-arrow{margin-left:auto;color:var(--gold);font-size:19px}
.game-touch .game-arrow{color:var(--blue)}
.console-foot{display:flex;align-items:center;gap:8px;margin:13px 2px 1px;color:#b5c9d7;font-size:11px}
.flow{padding:31px 1px 25px}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:15px}
.section-heading h2{margin:5px 0 18px;font-size:22px;letter-spacing:-.035em}
.flow-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.flow-steps article{display:flex;gap:12px;padding:17px;border:1px solid #30485c;border-radius:13px;background:#111e2e}
.step-num{display:grid;place-items:center;width:35px;height:35px;flex:none;border-radius:9px;background:#2b4052;color:var(--gold);font-size:12px;font-weight:900}
.flow-steps h3{margin:0 0 4px;font-size:13px}
.flow-steps p{margin:0;color:#afc0d0;font-size:12px;line-height:1.45}
.bottom-strip{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 18px;border:1px solid #3a5e60;border-radius:13px;background:#102c32}
.bottom-strip>div{display:flex;align-items:center;gap:11px}
.bottom-icon{display:grid;place-items:center;width:33px;height:33px;border-radius:9px;background:#18515a;color:var(--teal);font-weight:900}
.bottom-strip strong{font-size:13px}
.bottom-strip p{margin:1px 0 0;color:#a9c3c8;font-size:11px}
.bottom-strip>a{color:#bff5e9;white-space:nowrap;font-size:12px;font-weight:800}
.bottom-strip>a:hover{color:#fff}
.footer{position:relative;margin-top:34px;padding:17px 18px 12px;border:1px solid #294457;border-radius:18px 18px 0 0;background:radial-gradient(circle at 8% 0,#24627124,transparent 34%),radial-gradient(circle at 92% 20%,#9d71301d,transparent 30%),linear-gradient(145deg,#102535,#091724);box-shadow:inset 0 1px #ffffff0a,0 -16px 45px #02081138;overflow:hidden}
.footer:before{content:"";position:absolute;top:0;right:8%;left:8%;height:1px;background:linear-gradient(90deg,transparent,#63dbc7,#c2954c,transparent);box-shadow:0 0 12px #64dac67a}
.footer-main{display:grid;grid-template-columns:minmax(265px,.8fr) minmax(430px,1.2fr);align-items:center;gap:32px;padding:3px 0 15px}
.footer-brand{display:grid;gap:12px;min-width:0}
.footer-signature{display:flex;align-items:center;gap:13px}
.footer-signature img{display:block;width:145px;height:auto;padding:7px 9px;border:1px solid #ead8b746;border-radius:10px;background:linear-gradient(130deg,#f6eddd,#d9c6a6);box-shadow:0 8px 22px #030a1438;filter:none}
.footer-signature>span{display:grid;gap:3px;padding-left:12px;border-left:1px solid #355267}
.footer-signature strong{color:#eef7f8;font-size:12px;font-weight:900}
.footer-signature small{color:#7895a6;font-size:10.5px;font-weight:700}
.footer-trust{display:flex;flex-wrap:wrap;gap:6px}
.footer-trust span{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border:1px solid #2c4a5c;border-radius:8px;background:#10283a;color:#a9c3cc;font-size:10.5px;font-weight:750;white-space:nowrap}
.footer-trust i,.footer-secure i{width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:#5ed8b5;box-shadow:0 0 8px #5ed8b5}
.footer-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.footer-links section{display:grid;align-content:start;gap:5px;padding-left:14px;border-left:1px solid #294658}
.footer-links h2{margin:0 0 3px;color:#d3a65f;font-size:10.5px;font-weight:950;letter-spacing:.1em;text-transform:uppercase}
.footer-links a{position:relative;width:max-content;max-width:100%;color:#adc1cd;font-size:11px;font-weight:720;transition:color .18s,transform .18s}
.footer-links a:hover{color:#70ddca;transform:translateX(2px)}
.footer-external span{color:#d7aa61}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:10px;border-top:1px solid #263f50;color:#718c9d;font-size:10.5px;font-weight:700}
.footer-secure{display:inline-flex;align-items:center;gap:7px;color:#83bcae}
@media(max-width:900px){.topbar-inner{padding:10px 0;align-items:flex-start;flex-direction:column;gap:5px}
.topbar nav{width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:3px}
.topbar nav a{white-space:nowrap}
.topbar nav .nav-account{margin-left:0}
.hero{grid-template-columns:1fr;padding:32px;gap:26px}
.hero-console{max-width:none}
.flow-steps{grid-template-columns:1fr}
.footer-main{grid-template-columns:1fr;gap:20px}
}
@media(max-width:550px){.topbar-inner,.page,.footer{width:min(100% - 24px,1200px)}
.hero{padding:25px 18px;border-radius:17px}
h1{font-size:34px}
.hero-copy>p{font-size:14px}
.hero-actions .button{flex:1;min-width:165px}
.trust-row span{font-size:10px}
.flow{padding-top:26px}
.section-heading h2{font-size:19px}
.bottom-strip{align-items:flex-start;flex-direction:column}
.footer{padding:16px 14px 11px;border-radius:15px 15px 0 0}.footer-links{grid-template-columns:1fr 1fr;gap:14px}.footer-links section:last-child{grid-column:1/-1}.footer-signature{align-items:flex-start}.footer-trust{display:grid;grid-template-columns:1fr}.footer-bottom{align-items:flex-start;flex-direction:column;gap:7px}
}

:where(.brand,.footer) img{filter:brightness(0) invert(1)}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}


/* Achat Maroc V2 · business icon system and compact premium home */
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.topbar svg,.button svg,.eyebrow svg,.trust-row svg,.console-mark svg,.game-symbol svg,.step-icon svg,.bottom-icon svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.topbar{position:sticky;top:0;z-index:20;box-shadow:0 10px 35px #02081152}
.topbar-inner{min-height:70px}
.brand img{width:120px;height:46px}
.topbar nav a{display:inline-flex;align-items:center;gap:7px;padding:9px 11px;border:1px solid transparent}
.topbar nav a>svg{width:15px;height:15px;color:#7893aa;transition:color .18s,transform .18s}
.topbar nav a:hover,.topbar nav a.active{border-color:#365169;background:#14283a}
.topbar nav a:hover>svg,.topbar nav a.active>svg{color:var(--teal);transform:translateY(-1px)}
.topbar nav .nav-account{border-color:#356a71;background:linear-gradient(135deg,#163943,#102c37)}
.topbar nav .nav-account>svg{color:var(--teal)}

.page{padding-top:25px}
.hero{grid-template-columns:minmax(0,1.08fr) minmax(330px,.72fr);gap:31px;padding:34px 38px;border-radius:21px;background:linear-gradient(116deg,#0b1728 0%,#14263b 57%,#102b35 100%)}
.hero:after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 1px #ffffff0d}
.eyebrow{padding:6px 9px 6px 7px;border:1px solid #2e665f;border-radius:999px;background:#112f31;color:#72e4d5;font-size:10px}
.eyebrow svg{width:16px;height:16px;color:var(--gold)}
h1{margin:15px 0 13px;font-size:clamp(31px,3.6vw,48px);line-height:1.04}
.hero-copy>p{max-width:530px;margin-bottom:20px;font-size:14px}
.button{min-height:41px;padding:9px 14px;gap:10px}
.button svg{width:16px;height:16px}
.button>span:last-child{margin-left:7px}
.trust-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:20px}
.trust-row span{display:grid;grid-template-columns:27px 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;padding:8px 9px;border-radius:10px;background:linear-gradient(145deg,#14283a,#101f30);white-space:normal}
.trust-row svg{grid-row:1/3;width:22px;height:22px}
.trust-row b{font-size:10.5px;line-height:1.15}
.trust-row small{color:#849caf;font-size:8.5px;line-height:1.2}
.trust-price svg{color:var(--gold)}
.trust-bank svg{color:var(--blue)}
.trust-track svg{color:var(--teal)}

.hero-console{padding:15px;border-color:#3f6271;border-radius:15px;background:linear-gradient(155deg,#172c3c,#0a1726);box-shadow:0 18px 45px #02091680,inset 0 1px #ffffff0b}
.console-head{padding:2px 2px 13px}
.console-head h2{font-size:17px}
.console-mark{display:grid;place-items:center;width:36px;height:36px;border:1px solid #654f30;border-radius:10px;background:#2b251d;color:var(--gold)}
.console-mark svg{width:21px;height:21px}
.game-card{min-height:65px;padding:10px 11px;border-color:#354f65;background:linear-gradient(135deg,#182e43,#13263a)}
.game-card:hover{transform:translateY(-2px);border-color:#dba753;background:linear-gradient(135deg,#21384b,#172d40)}
.game-symbol{width:40px;height:40px;border:1px solid #7f6035;background:#352a1d}
.game-symbol svg{width:22px;height:22px}
.game-touch .game-symbol{border-color:#3c6688;background:#172f45}
.game-copy strong{font-size:13.5px}
.game-arrow{display:grid;place-items:center;width:27px;height:27px;border-radius:8px;background:#ffffff0a;font-size:16px;transition:transform .18s,background .18s}
.game-card:hover .game-arrow{transform:translateX(2px);background:#f5b7571c}
.console-foot{margin-top:11px}
.console-foot a{margin-left:auto;color:var(--teal);font-size:10px;font-weight:800}
.pulse{animation:availabilityPulse 2.4s ease-in-out infinite}
@keyframes availabilityPulse{0%,100%{box-shadow:0 0 6px var(--teal);opacity:.75}
50%{box-shadow:0 0 15px var(--teal);opacity:1}
}

.flow{padding:26px 1px 21px}
.section-heading h2{margin-bottom:14px;font-size:20px}
.flow-steps{gap:9px}
.flow-steps article{position:relative;align-items:center;min-height:88px;padding:14px 15px;overflow:hidden;transition:transform .18s,border-color .18s,background .18s}
.flow-steps article:after{content:"";position:absolute;right:-18px;bottom:-22px;width:70px;height:70px;border-radius:50%;background:#52dccb0b}
.flow-steps article:hover{transform:translateY(-2px);border-color:#44647a;background:#142436}
.step-icon{position:relative;display:grid;place-items:center;width:43px;height:43px;flex:none;border:1px solid #455a70;border-radius:11px;background:#1c3043}
.step-icon svg{width:21px;height:21px}
.step-icon b{position:absolute;right:-4px;bottom:-5px;display:grid;place-items:center;width:18px;height:18px;border:2px solid #111e2e;border-radius:50%;background:#263f53;color:#dceafa;font-size:7px}
.step-icon.server{color:var(--gold)}
.step-icon.bank{color:var(--blue)}
.step-icon.delivery{color:var(--teal)}
.flow-steps h3{font-size:13.5px}
.flow-steps p{font-size:11px}
.bottom-strip{padding:13px 16px;background:linear-gradient(110deg,#102b31,#10242e)}
.bottom-icon{width:36px;height:36px}
.bottom-icon svg{width:20px;height:20px}
.bottom-strip>a{padding:7px 10px;border:1px solid #3c6b68;border-radius:8px;background:#16383b;transition:background .18s,transform .18s}
.bottom-strip>a:hover{transform:translateX(2px);background:#1d4849}

@media(max-width:900px){.hero{padding:28px}
.trust-row{max-width:620px}
.topbar{position:relative}
}
@media(max-width:620px){.trust-row{grid-template-columns:1fr}
.trust-row span{grid-template-columns:25px 1fr;padding:7px 9px}
.hero{padding:23px 17px}
.console-foot a{display:none}
.topbar nav a>svg{display:none}
.topbar nav a{padding:8px 10px}
.flow-steps article{min-height:78px}
.bottom-strip>a{width:100%;text-align:center}
}


/* Readability floor for compact home content */
.eyebrow,.trust-row small,.console-head span:first-child,.section-heading span,.console-foot,.console-foot a,.game-copy small,.flow-steps p,.bottom-strip p{font-size:10.5px!important}
.step-icon b{width:21px;height:21px;font-size:10.5px}


/* Homepage purchase cockpit: direct purchase is the primary hero task. */
.hero{grid-template-columns:minmax(250px,.62fr) minmax(500px,1fr);gap:24px;align-items:stretch;padding:27px 30px}

.hero-copy{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:8px 0}

.hero-copy h1{max-width:430px;margin:13px 0 11px;font-size:clamp(30px,3vw,43px)}

.hero-copy>p{max-width:410px;margin-bottom:15px;font-size:13px;line-height:1.5}

.hero-actions{min-height:29px}

.hero-price-link{display:inline-flex;align-items:center;gap:7px;color:#b9cbd8;font-size:11px;font-weight:800;transition:color .18s,transform .18s}

.hero-price-link svg{width:14px;height:14px;fill:none;stroke:var(--teal);stroke-width:1.8}

.hero-price-link span{color:var(--gold)}

.hero-price-link:hover{color:#fff;transform:translateX(2px)}

.trust-row{grid-template-columns:repeat(3,max-content);gap:5px;margin-top:17px}

.trust-row span{grid-template-columns:19px auto;grid-template-rows:1fr;padding:7px 8px}

.trust-row svg{grid-row:auto;width:17px;height:17px}

.trust-row b{font-size:10.5px}

.trust-row small{display:none}

.hero-console{align-self:stretch;padding:16px 17px;border-color:#527787;background:radial-gradient(circle at 100% 0,#52dccb12,transparent 34%),linear-gradient(155deg,#183142,#0a1726);box-shadow:0 21px 52px #0209169c,inset 0 1px #ffffff12}

.hero-grid{background-size:28px 28px;mask-image:linear-gradient(90deg,transparent 3%,#000 54%)}

.quick-buy .console-head{padding-bottom:9px}

.quick-buy .console-head h2{font-size:18px}

.quick-buy .quick-progress{margin-bottom:9px}

.quick-buy .quick-games{gap:8px}

.quick-buy .quick-games button{min-height:40px}

.quick-buy .quick-server-field>input{height:49px}

.quick-buy .quantity-control,.quick-buy .character-control{height:45px}

.quick-buy .quick-banks button{min-height:40px}

.quick-buy .quick-recap{padding:10px 11px}

.quick-buy .quick-recap strong{font-size:22px}

@media(max-width:980px){.hero{grid-template-columns:minmax(220px,.55fr) minmax(440px,1fr);padding:25px 24px}
.trust-row{grid-template-columns:1fr}
.trust-row span{width:max-content}
.hero-copy h1{font-size:34px}
}

@media(max-width:760px){.hero{display:flex;flex-direction:column;padding:19px 16px}
.hero-console{order:1}
.hero-copy{order:2;padding:5px 2px 1px}
.hero-copy h1{margin:9px 0 7px;font-size:28px}
.hero-copy>p{margin-bottom:10px}
.eyebrow{font-size:10.5px}
.trust-row{display:flex;margin-top:12px}
.hero-price-link{font-size:10.5px}
}

/* Purchase workspace: compact brand summary above the operational surface. */
.hero-purchase-workspace{display:grid;grid-template-columns:1fr;gap:13px;align-items:stretch;padding:20px 22px}
.hero-purchase-workspace .hero-summary{order:0;display:grid;grid-template-columns:minmax(245px,.85fr) minmax(280px,1fr) auto;align-items:center;gap:18px;padding:0 2px 13px;border-bottom:1px solid #355064}
.hero-brand-copy{min-width:0}
.hero-brand-copy h1{max-width:none;margin:7px 0 0;font-size:clamp(23px,2.45vw,33px);line-height:1.05;white-space:nowrap}
.hero-promise{display:flex;align-items:center;justify-content:space-between;gap:14px;min-width:0}
.hero-promise p{max-width:360px;margin:0;color:#b8cad7;font-size:12px;line-height:1.45}
.hero-promise .hero-price-link{flex:none}
.hero-purchase-workspace .trust-row{display:flex;justify-content:flex-end;gap:6px;margin:0}
.hero-purchase-workspace .trust-row span{grid-template-columns:19px auto;grid-template-rows:1fr;padding:7px 8px}
.hero-purchase-workspace .trust-row svg{grid-row:auto;width:17px;height:17px}
.hero-purchase-workspace .trust-row b{font-size:9.5px}
.hero-purchase-workspace .trust-row small{display:none}
.hero-purchase-workspace .hero-console{order:1;width:100%;max-width:none;padding:15px 16px}
.hero-purchase-workspace .console-head{padding-bottom:8px}
.hero-purchase-workspace.has-active-orders .quick-progress{display:none}
.hero-purchase-workspace.has-active-orders .console-head{border-bottom:1px solid #314c60;margin-bottom:9px}
@media(max-width:1020px){.hero-purchase-workspace .hero-summary{grid-template-columns:1fr auto}
.hero-promise{grid-column:1/-1;grid-row:2}
.hero-purchase-workspace .trust-row{grid-column:2;grid-row:1}
.hero-brand-copy h1{white-space:normal}}
@media(max-width:700px){.hero-purchase-workspace{padding:16px 14px}
.hero-purchase-workspace .hero-summary{grid-template-columns:1fr;gap:11px}
.hero-purchase-workspace .trust-row,.hero-promise{grid-column:1;grid-row:auto}
.hero-purchase-workspace .trust-row{justify-content:flex-start;overflow-x:auto;padding-bottom:2px}
.hero-promise{align-items:flex-start;flex-direction:column}
.hero-brand-copy h1{font-size:26px}
.hero-purchase-workspace .hero-console{padding:13px}
.hero-purchase-workspace .trust-row span{flex:none}}

/* Compact hierarchy: trust signals above, price shortcut below. */
.hero-purchase-workspace .hero-summary{grid-template-columns:minmax(330px,.9fr) minmax(470px,1.35fr);grid-template-rows:auto auto;column-gap:22px;row-gap:7px}
.hero-purchase-workspace .hero-brand-copy{grid-column:1;grid-row:1/3;align-self:center}
.hero-purchase-workspace .trust-row{grid-column:2;grid-row:1;justify-content:flex-end}
.hero-purchase-workspace .hero-promise{grid-column:2;grid-row:2;justify-content:flex-end}
.hero-purchase-workspace .hero-price-link{min-height:29px;padding:5px 9px;border:1px solid #3b5c6d;border-radius:8px;background:#102638}
.hero-purchase-workspace .hero-price-link:hover{border-color:#62cbbb;background:#17353f}
@media(max-width:900px){.hero-purchase-workspace .hero-summary{grid-template-columns:1fr;grid-template-rows:auto;gap:9px}
.hero-purchase-workspace .hero-brand-copy,.hero-purchase-workspace .trust-row,.hero-purchase-workspace .hero-promise{grid-column:1;grid-row:auto}
.hero-purchase-workspace .trust-row{justify-content:flex-start}
.hero-purchase-workspace .hero-promise{justify-content:flex-start}}
@media(max-width:560px){.hero-purchase-workspace .trust-row{display:grid;grid-template-columns:repeat(3,max-content);max-width:100%;overflow-x:auto}
.hero-purchase-workspace .hero-price-link{width:max-content}}

/* Achat Maroc V2 · unified navigation cockpit */
.topbar{position:sticky;top:0;z-index:50;border-bottom:1px solid #29465b;background:linear-gradient(90deg,#081321f5,#0b1928f2 55%,#0d2130f5);box-shadow:0 10px 34px #02081366;backdrop-filter:blur(18px) saturate(130%)}
.topbar:after{content:"";position:absolute;right:8%;bottom:-1px;width:220px;height:1px;background:linear-gradient(90deg,transparent,#54d7c5aa,transparent);pointer-events:none}
.topbar-inner{min-height:68px;gap:20px}
.brand{position:relative;gap:11px;padding:4px 0}
.brand:after{content:"";position:absolute;left:8px;top:12px;width:42px;height:34px;border-radius:50%;background:#dda74a24;filter:blur(12px);pointer-events:none}
.topbar .brand img{position:relative;z-index:1;width:124px;height:auto;padding:4px 7px;border:1px solid #ead8b740;border-radius:9px;background:linear-gradient(130deg,#f6eddd,#d9c6a6);box-shadow:0 7px 19px #030a1438;filter:none;transition:border-color .18s,box-shadow .18s,transform .18s}
.topbar .brand:hover img{border-color:#e8c27a80;box-shadow:0 9px 24px #030a1450,0 0 14px #d9a54a20;transform:translateY(-1px)}
.brand span{padding-left:10px;border-left-color:#36566a;color:#77d9cd;font-size:10.5px;letter-spacing:.13em}
.topbar nav{display:flex;align-items:center;gap:3px;padding:4px;border:1px solid #263f54;border-radius:13px;background:#0d1d2ccc;box-shadow:inset 0 1px #ffffff08}
.topbar nav a{--nav-accent:#74d8cc;position:relative;display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:7px 10px;border:1px solid transparent;border-radius:9px;color:#aebfce;font-size:11.5px;font-weight:800;white-space:nowrap;transition:color .18s,border-color .18s,background .18s,transform .18s}
.topbar nav a:before{content:"";width:15px;height:15px;flex:none;background:currentColor;mask:var(--nav-icon) center/contain no-repeat;-webkit-mask:var(--nav-icon) center/contain no-repeat;opacity:.72;transition:opacity .18s,transform .18s}
.topbar nav a:is([href="indexV2.php"],[href="/index.php"]){--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11 12 3l9 8v10h-6v-7H9v7H3Z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E")}
.topbar nav a:is([href="dofuskamasV2.php"],[href="/dofuskamas.php"]){--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='6' rx='7' ry='3' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M5 6v6c0 1.7 3.1 3 7 3s7-1.3 7-3V6M5 12v6c0 1.7 3.1 3 7 3s7-1.3 7-3v-6' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E")}
.topbar nav a:is([href="guideV2.php"],[href="/comment-acheter-kamas.php"]){--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h6a3 3 0 0 1 3 3v13a3 3 0 0 0-3-3H4ZM20 4h-4a3 3 0 0 0-3 3v13a3 3 0 0 1 3-3h4Z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E")}
.topbar nav a:is([href="avisV2.php"],[href="/avis.php"]){--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9Z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E")}
.topbar nav a:is([href="mesAchatsV2.php"],[href="/v2/mesAchatsV2.php"],[href="/mesAchats.php"]){--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h12v18l-3-2-3 2-3-2-3 2Z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M9 8h6M9 12h6' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E")}
.topbar nav a:is([href="profilV2.php"],[href="/v2/profilV2.php"],[href="/profil.php"]){--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E")}
.topbar nav a>svg{display:none!important}
.topbar nav a:hover{transform:translateY(-1px);border-color:#34566c;background:#142c3e;color:#edf7fa}
.topbar nav a:hover:before{opacity:1;transform:translateY(-1px)}
.topbar nav a.active{border-color:#39736f;background:linear-gradient(135deg,#193e46,#143143);box-shadow:inset 0 0 18px #50cdbb12;color:#f3fbfc}
.topbar nav a.active:before{color:#67ddcf;opacity:1}
.topbar nav .nav-account{margin-left:5px;border-color:#37676d;background:#15343e;color:#d9f7f2}
.topbar nav .nav-account:before{color:#63d9cb;opacity:1}
.topbar nav .nav-profile{--nav-accent:#f2c16f;border-color:#5d503c;background:#29251f;color:#f2d8a9}
.topbar nav .nav-profile:before{color:#f0bf6a;opacity:1}
.topbar nav .nav-profile.active{border-color:#997440;background:linear-gradient(135deg,#4a3922,#30291f);color:#ffdfa4}
@media(max-width:980px){.topbar{position:relative}
.topbar-inner{align-items:flex-start;flex-direction:column;gap:3px;padding:8px 0}
.brand img{width:104px;height:40px}
.topbar nav{width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
.topbar nav::-webkit-scrollbar{display:none}
.topbar nav .nav-account{margin-left:0}}
@media(max-width:620px){.topbar-inner{width:calc(100% - 24px)}
.brand{padding-left:3px}
.brand span{font-size:9.5px}
.topbar nav{border-radius:11px}
.topbar nav a{min-height:34px;padding:7px 9px;font-size:10.5px}
.topbar nav a:before{display:block;width:14px;height:14px}}

/* Navigation deck: fluid main links + dedicated client controls */
.topbar nav{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;flex-wrap:nowrap}
.topbar nav a{min-height:38px;padding:8px 10px;border-color:transparent;background:transparent}
.topbar nav a:hover{border-color:transparent;background:#142b3c}
.topbar nav a.active{border-color:#38625f;background:linear-gradient(135deg,#183c43,#132e3f);box-shadow:inset 0 0 20px #52d3bf12,0 5px 18px #02081138}
.topbar nav .nav-account{margin-left:9px;padding:8px 12px;border-color:#326c71;background:linear-gradient(135deg,#173c43,#102d38);box-shadow:inset 0 1px #ffffff0b;color:#ddfaf5}
.topbar nav .nav-account:hover,.topbar nav .nav-account.active{border-color:#52b7ac;background:linear-gradient(135deg,#205058,#153945)}
.topbar nav .nav-profile{width:38px;padding:0;border-color:#6b5739;border-radius:11px;background:#2d271e;color:#f3c773;font-size:0;visibility:visible;opacity:1}
.topbar nav .nav-profile:before{width:16px;height:16px;margin:auto;color:#f0bf69}
.topbar nav .nav-profile:hover,.topbar nav .nav-profile.active{border-color:#a27c40;background:#493922}
.nav-toggle{display:none;width:40px;height:38px;padding:9px;border:1px solid #34566a;border-radius:10px;background:#13293a;color:#dcebf2;cursor:pointer}
.nav-toggle span{display:block;width:18px;height:2px;margin:3px auto;border-radius:2px;background:currentColor;transition:.18s}
.nav-open .nav-toggle span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav-open .nav-toggle span:nth-child(2){opacity:0}
.nav-open .nav-toggle span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.nav-client{position:relative;margin-left:2px}
.nav-client-trigger{display:flex;align-items:center;gap:9px;height:46px;padding:5px 10px 5px 5px;border:1px solid #725a38;border-radius:14px;background:radial-gradient(circle at 12% 18%,#c4934530,transparent 38%),linear-gradient(145deg,#30291f,#171d22);box-shadow:inset 0 1px #ffffff12,0 8px 22px #0207113d;color:#f5d497;cursor:pointer;font:800 10.5px system-ui,sans-serif;transition:border-color .18s,background .18s,transform .18s,box-shadow .18s}
.nav-client-trigger:hover,.nav-client-trigger.active,.nav-client.open .nav-client-trigger{border-color:#b88a45;background:radial-gradient(circle at 12% 18%,#e0aa5350,transparent 42%),linear-gradient(145deg,#3b3021,#1d252b);box-shadow:inset 0 1px #ffffff16,0 10px 28px #02071166;transform:translateY(-1px)}
.nav-avatar{display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;border:1px solid #c59650;border-radius:11px;background:linear-gradient(145deg,#805e31,#49351f);box-shadow:inset 0 0 13px #ffd98b24,0 5px 13px #03080f4a;color:#ffe4ad;font-size:12px;font-weight:950}
.nav-client-copy{display:grid;gap:3px;min-width:105px;text-align:left;line-height:1}
.nav-client-copy strong{color:#ffe0a4;font-size:11.5px;font-weight:900;letter-spacing:.01em}
.nav-client-copy small{display:flex;align-items:center;gap:5px;color:#91afa8;font-size:10.5px;font-weight:750;white-space:nowrap}
.nav-client-copy small i,.nav-panel-head small i{width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:#63d9b3;box-shadow:0 0 8px #63d9b3}
.nav-chevron{width:16px;height:16px;fill:none;stroke:#d0aa69;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}
.nav-client.open .nav-chevron{transform:rotate(180deg)}
.topbar nav .nav-client-panel{position:absolute;right:0;top:calc(100% + 10px);z-index:90;display:none;width:258px;padding:8px;border:1px solid #35576a;border-radius:16px;background:radial-gradient(circle at 90% 0,#24546b3d,transparent 42%),linear-gradient(150deg,#142b3c,#0b1b28);box-shadow:0 22px 55px #01060de0,inset 0 1px #ffffff0a}
.topbar nav .nav-client.open .nav-client-panel{display:grid}
.topbar nav .nav-client:hover .nav-client-panel{display:grid}
.nav-client:hover .nav-chevron{transform:rotate(180deg)}
.topbar .nav-client-panel a{min-height:0;text-decoration:none}
.nav-panel-head{display:flex;align-items:center;gap:10px;margin-bottom:7px;padding:8px 8px 12px;border-bottom:1px solid #29485a}
.nav-panel-avatar{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border:1px solid #a87b3e;border-radius:11px;background:linear-gradient(145deg,#72532d,#3d3022);color:#ffe1a7;font-size:12px;font-weight:950}
.nav-panel-head>div{display:grid;gap:5px;min-width:0}
.nav-panel-head strong{color:#edf7fa;font-size:12px;font-weight:900}
.nav-panel-head small{display:flex;align-items:center;gap:6px;color:#82c8b4;font-size:10.5px;font-weight:750}
.topbar .nav-client-panel .nav-panel-action{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:9px;padding:10px;border:1px solid #2e5367;border-radius:11px;background:linear-gradient(135deg,#17374b,#102a3a);transition:border-color .18s,background .18s,transform .18s}
.topbar .nav-client-panel .nav-panel-action:hover{border-color:#4e8ca6;background:linear-gradient(135deg,#1b4258,#123246);transform:translateY(-1px)}
.nav-panel-action>svg{width:18px;height:18px;justify-self:center;fill:none;stroke:#70cfe0;stroke-width:1.8;stroke-linecap:round}
.nav-panel-action>span{display:grid;gap:3px;min-width:0}
.nav-panel-action>b{color:#72d1df;font-size:16px;transition:transform .18s}
.nav-panel-action:hover>b{transform:translateX(2px)}
.topbar .nav-client-panel a:before{display:none}
.topbar .nav-client-panel .nav-panel-action strong{color:#edf7fa;font-size:11.5px;font-weight:850}
.topbar .nav-client-panel .nav-panel-action small{color:#91aab7;font-size:10.5px;font-weight:650}
.topbar .nav-client-panel .nav-logout{display:flex;align-items:center;gap:9px;margin-top:7px;padding:9px 10px;border:1px solid transparent;border-radius:10px;color:#e7a1a5;transition:border-color .18s,background .18s,color .18s}
.topbar .nav-client-panel .nav-logout:hover{border-color:#713d47;background:#431f293d;color:#ffc1c4}
.nav-logout svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.topbar .nav-client-panel .nav-logout strong{font-size:10.5px;font-weight:800}
.topbar nav .nav-login{--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 4H5v16h5v-2H7V6h3V4Zm4.6 3.6-1.4 1.4 2 2H9v2h6.2l-2 2 1.4 1.4 4.4-4.4-4.4-4.4Z' fill='black'/%3E%3C/svg%3E");width:auto;min-height:42px;gap:8px;padding:8px 13px;border:1px solid #80633a;border-radius:12px;background:radial-gradient(circle at 15% 20%,#cb994335,transparent 42%),linear-gradient(145deg,#332a1d,#1c2225);box-shadow:inset 0 1px #ffffff10,0 7px 20px #02071138;color:#f7d89e;font-size:11.5px;font-weight:900;letter-spacing:.01em;visibility:visible;opacity:1}
.topbar nav .nav-login:before{display:block!important;width:18px;height:18px;margin:0;color:#72ddca;opacity:1;filter:drop-shadow(0 0 5px #54d8bf45)}
.topbar nav .nav-login:hover,.topbar nav .nav-login.active{border-color:#b68a46;background:radial-gradient(circle at 15% 20%,#e2af5550,transparent 45%),linear-gradient(145deg,#42331f,#202a2d);box-shadow:inset 0 1px #ffffff14,0 10px 26px #0207115c;color:#ffe5b3}
@media(max-width:980px){.topbar{position:sticky}
.topbar-inner{position:relative;min-height:62px;padding:8px 0;align-items:center;flex-direction:row}
.topbar .brand img{width:112px}
.brand span{display:none}
.nav-toggle{display:block;margin-left:auto}
.topbar nav{position:absolute;top:calc(100% + 7px);right:0;left:0;display:none;width:100%;padding:8px;overflow:visible;border:1px solid #304f65;border-radius:14px;background:#0d1e2df7;box-shadow:0 20px 44px #020711c7}
.topbar.nav-open nav{display:grid;grid-template-columns:1fr 1fr}
.topbar nav a{justify-content:flex-start;margin:0!important;padding:9px 11px}
.topbar nav .nav-account{grid-column:1}
.topbar nav .nav-profile{grid-column:2;width:auto;font-size:10.5px}
.topbar nav .nav-profile:before{margin:0}
.nav-client{grid-column:2;margin:0}
.nav-client-trigger{width:100%;justify-content:center}
.topbar nav .nav-client-panel{top:calc(100% + 7px);right:0}
.topbar:after{display:none}}
@media(max-width:480px){.topbar.nav-open nav{grid-template-columns:1fr}
.topbar nav .nav-account,.topbar nav .nav-profile,.nav-client{grid-column:1}
.topbar nav .nav-client-panel{position:static;width:100%;margin-top:6px}
.nav-client-label{display:inline}
.topbar nav a{font-size:11px}}

/* Shared TryAndJudge logo format: identical visual box to the seller portal. */
.topbar .brand img{
    display:block;
    width:142px;
    height:50px;
    max-width:none;
    padding:4px 10px;
    object-fit:contain;
    object-position:center;
    filter:none;
}
@media(max-width:980px){.topbar .brand img{width:134px;height:44px;padding:3px 9px}}
@media(max-width:480px){.topbar .brand img{width:126px;height:42px;padding:3px 7px}}

/* Compact buyer navigation: seller-level density with the Achat Maroc identity. */
@media(min-width:981px){
    .topbar-inner{min-height:68px;gap:18px}
    .topbar .brand{gap:10px;padding:4px 0}
    .topbar .brand:after{left:8px;top:12px;width:42px;height:34px;filter:blur(12px)}
    .topbar .brand img{width:142px;height:50px;padding:4px 10px;border-radius:9px}
    .topbar .brand span{padding-left:10px;font-size:10px;letter-spacing:.13em}
    .topbar nav{gap:3px}
    .topbar nav a{min-height:35px;gap:7px;padding:7px 9px;border-radius:9px;font-size:11px}
    .topbar nav a:before{width:15px;height:15px}
    .topbar nav .nav-account{margin-left:6px;padding:7px 10px}
    .topbar nav .nav-profile{width:36px;min-height:36px;padding:0;border-radius:10px}
    .topbar nav .nav-profile:before{width:15px;height:15px}
    .nav-client{margin-left:1px}
    .nav-client-trigger{height:37px;gap:7px;padding:3px 8px 3px 3px;border-radius:10px;font-size:10px}
    .nav-avatar{width:29px;height:29px;flex-basis:29px;border-radius:8px;font-size:10.5px}
    .nav-client-copy{min-width:96px;gap:2px}
    .nav-client-copy strong{font-size:11px}
    .nav-client-copy small{font-size:9.5px}
    .nav-chevron{width:14px;height:14px}
}

/* Keep the signed-out action readable: it shares nav-profile styling but needs its label width. */
@media(min-width:981px){
    .topbar nav .nav-login{
        width:auto;
        min-width:108px;
        min-height:36px;
        justify-content:center;
        gap:8px;
        padding:7px 12px;
        font-size:11px;
    }
    .topbar nav .nav-login:before{margin:0}
}

/* One métier color per navigation icon. */
.topbar nav a:is([href="indexV2.php"],[href="/index.php"]):before{color:#62d8c9;opacity:1}
.topbar nav a:is([href="dofuskamasV2.php"],[href="/dofuskamas.php"]):before{color:#efb95d;opacity:1}
.topbar nav a:is([href="guideV2.php"],[href="/comment-acheter-kamas.php"]):before{color:#83aef1;opacity:1}
.topbar nav a:is([href="avisV2.php"],[href="/avis.php"]):before{color:#e6a4c8;opacity:1}
.topbar nav a:is([href="mesAchatsV2.php"],[href="/v2/mesAchatsV2.php"],[href="/mesAchats.php"]):before{color:#69d6e2;opacity:1}
.topbar nav a:is([href="profilV2.php"],[href="/v2/profilV2.php"],[href="/profil.php"]):before{color:#f0bd67;opacity:1}