/* ============================================================
   ece — COMPOSANTS
   ============================================================ */

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);padding:14px 24px;border-radius:var(--r-md);font-weight:600;font-size:14px;letter-spacing:.01em;transition:background .18s ease,transform .12s ease,box-shadow .18s ease;white-space:nowrap}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:var(--primary);color:var(--on-primary);box-shadow:var(--el-1)}
.btn-primary:hover{background:var(--primary-hover)}
.btn-secondary{background:var(--secondary);color:var(--on-secondary)}
.btn-secondary:hover{background:var(--secondary-hover)}
.btn-ghost{background:transparent;color:var(--primary);padding:12px 20px}
.btn-ghost:hover{background:var(--primary-container)}
.btn-block{width:100%}
.btn-lg{padding:16px 28px;font-size:16px}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--surface) 85%,transparent);backdrop-filter:blur(12px) saturate(140%);border-bottom:1px solid var(--outline-variant);transition:box-shadow .25s ease,background .25s ease}
.site-header.scrolled{box-shadow:var(--el-sticky)}
.header-bar{display:flex;align-items:center;gap:var(--s-5);padding-block:14px}
.brand{font-family:var(--font-display);font-weight:700;font-size:24px;letter-spacing:-.02em;display:flex;align-items:center;gap:var(--s-2)}
.brand .dot{width:28px;height:28px;border-radius:var(--r-md);background:linear-gradient(135deg,var(--primary),#ff8a3d);display:grid;place-items:center;color:#fff;font-size:16px}
.search{flex:1;position:relative;max-width:560px}
.search input{width:100%;padding:12px 14px 12px 42px;border-radius:var(--r-md);border:1px solid var(--outline);background:var(--surface-low);color:var(--on-surface);font-size:14px;transition:border-color .18s,box-shadow .18s}
.search input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 20%,transparent)}
.search .ico{position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);color:var(--on-surface-variant)}
[dir="rtl"] .search input{padding:12px 42px 12px 14px}
.ac-box{position:absolute;inset-inline:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--outline-variant);border-radius:var(--r-lg);box-shadow:var(--el-3);overflow:hidden;display:none;z-index:60}
.search.open .ac-box{display:block}
.ac-item{display:flex;align-items:center;gap:var(--s-3);padding:10px 14px;cursor:pointer;font-size:14px}
.ac-item:hover,.ac-item.sel{background:var(--surface-cont)}
.ac-item .ac-thumb{width:32px;height:32px;border-radius:var(--r-sm);display:grid;place-items:center;font-size:16px;background:var(--surface-high)}
.ac-cat{color:var(--on-surface-variant);font-size:12px}
.icon-btn{position:relative;width:42px;height:42px;border-radius:var(--r-md);display:grid;place-items:center;color:var(--on-surface);font-size:18px;transition:background .15s}
.icon-btn:hover{background:var(--surface-cont)}
.cart-count{position:absolute;top:4px;inset-inline-end:4px;min-width:18px;height:18px;padding:0 4px;border-radius:var(--r-full);background:var(--primary);color:var(--on-primary);font-size:11px;font-weight:700;display:grid;place-items:center}

/* Nav / méga-menu */
.cat-nav{border-bottom:1px solid var(--outline-variant);background:var(--surface)}
.cat-nav .container{display:flex;gap:var(--s-2);overflow-x:auto;padding-block:10px}
.cat-link{padding:8px 14px;border-radius:var(--r-md);font-size:14px;font-weight:500;color:var(--on-surface-variant);white-space:nowrap;transition:background .15s,color .15s}
.cat-link:hover,.cat-link.active{background:var(--primary-container);color:var(--on-primary-container)}

/* Hero */
.hero{background:linear-gradient(135deg,var(--surface-low),var(--surface-cont));border-bottom:1px solid var(--outline-variant);overflow:hidden}
.hero-inner{display:grid;grid-template-columns:1fr;gap:var(--s-8);align-items:center;padding-block:var(--s-16)}
@media(min-width:900px){.hero-inner{grid-template-columns:1.1fr .9fr}}
.hero-card{background:var(--surface);border:1px solid var(--outline-variant);border-radius:var(--r-2xl);box-shadow:var(--el-2);padding:var(--s-6);aspect-ratio:4/3;display:grid;place-items:center;font-size:120px;background-image:radial-gradient(circle at 30% 20%,color-mix(in srgb,var(--primary) 22%,transparent),transparent 60%)}
.hero .eyebrow{margin-bottom:var(--s-3)}.hero h1{margin-bottom:var(--s-4)}
.hero p{color:var(--on-surface-variant);font-size:18px;max-width:48ch;margin-bottom:var(--s-6)}

/* Catégories */
.cat-card{background:var(--surface);border:1px solid var(--outline-variant);border-radius:var(--r-lg);padding:var(--s-5);text-align:center;transition:transform .18s,box-shadow .18s,border-color .18s}
.cat-card:hover{transform:translateY(-3px);box-shadow:var(--el-2);border-color:var(--primary)}
.cat-card .emoji{font-size:40px;display:block;margin-bottom:var(--s-2)}.cat-card .name{font-weight:600;font-size:15px}

/* Carte produit */
.pcard{background:var(--surface);border:1px solid var(--outline-variant);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--el-1);transition:transform .2s ease,box-shadow .2s ease,border-color .2s;display:flex;flex-direction:column}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--el-3);border-color:color-mix(in srgb,var(--primary) 40%,var(--outline-variant))}
.pcard-media{position:relative;aspect-ratio:1;display:grid;place-items:center;font-size:64px;background:var(--surface-cont)}
.badge{position:absolute;top:var(--s-3);inset-inline-start:var(--s-3);padding:4px 10px;border-radius:var(--r-full);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.badge-sale{background:var(--error);color:var(--on-error)}
.badge-out{background:var(--on-surface-variant);color:var(--surface)}
.badge-new{background:var(--success);color:var(--on-success)}
.qa{position:absolute;top:var(--s-3);inset-inline-end:var(--s-3);display:flex;flex-direction:column;gap:var(--s-2);opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s}
.pcard:hover .qa,.pcard:focus-within .qa{opacity:1;transform:none}
.qa button{width:34px;height:34px;border-radius:var(--r-full);background:var(--surface);box-shadow:var(--el-1);display:grid;place-items:center;font-size:15px;border:1px solid var(--outline-variant)}
.qa button:hover{background:var(--primary-container)}
.pcard-body{padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-2);flex:1}
.pcard .cat{font-size:12px;color:var(--on-surface-variant)}
.pcard .ttl{font-family:var(--font-display);font-weight:600;font-size:16px;line-height:1.3;min-height:42px}
.pcard .rating{display:flex;align-items:center;gap:var(--s-1);font-size:13px;color:var(--on-surface-variant)}
.pcard .rating .stars{color:var(--star);letter-spacing:1px}
.pcard .price-row{display:flex;align-items:baseline;gap:var(--s-2);margin-top:auto}
.pcard .price{font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--on-surface)}
.pcard .price.sale{color:var(--error)}
.pcard .price-old{font-size:14px;color:var(--on-surface-variant);text-decoration:line-through}
.cur{font-size:.78em;font-weight:600;letter-spacing:.02em}

/* PDP */
.breadcrumb{display:flex;gap:var(--s-2);font-size:13px;color:var(--on-surface-variant);padding-block:var(--s-4);flex-wrap:wrap}
.breadcrumb a:hover{color:var(--primary)}.breadcrumb .sep{opacity:.5}
.pdp{display:grid;grid-template-columns:1fr;gap:var(--s-8);padding-bottom:var(--s-16)}
@media(min-width:900px){.pdp{grid-template-columns:1fr 1fr}}
.gallery-main{aspect-ratio:1;border-radius:var(--r-xl);background:var(--surface-cont);display:grid;place-items:center;font-size:160px;border:1px solid var(--outline-variant)}
.thumbs{display:flex;gap:var(--s-3);margin-top:var(--s-4)}
.thumb{width:84px;height:84px;border-radius:var(--r-md);background:var(--surface-cont);display:grid;place-items:center;font-size:34px;border:1px solid var(--outline-variant);cursor:pointer}
.thumb.active{border-color:var(--primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 30%,transparent)}
.pdp-info .eyebrow{margin-bottom:var(--s-2)}.pdp-info h1{font-size:clamp(26px,3vw,34px);margin-bottom:var(--s-3)}
.pdp-info .subprice{display:flex;align-items:baseline;gap:var(--s-3);margin:var(--s-4) 0}
.specs{margin-top:var(--s-6);border-top:1px solid var(--outline-variant);padding-top:var(--s-5)}
.acc{border-bottom:1px solid var(--outline-variant)}
.acc-head{display:flex;justify-content:space-between;align-items:center;padding:var(--s-4) 0;font-weight:600;cursor:pointer;font-family:var(--font-display)}
.acc-head .chev{transition:transform .2s;color:var(--on-surface-variant)}
.acc.open .chev{transform:rotate(180deg)}
.acc-body{max-height:0;overflow:hidden;transition:max-height .3s ease;color:var(--on-surface-variant);font-size:15px}
.acc.open .acc-body{max-height:300px;padding-bottom:var(--s-4)}
.qty{display:inline-flex;align-items:center;border:1px solid var(--outline);border-radius:var(--r-md);overflow:hidden}
.qty button{width:40px;height:44px;font-size:18px;color:var(--on-surface)}.qty button:hover{background:var(--surface-cont)}
.qty span{min-width:44px;text-align:center;font-weight:600}

/* Panier */
.cart-layout{display:grid;grid-template-columns:1fr;gap:var(--s-8);padding-bottom:var(--s-16)}
@media(min-width:900px){.cart-layout{grid-template-columns:1.6fr 1fr}}
.cart-items{display:flex;flex-direction:column;gap:var(--s-4)}
.cart-row{display:grid;grid-template-columns:80px 1fr auto;gap:var(--s-4);align-items:center;background:var(--surface);border:1px solid var(--outline-variant);border-radius:var(--r-lg);padding:var(--s-4)}
.cart-thumb{width:80px;height:80px;border-radius:var(--r-md);background:var(--surface-cont);display:grid;place-items:center;font-size:38px}
.cart-row .ttl{font-family:var(--font-display);font-weight:600;font-size:16px}
.cart-row .meta{font-size:13px;color:var(--on-surface-variant);margin-top:2px}
.cart-row .row-price{font-family:var(--font-display);font-weight:700;font-size:18px;text-align:end}
.summary{background:var(--surface);border:1px solid var(--outline-variant);border-radius:var(--r-lg);padding:var(--s-6);box-shadow:var(--el-1);align-self:start;position:sticky;top:96px}
.summary h3{font-family:var(--font-display);margin-bottom:var(--s-5)}
.sum-row{display:flex;justify-content:space-between;padding:var(--s-2) 0;font-size:15px;color:var(--on-surface-variant)}
.sum-row.total{border-top:1px solid var(--outline-variant);margin-top:var(--s-3);padding-top:var(--s-4);font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--on-surface)}
.promo{display:flex;gap:var(--s-2);margin:var(--s-4) 0}
.promo input{flex:1;padding:11px 14px;border-radius:var(--r-md);border:1px solid var(--outline);background:var(--surface-low);color:var(--on-surface);font-size:14px}

/* Étapes checkout */
.steps{display:flex;gap:var(--s-2);margin:var(--s-6) 0}
.step{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--s-2);text-align:center}
.step .num{width:34px;height:34px;border-radius:var(--r-full);display:grid;place-items:center;font-weight:700;font-size:14px;background:var(--surface-cont);color:var(--on-surface-variant)}
.step.done .num,.step.active .num{background:var(--primary);color:var(--on-primary)}
.step .lbl{font-size:13px;color:var(--on-surface-variant)}.step.active .lbl{color:var(--on-surface);font-weight:600}

/* Formulaires */
.field{margin-bottom:var(--s-4)}
.field label{display:block;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--on-surface-variant);margin-bottom:var(--s-2)}
.field input,.field select{width:100%;padding:12px 14px;border-radius:var(--r-md);border:1px solid var(--outline);background:var(--surface-low);color:var(--on-surface);font-size:15px;font-family:var(--font-body)}
.field input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent)}

/* Chips */
.chip{display:inline-flex;align-items:center;gap:var(--s-2);padding:6px 12px;border-radius:var(--r-full);background:var(--surface-cont);color:var(--on-surface-variant);font-size:13px;font-weight:500;cursor:pointer}
.chip.active{background:var(--primary);color:var(--on-primary)}

/* Toast */
.toast{position:fixed;inset-inline-end:var(--margin-d);bottom:var(--s-6);background:var(--on-surface);color:var(--surface);padding:14px 18px;border-radius:var(--r-md);box-shadow:var(--el-3);display:flex;align-items:center;gap:var(--s-3);font-weight:500;z-index:100;animation:pop .25s ease}
@keyframes pop{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}

/* Footer */
.site-footer{background:var(--surface-dim);border-top:1px solid var(--outline-variant);padding-block:var(--s-16) var(--s-8);margin-top:var(--s-16)}
.foot-grid{display:grid;grid-template-columns:1fr;gap:var(--s-8)}
@media(min-width:768px){.foot-grid{grid-template-columns:2fr 1fr 1fr 1fr}}
.foot-col h4{font-family:var(--font-display);font-size:15px;margin-bottom:var(--s-3)}
.foot-col a{display:block;color:var(--on-surface-variant);font-size:14px;padding:4px 0}.foot-col a:hover{color:var(--primary)}
.foot-bottom{margin-top:var(--s-8);padding-top:var(--s-5);border-top:1px solid var(--outline-variant);display:flex;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;color:var(--on-surface-variant);font-size:13px}

/* Carte produit thème — compléments */
.pcard .ttl{display:block}
.pcard .ttl:hover{color:var(--primary)}
.pcard-media-link{display:grid;place-items:center;width:100%;height:100%}
.pcard-media-link img{max-width:80%;max-height:80%;object-fit:contain}
.pcard-emoji{font-size:64px;opacity:.5}
.pcard-body .btn{margin-top:var(--s-2)}

/* Quantité (panier) — compatible cart.js (.quantity-control/.quantity-btn/.quantity-input) */
.quantity-control{display:inline-flex;align-items:center;border:1px solid var(--outline);border-radius:var(--r-md);overflow:hidden}
.quantity-btn{width:40px;height:44px;font-size:18px;color:var(--on-surface);background:transparent}
.quantity-btn:hover{background:var(--surface-cont)}
.quantity-input{width:54px;height:44px;text-align:center;border:none;background:var(--surface-low);color:var(--on-surface);font-weight:600;font-size:15px}
.quantity-input:focus{outline:2px solid var(--focus);outline-offset:-2px}
.quantity-input::-webkit-outer-spin-button,.quantity-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.quantity-input{-moz-appearance:textfield}

/* ============================================================
   COMPTE — layout + composants
   ============================================================ */
.account-shell{display:grid;grid-template-columns:1fr;gap:var(--s-6);padding-block:var(--s-8) var(--s-16)}
@media(min-width:900px){.account-shell{grid-template-columns:260px 1fr;gap:var(--s-8)}}
.account-side{position:sticky;top:96px;align-self:start}
.account-user{display:flex;align-items:center;gap:var(--s-3);background:var(--surface);border:1px solid var(--outline-variant);border-radius:var(--r-lg);padding:var(--s-4);box-shadow:var(--el-1);margin-bottom:var(--s-4)}
.account-avatar{width:48px;height:48px;border-radius:var(--r-full);background:linear-gradient(135deg,var(--primary),#ff8a3d);color:#fff;display:grid;place-items:center;font-weight:700;font-family:var(--font-display);flex-shrink:0}
.account-name{font-weight:600;font-size:15px;line-height:1.2}
.account-email{font-size:13px;margin-top:2px;word-break:break-all}
.account-nav{display:flex;flex-direction:column;gap:2px;background:var(--surface);border:1px solid var(--outline-variant);border-radius:var(--r-lg);padding:var(--s-2);box-shadow:var(--el-1)}
.account-link{display:flex;align-items:center;gap:var(--s-3);padding:12px 14px;border-radius:var(--r-md);color:var(--on-surface-variant);font-weight:500;font-size:15px;transition:background .15s,color .15s}
.account-link i{width:20px;text-align:center;color:var(--on-surface-variant)}
.account-link:hover{background:var(--surface-cont);color:var(--on-surface)}
.account-link.active{background:var(--primary-container);color:var(--on-primary-container);font-weight:600}
.account-link.active i{color:var(--primary)}
.account-logout{color:var(--error)}
.account-logout i{color:var(--error)}
.account-main{min-width:0}
.account-header{margin-bottom:var(--s-6)}
.account-header h1{margin:0}

/* Cards / panneaux compte */
.panel{background:var(--surface);border:1px solid var(--outline-variant);border-radius:var(--r-lg);padding:var(--s-6);box-shadow:var(--el-1)}
.panel + .panel{margin-top:var(--s-5)}
.panel-title{font-family:var(--font-display);font-size:18px;font-weight:600;margin-bottom:var(--s-4);display:flex;align-items:center;gap:var(--s-2)}

/* Stats (dashboard / profile) */
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-4)}
@media(min-width:700px){.stat-grid{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--surface);border:1px solid var(--outline-variant);border-radius:var(--r-lg);padding:var(--s-5);box-shadow:var(--el-1)}
.stat-ico{width:40px;height:40px;border-radius:var(--r-md);display:grid;place-items:center;font-size:18px;margin-bottom:var(--s-3)}
.stat-ico.o-primary{background:var(--primary-container);color:var(--primary)}
.stat-ico.o-success{background:var(--success-container);color:var(--success)}
.stat-ico.o-secondary{background:var(--secondary-container);color:var(--on-secondary-container)}
.stat-ico.o-tertiary{background:var(--tertiary-container);color:var(--tertiary)}
.stat-val{font-family:var(--font-display);font-size:26px;font-weight:700;line-height:1}
.stat-lbl{color:var(--on-surface-variant);font-size:13px;margin-top:4px}

/* Tableau/liste (commandes, avis) */
.data-list{display:flex;flex-direction:column;gap:var(--s-3)}
.data-row{display:grid;gap:var(--s-3);align-items:center;background:var(--surface);border:1px solid var(--outline-variant);border-radius:var(--r-lg);padding:var(--s-4) var(--s-5)}
.data-row:hover{border-color:color-mix(in srgb,var(--primary) 35%,var(--outline-variant))}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-full);font-size:12px;font-weight:600;letter-spacing:.02em}
.pill-1{background:var(--warning-container);color:var(--warning)}
.pill-2{background:var(--info);color:#fff}
.pill-3{background:var(--success-container);color:var(--success)}
.pill-0{background:var(--error-container);color:var(--error)}
.mono{font-family:var(--font-display);font-weight:700}

/* Formulaire compte — 2 colonnes */
.form-grid{display:grid;grid-template-columns:1fr;gap:0 var(--s-5)}
@media(min-width:700px){.form-grid{grid-template-columns:1fr 1fr}}
.form-grid .field.full{grid-column:1/-1}