/* =====================================================================
   PIASSTY.MA — Feuille de style
   ===================================================================== */
:root{
	--navy:#0b1f3a; --navy-2:#132d52; --accent:#ff6a00; --accent-2:#e85d00;
	--ink:#1b2430; --muted:#6b7686; --line:#e6e9ef; --bg:#f5f7fa; --radius:14px;
}
body{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--navy-2)}
.tiny{font-size:.75rem}
.text-accent{color:var(--accent)!important}
.bg-accent{background:var(--accent)!important;color:#fff}
.btn-accent{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn-accent:hover,.btn-accent:focus{background:var(--accent-2);border-color:var(--accent-2);color:#fff}
.btn-navy{background:var(--navy);color:#fff;font-weight:600}.btn-navy:hover{background:var(--navy-2);color:#fff}
.badge-soft{background:#eaf6ee;color:#1d7a43;border-radius:20px;padding:2px 8px;font-weight:600}
.card{border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 1px 2px rgba(16,24,40,.04)}
.card-header{background:#fff;border-bottom:1px solid var(--line);font-weight:700;border-radius:var(--radius) var(--radius) 0 0!important}
.form-label{font-weight:600;font-size:.85rem;margin-bottom:.25rem}
.form-control,.form-select{border-radius:10px;border-color:#d7dce4}
.form-control:focus,.form-select:focus{border-color:var(--accent);box-shadow:0 0 0 .2rem rgba(255,106,0,.15)}
.error-message{color:#c0392b;font-size:.8rem;margin-top:3px}
.form-error{border-color:#c0392b!important}

/* Brand */
.brand{font-weight:800;font-size:1.6rem;letter-spacing:-.5px;text-decoration:none;line-height:1}
.brand-p{color:#fff}.brand-ma{color:var(--accent)}
.footer .brand-p,.dash-side .brand-p{color:#fff}

/* Top / nav */
.topbar{background:#06142a;color:#b9c6da;font-size:.78rem;padding:6px 0}
.topbar a{color:#d8e2f1;text-decoration:none}
.navbar-main{background:var(--navy);padding:.7rem 0;box-shadow:0 2px 10px rgba(0,0,0,.15)}
.search-main{flex:1;max-width:620px;margin:0 1.5rem}
.search-main .form-control{border-radius:10px 0 0 10px;border:0;padding:.6rem 1rem}
.search-main .btn{border-radius:0 10px 10px 0;padding:0 1.1rem}
.nav-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;color:#fff;font-size:1.25rem;text-decoration:none}
.nav-icon:hover{background:rgba(255,255,255,.1);color:#fff}
.nav-icon.dark{color:var(--ink)}.nav-icon.dark:hover{background:#eef1f5;color:var(--ink)}
.nav-icon .dot{position:absolute;top:2px;right:0;background:#e53935;color:#fff;font-size:.62rem;font-weight:700;min-width:17px;height:17px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.notif-menu{width:330px;max-height:420px;overflow:auto}
.notif-menu .dropdown-item{white-space:normal}
.subnav{background:#fff;border-bottom:1px solid var(--line)}
.subnav .nav-link{color:var(--ink);font-size:.86rem;font-weight:500;padding:.65rem .8rem}
.subnav .nav-link:hover{color:var(--accent)}

/* Hero */
.hero{background:linear-gradient(120deg,var(--navy) 0%,#183b6b 60%,#22508f 100%);color:#fff;padding:56px 0 90px;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;right:-120px;top:-120px;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(255,106,0,.35),transparent 65%)}
.hero h1{font-weight:800;font-size:2.6rem;letter-spacing:-1px}
.hero .lead{color:#c8d5ea}
.hero-search{margin-top:-60px;position:relative;z-index:2}
.vehicle-search{background:#fff;border-radius:18px;padding:22px;box-shadow:0 12px 40px rgba(11,31,58,.18)}
.vehicle-search.compact{padding:16px;box-shadow:none;border:1px solid var(--line)}
.vehicle-search .form-select{padding:.65rem .9rem}
.vehicle-search .btn{padding:.68rem}
.trust{display:flex;gap:12px;align-items:flex-start}
.trust i{font-size:1.6rem;color:var(--accent)}

/* Sections */
.section-title{font-weight:800;letter-spacing:-.5px}
.cat-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 10px;text-decoration:none;color:var(--ink);text-align:center;transition:.2s;height:100%}
.cat-tile i{font-size:1.9rem;color:var(--navy-2)}
.cat-tile:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.06);color:var(--accent)}
.cat-tile:hover i{color:var(--accent)}
.brand-chip{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 8px;font-weight:700;color:var(--navy);text-decoration:none;height:100%}
.brand-chip:hover{border-color:var(--accent);color:var(--accent)}
.step-num{width:44px;height:44px;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.cta-pro{background:linear-gradient(110deg,#0b1f3a,#1d3f72);color:#fff;border-radius:22px;padding:40px}

/* Part card */
.part-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;position:relative;display:flex;flex-direction:column;transition:.2s}
.part-card:hover{box-shadow:0 10px 26px rgba(16,24,40,.09);transform:translateY(-2px)}
.part-img{display:block;aspect-ratio:4/3;background:#f0f2f5;position:relative;overflow:hidden}
.part-img img{width:100%;height:100%;object-fit:cover}
.part-title{font-weight:600;color:var(--ink);text-decoration:none;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.part-title:hover{color:var(--accent)}
.part-price{font-weight:800;font-size:1.15rem;color:var(--navy)}
.ribbon{position:absolute;top:10px;left:10px;background:#e53935;color:#fff;font-weight:700;font-size:.75rem;padding:3px 8px;border-radius:6px}
.cond{position:absolute;bottom:8px;left:8px;background:rgba(11,31,58,.85);color:#fff;font-size:.7rem;font-weight:600;padding:3px 8px;border-radius:6px}
.cond-reconditionne{background:rgba(25,135,84,.92)}.cond-neuf{background:rgba(13,110,253,.92)}.cond-a_reviser{background:rgba(220,120,0,.92)}
.fav-btn{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;color:#555;text-decoration:none;box-shadow:0 2px 6px rgba(0,0,0,.15);z-index:2}
.fav-btn.active,.fav-btn:hover{color:#e53935}

/* Fiche pièce */
.gallery-main{aspect-ratio:4/3;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;align-items:center;justify-content:center}
.gallery-main img{max-width:100%;max-height:100%;object-fit:contain}
.gallery-thumbs img{width:72px;height:56px;object-fit:cover;border-radius:8px;border:2px solid transparent;cursor:pointer}
.gallery-thumbs img.active,.gallery-thumbs img:hover{border-color:var(--accent)}
.price-xl{font-size:2rem;font-weight:800;color:var(--navy)}
.spec-table td{padding:.45rem .2rem;border-bottom:1px dashed var(--line)}
.spec-table td:first-child{color:var(--muted);width:42%}
.stars{color:#f5a623}
.shop-box{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:16px}

/* Filtres */
.filters .form-label{font-size:.8rem}
.filter-chip{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:3px 10px;font-size:.78rem;text-decoration:none;color:var(--ink)}
.filter-chip:hover{border-color:#e53935;color:#e53935}

/* Checkout */
.choice{display:block;border:2px solid var(--line);border-radius:12px;padding:14px;cursor:pointer;background:#fff;transition:.15s;height:100%}
.choice:hover{border-color:#ffb27a}
.choice input{margin-right:8px}
.choice.selected,.choice:has(input:checked){border-color:var(--accent);background:#fff8f2}
.summary-box{position:sticky;top:90px}

/* Timeline */
.timeline{list-style:none;padding-left:0;position:relative}
.timeline li{position:relative;padding:0 0 14px 26px}
.timeline li:before{content:"";position:absolute;left:6px;top:4px;bottom:-4px;width:2px;background:var(--line)}
.timeline li:last-child:before{display:none}
.timeline li:after{content:"";position:absolute;left:0;top:3px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--accent)}
.steps-bar{display:flex;justify-content:space-between;position:relative}
.steps-bar .st{flex:1;text-align:center;font-size:.75rem;color:var(--muted);position:relative}
.steps-bar .st .c{width:30px;height:30px;border-radius:50%;background:#e9edf3;margin:0 auto 6px;display:flex;align-items:center;justify-content:center;font-weight:700;position:relative;z-index:1}
.steps-bar .st.done .c{background:#198754;color:#fff}.steps-bar .st.done{color:var(--ink)}
.steps-bar .st.cur .c{background:var(--accent);color:#fff}
.steps-bar .st:not(:last-child):after{content:"";position:absolute;top:15px;left:50%;width:100%;height:2px;background:#e9edf3}
.steps-bar .st.done:not(:last-child):after{background:#198754}

/* Messages */
.chat{height:460px;overflow-y:auto;background:#f7f9fc;border-radius:12px;padding:16px}
.bubble{max-width:75%;width:fit-content;padding:9px 13px;border-radius:14px;margin-bottom:8px;font-size:.9rem}
.bubble.me{background:var(--navy-2);color:#fff;margin-left:auto;border-bottom-right-radius:4px}
.bubble.them{background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px}
.conv-item{display:flex;gap:12px;padding:12px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.conv-item:hover,.conv-item.active{background:#fff8f2}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--navy-2);color:#fff;font-weight:700;font-size:.8rem;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}

/* Footer */
.footer{background:var(--navy);color:#cbd6e6;padding:48px 0 22px;margin-top:60px}
.footer h6{color:#fff;font-weight:700;margin-bottom:12px}
.footer a{color:#cbd6e6;text-decoration:none;line-height:2}
.footer a:hover{color:var(--accent)}
.social{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);display:inline-flex!important;align-items:center;justify-content:center;line-height:1!important}
.wa-float{position:fixed;right:20px;bottom:20px;width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff;font-size:1.8rem;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.25);z-index:1000;text-decoration:none}
.wa-float:hover{color:#fff;transform:scale(1.05)}

/* Pagination (liens générés par CakePHP) */
.pagination li>a,.pagination li>span{display:block;padding:.3rem .65rem;border:1px solid var(--line);margin-left:-1px;color:var(--navy-2);text-decoration:none;background:#fff}
.pagination li.active>a{background:var(--navy);color:#fff;border-color:var(--navy)}
.pagination li.disabled>a{color:#aaa}

/* ===================== DASHBOARD ===================== */
body.dash{background:#f3f5f9}
.dash-wrap{display:flex;min-height:100vh}
.dash-side{width:250px;background:var(--navy);color:#cbd6e6;flex-shrink:0;position:sticky;top:0;height:100vh;overflow-y:auto}
.side-nav{padding:0 10px 30px}
.side-sep{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;opacity:.45;font-weight:700;padding:14px 10px 6px}
.side-link{display:flex;align-items:center;gap:10px;color:#cbd6e6;text-decoration:none;padding:9px 12px;border-radius:9px;font-size:.88rem;font-weight:500}
.side-link i{font-size:1.05rem;width:20px}
.side-link:hover{background:rgba(255,255,255,.07);color:#fff}
.side-link.active{background:var(--accent);color:#fff}
.dash-main{flex:1;min-width:0;display:flex;flex-direction:column}
.dash-top{background:#fff;border-bottom:1px solid var(--line);padding:12px 24px;display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:50}
.dash-content{padding:24px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;height:100%}
.stat .v{font-size:1.6rem;font-weight:800;color:var(--navy)}
.stat .l{font-size:.8rem;color:var(--muted);font-weight:600}
.stat .ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.3rem}
.table-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.table-card .table{margin:0}
.table thead th{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:#f8f9fb;border-bottom:1px solid var(--line);white-space:nowrap}
.table td{vertical-align:middle;font-size:.88rem}
.thumb-sm{width:52px;height:40px;object-fit:cover;border-radius:6px;background:#eee}
.bar-chart{display:flex;align-items:flex-end;gap:6px;height:150px}
.bar-chart .b{flex:1;background:linear-gradient(180deg,var(--accent),#ffa25e);border-radius:6px 6px 0 0;position:relative;min-height:2px}
.bar-chart .b span{position:absolute;top:-18px;left:0;right:0;text-align:center;font-size:.65rem;color:var(--muted)}
.bar-labels{display:flex;gap:6px}.bar-labels div{flex:1;text-align:center;font-size:.65rem;color:var(--muted)}
.compat-row{background:#f8f9fb;border-radius:10px;padding:10px;margin-bottom:8px}
.img-edit{position:relative;display:inline-block}
.img-edit img{width:110px;height:84px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.img-edit a{position:absolute;top:-8px;right:-8px;background:#e53935;color:#fff;border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:.75rem;text-decoration:none}

@media (max-width:991px){
	.dash-side{position:fixed;left:-260px;z-index:1050;transition:.25s}
	.dash-side.open{left:0;box-shadow:0 0 40px rgba(0,0,0,.4)}
	.hero h1{font-size:1.9rem}
	.search-main{margin:0}
	.dash-content{padding:14px}
}

/* Ajustements */
.subnav .nav{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.subnav .nav::-webkit-scrollbar{display:none}
.part-card .shop-line{display:flex;justify-content:space-between;gap:6px}
.part-card .shop-line span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.part-img img[src$="placeholder.svg"]{object-fit:contain;padding:10%}
.stat .v{font-size:1.35rem;white-space:nowrap}
.dash-side{min-height:100vh}

/* ===================== CHAT ===================== */
.chat-card{height:calc(100vh - 230px);min-height:520px}
.chat-card>.row{height:100%}
.conv-list{height:100%;overflow-y:auto}
.chat-pane{height:100%;min-height:0}
.chat{height:auto;flex:1 1 auto;min-height:0;border-radius:0}
.bubble-text{white-space:pre-wrap;word-break:break-word}
.bubble-meta{font-size:.68rem;opacity:.6;text-align:right;margin-top:3px}
.bubble.me .bubble-meta .seen{color:#7fd3ff;opacity:1}
.bubble.me a{color:#fff}
.bubble-part{opacity:.85}
.bubble-img{max-width:220px;max-height:220px;border-radius:10px;display:block;margin-bottom:4px}
.bubble.pending{opacity:.55}
.bubble.failed{background:#fdecea!important;color:#b42318!important;border:1px solid #f5c2c0}
.chat-form textarea{resize:none;max-height:140px}
.online-dot{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:#22c55e;border:2px solid #fff}
.chat-day{text-align:center;font-size:.7rem;color:var(--muted);margin:8px 0}
@media (max-width:767px){
	.chat-card{height:calc(100vh - 170px)}
	.chat-card.has-conv .conv-list{display:none}
	.chat-card:not(.has-conv) .chat-pane{display:none!important}
	.bubble{max-width:88%}
}
body:has(#chatForm) .wa-float{display:none}

/* ===================== COINS ===================== */
.coin-hero{background:linear-gradient(120deg,#0b1f3a,#1d3f72);color:#fff;border-radius:var(--radius);padding:20px}
.coin-balance{font-size:2.1rem;font-weight:800;color:#ffc94d;line-height:1.2;margin:4px 0}
.coin-balance small{font-size:1rem;color:#fff;opacity:.8}
.coin-pack{padding:18px 8px}
.coin-pack .text-navy{color:var(--navy)}
.coin-pill{display:inline-flex;align-items:center;gap:5px;background:#fff6e0;color:#8a5a00;border:1px solid #ffd27a;border-radius:20px;padding:4px 12px;font-weight:700;font-size:.85rem;text-decoration:none}
.coin-pill:hover{background:#ffeab3;color:#8a5a00}
.coin-pill.low{background:#fdecea;color:#b42318;border-color:#f5c2c0}

/* ===================== ARABE (RTL) ===================== */
html[lang="ar"] body, html[lang="ar"] .btn, html[lang="ar"] .form-control, html[lang="ar"] .form-select, html[lang="ar"] .tooltip, html[lang="ar"] .dropdown-menu {font-family:'Cairo','Inter',system-ui,sans-serif}
html[lang="ar"] .brand, html[lang="ar"] .barcode, html[lang="ar"] .part-price, html[lang="ar"] .price-xl {font-family:'Inter',system-ui,sans-serif}
html[lang="ar"] .hero h1{letter-spacing:0;line-height:1.35}
html[lang="ar"] .section-title, html[lang="ar"] .brand{letter-spacing:0}
html[lang="ar"] .topbar, html[lang="ar"] .tiny{font-size:.8rem}
[dir="rtl"] .ribbon{left:auto;right:10px}
[dir="rtl"] .fav-btn{right:auto;left:10px}
[dir="rtl"] .cond{left:auto;right:8px}
[dir="rtl"] .hero:after{right:auto;left:-120px}
[dir="rtl"] .search-main .form-control{border-radius:0 10px 10px 0}
[dir="rtl"] .search-main .btn{border-radius:10px 0 0 10px}
[dir="rtl"] .nav-icon .dot{right:auto;left:0}
[dir="rtl"] .timeline li{padding:0 26px 14px 0}
[dir="rtl"] .timeline li:before{left:auto;right:6px}
[dir="rtl"] .timeline li:after{left:auto;right:0}
[dir="rtl"] .steps-bar .st:not(:last-child):after{left:auto;right:50%}
[dir="rtl"] .bubble.me{margin-left:0;margin-right:auto;border-bottom-right-radius:14px;border-bottom-left-radius:4px}
[dir="rtl"] .bubble.them{border-bottom-left-radius:14px;border-bottom-right-radius:4px}
[dir="rtl"] .bubble-meta{text-align:left}
[dir="rtl"] .online-dot{right:auto;left:-1px}
[dir="rtl"] .wa-float{right:auto;left:20px}
[dir="rtl"] .img-edit a{right:auto;left:-8px}
[dir="rtl"] .bi-arrow-right, [dir="rtl"] .bi-arrow-left, [dir="rtl"] .bi-box-arrow-right, [dir="rtl"] .bi-box-arrow-up-right, [dir="rtl"] .bi-send-fill, [dir="rtl"] .bi-send{display:inline-block;transform:scaleX(-1)}
[dir="rtl"] .pagination li>a{margin-left:0;margin-right:-1px}
[dir="rtl"] .spec-table td{text-align:right}
[dir="rtl"] .text-end{text-align:left!important}
[dir="rtl"] .text-start{text-align:right!important}
[dir="rtl"] .dropdown-menu-end{--bs-position:start}
.lang-switch{font-weight:700;color:#ffd27a!important}
.lang-mini{font-weight:800;font-size:1rem}
[dir="rtl"] input[type="email"], [dir="rtl"] input[type="tel"], [dir="rtl"] .ltr{direction:ltr;text-align:right}
@media (max-width:991px){
	[dir="rtl"] .dash-side{left:auto;right:-260px}
	[dir="rtl"] .dash-side.open{right:0}
}
/* Contenu saisi par les utilisateurs (souvent en français) : sens déterminé par le texte */
[dir="rtl"] .bubble-text, [dir="rtl"] .part-title, [dir="rtl"] .conv-item .text-truncate, [dir="rtl"] .bubble-part, [dir="rtl"] .user-text, [dir="rtl"] h1.h4, [dir="rtl"] .shop-line span{unicode-bidi:plaintext}
[dir="rtl"] .footer .bi-telephone + span, [dir="rtl"] .phone{direction:ltr;unicode-bidi:isolate;display:inline-block}
[dir="rtl"] .spec-table td, [dir="rtl"] .table td{unicode-bidi:plaintext;text-align:right}
/* Coordonnées bancaires de recharge */
.bank-box{background:#fff8f2;border:1px dashed #ffb27a;border-radius:12px;padding:14px}
.bank-table td{padding:6px 4px;border-bottom:1px solid #fde3cf}
.bank-table tr:last-child td{border-bottom:0}
.bank-value{font-family:'Inter',monospace;letter-spacing:.3px;word-break:break-all}
.coin-alert{border-width:2px}

/* ---------- Emplacements publicitaires (marges gauche / droite de l'accueil) ---------- */
.ad-shell{position:relative}
.ad-rail{display:none}
@media (min-width:1700px){
	.ad-rail{display:block;position:absolute;top:24px;bottom:24px;width:160px;z-index:5}
	.ad-rail-left{left:calc(50% - 660px - 190px)}
	.ad-rail-right{right:calc(50% - 660px - 190px)}
	.ad-rail-inner{position:sticky;top:96px;width:100%}
	.ad-rail-unit,.ad-rail-placeholder{width:160px;height:600px}
	.ad-rail-placeholder .ad-size::after{content:"160 × 600"}
}
@media (min-width:2000px){
	.ad-rail{width:300px}
	.ad-rail-left{left:calc(50% - 660px - 330px)}
	.ad-rail-right{right:calc(50% - 660px - 330px)}
	.ad-rail-unit,.ad-rail-placeholder{width:300px;height:600px}
	.ad-rail-placeholder .ad-size::after{content:"300 × 600"}
}
.ad-rail-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:#98a2b3;text-align:center;margin-bottom:4px}
.ad-rail-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:2px dashed #d0d5dd;border-radius:12px;background:#fafbfc;color:#98a2b3;font-size:.85rem;text-align:center}
.ad-rail-placeholder i{font-size:2rem}

/* ---------- SEO local ---------- */
.footer-cities a{color:inherit;opacity:.75;text-decoration:none}
.footer-cities a:hover{opacity:1;color:var(--accent)}
.city-chip{font-weight:600}
.seo-intro{max-width:900px}
.local-links .filter-chip{text-decoration:none}