) ne doit pas être rognée en bas */
body.apple-view .det-etq-cell:not(.det-etq-sub) > .det-etq-val,body.shared-view .det-etq-cell:not(.det-etq-sub) > .det-etq-val{overflow:visible;line-height:1.3;}
/* Apple : cran au-dessus (+5 % de carte accepté) */
body.apple-view .sc-cell{padding:8px 8px;}
body.apple-view .sc-cap{font-size:10px;}
body.apple-view .sc-val{font-size:21px;}
body.apple-view .sc-val small{font-size:11.4px;}
body.apple-view .sc-title{font-size:21px;padding:13px 14px 9px;}
body.apple-view .sc-wrap .sc-val{font-size:14.7px;}
body.apple-view .sc-cell{padding:8px 5px 8px 8px;}
body.apple-view .sc-val{font-size:18.5px;letter-spacing:-.5px;}
body.apple-view .sc-cell{border-top:1px solid #c9c9ce;border-left:1px solid #c9c9ce;}
body.apple-view .det-etq{border-top:1px solid #c9c9ce;}
body.apple-view .det-etq-cell{border-top:1px solid #c9c9ce;border-left:1px solid #c9c9ce;}
body.apple-view .sc-cap,body.apple-view .det-etq-lbl{font-weight:800;color:#3a3a3c;}
/* Bouton Télécharger liste : plus de rouge — contrastes noirs/gris au survol/appui */
body.shared-view:not(.amazon-view):not(.zara-view) .btn-head-panier{background:#fff;border-color:#d2d2d7;}
body.shared-view:not(.amazon-view):not(.zara-view) .btn-head-panier .btn-panier-txt{color:#111 !important;}
body.shared-view:not(.amazon-view):not(.zara-view) .btn-head-panier:hover{border-color:#111;background:#f5f5f5;}
body.shared-view:not(.amazon-view):not(.zara-view) .btn-head-panier:active{border-color:#111;background:#e4e4e4;}
body.shared-view .btn-head-panier:focus,body.shared-view .btn-head-panier:focus-visible{outline:2px solid #111;outline-offset:1px;box-shadow:none;}
body.apple-view .sc-cap,body.apple-view .det-etq-lbl{font-size:12px;font-weight:900;color:#000;letter-spacing:.4px;}
/* Apple : fermer le cadre (droite + bas manquaient) */
body.apple-view .sc-grid{border-right:1px solid #c9c9ce;border-bottom:1px solid #c9c9ce;}
body.apple-view .det-etq{border-right:1px solid #c9c9ce;border-bottom:1px solid #c9c9ce;}
/* Apple : bas de page façon apple.com — gris clair, petits liens, filets fins */
body.apple-view footer{background:#f5f5f7;border-top:1px solid #d2d2d7;padding:24px 24px 30px;}
body.apple-view .footer-col-title{font-family:'DM Sans',sans-serif;font-weight:700;font-size:12px;letter-spacing:0;text-transform:none;color:#1d1d1f;}
body.apple-view .footer-col a,body.apple-view .footer-col span{font-size:12px;color:#424245;}
body.apple-view .footer-col a:hover{color:#1d1d1f;text-decoration:underline;}
body.apple-view .footer-bottom{border-top:1px solid #d2d2d7;color:var(--g2);}
body.apple-view .footer-bottom *{color:var(--g2);font-size:12px;font-family:'DM Sans',sans-serif;letter-spacing:0;}
body.apple-view .footer-bottom a{color:var(--g2) !important;font-family:'DM Sans',sans-serif !important;font-size:12px !important;font-weight:700;letter-spacing:0 !important;}
/* Apple : cadre extérieur complet qui suit les coins arrondis de la carte */
body.apple-view .sc-grid{border:1px solid #c9c9ce;border-radius:0 0 17px 17px;overflow:hidden;}
body.apple-view .det-etq{border:1px solid #c9c9ce;border-radius:0 0 20px 20px;overflow:hidden;}
/* Apple : teinte unifiée page/footer + logo centré en bas */
html:has(body.apple-view){background:#f5f5f7;}
body.apple-view,body.apple-view .body-wrap,body.apple-view footer{background:#f5f5f7 !important;}
body.apple-view .footer-bottom{flex-direction:column;align-items:center;gap:10px;text-align:center;}
body.apple-view .footer-bottom a{display:block;width:170px;height:28px;background:url('/img/logo.png?v=2') center/contain no-repeat;font-size:0 !important;color:transparent !important;overflow:hidden;}
/* Entrée en cascade des cartes à la fin de l'animation d'intro */
.card-in{opacity:0;animation:cardIn .55s cubic-bezier(.2,.7,.3,1) forwards;}
@keyframes cardIn{from{opacity:0;transform:translateY(28px) scale(.97);}to{opacity:1;transform:translateY(0) scale(1);}}
/* Apple : traits uniformes (technique fond + gap 1px — plus aucun bord doublé) */
body.apple-view .sc-grid{background:#c9c9ce;gap:1px;border:1px solid #c9c9ce;}
body.apple-view .sc-cell,body.apple-view .sc-title{border:none !important;background:#fff;}
body.apple-view .det-etq{background:#c9c9ce;gap:1px;border:1px solid #c9c9ce;}
body.apple-view .det-etq-cell{border:none !important;background:#fff;}
body.shared-view .footer-grid,body.apple-view .footer-grid{display:none !important;}
body.shared-view .footer-bottom,body.apple-view .footer-bottom{border-top:none;margin-top:0;padding-top:4px;}
/* Apple : la FICHE reprend exactement la typo des cartes (gras/noir/contrastes) */
body.apple-view .det-etq-title{font-weight:800;color:#000;letter-spacing:-.4px;}
body.apple-view .det-etq-lbl{font-size:13px;font-weight:900;color:#000;letter-spacing:.4px;}
body.apple-view .det-etq-val{font-weight:800;font-size:26px;color:#000;letter-spacing:-.5px;}
body.apple-view .det-etq-wrap .det-etq-val{font-size:19px;font-weight:800;letter-spacing:0;}
body.apple-view .det-reste,body.apple-view .det-reste-item b{color:#000;}
/* Apple : resserrage vertical (~7 %) — paddings seulement, tailles intactes */
body.apple-view .sc-cell{padding-top:6px;padding-bottom:6px;}
body.apple-view .sc-title{padding-top:10px;padding-bottom:7px;}
body.apple-view .sc-wrap .sc-val{min-height:1.9em;}
body.apple-view .det-etq-cell{padding-top:8px;padding-bottom:8px;}
/* Essai &bebas=1 : titres en Bebas Neue ÉPAISSIE (trait renforcé) */
body.bebas-view .sc-title,body.apple-view .sc-title{font-family:'Bebas Neue',sans-serif !important;font-weight:400 !important;font-size:27px !important;letter-spacing:.8px !important;text-transform:uppercase !important;-webkit-text-stroke:.7px #000;padding-top:8px !important;padding-bottom:4px !important;}
body.bebas-view .det-etq-title,body.apple-view .det-etq-title{font-family:'Bebas Neue',sans-serif !important;font-weight:400 !important;font-size:36px !important;letter-spacing:1px !important;text-transform:uppercase !important;-webkit-text-stroke:.9px #000;}
.det-etq-val small{font-size:13px;font-weight:800;}
body.apple-view .det-etq-val small{font-size:14px;}
/* ── Popup récap de l'offre (après l'animation d'intro) ── */
#recap-bg{position:fixed;inset:0;z-index:11000;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px;animation:recapFade .35s ease;}
.recap-card{background:#fff;border-radius:22px;padding:30px 34px 26px;width:480px;max-width:94vw;box-shadow:0 30px 80px rgba(0,0,0,.35);animation:recapUp .45s cubic-bezier(.2,.7,.3,1);}
.recap-title{font-family:'Bebas Neue',sans-serif;font-size:36px;letter-spacing:1px;-webkit-text-stroke:.8px #000;margin-bottom:16px;text-align:center;}
.recap-stats{display:flex;justify-content:center;gap:30px;margin-bottom:16px;}
.recap-stat{text-align:center;}
.recap-stat b{display:block;font-size:40px;font-weight:800;letter-spacing:-1px;line-height:1.05;color:#000;}
.recap-stat span{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:#555;}
.recap-prix b{color:var(--red);}
.recap-quals{border-top:1px solid #e3e3e6;padding-top:12px;margin-bottom:18px;}
.recap-q{display:flex;justify-content:space-between;font-size:14.5px;padding:4px 0;font-weight:600;color:#222;}
.recap-q b{font-weight:800;color:#000;}
.recap-go{width:100%;padding:14px;background:#111;color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;letter-spacing:.5px;transition:background .15s;}
.recap-go:hover{background:#000;}
@keyframes recapUp{from{opacity:0;transform:translateY(26px) scale(.96);}to{opacity:1;transform:none;}}
@keyframes recapFade{from{opacity:0;}to{opacity:1;}}
/* Apple : badges réf/usine de la FICHE alignés sur ceux des cartes */
body.apple-view #det-ref-badge{background:rgba(255,255,255,.9) !important;color:#1d1d1f !important;backdrop-filter:blur(8px);border-radius:999px !important;font-weight:700 !important;font-size:14.5px !important;padding:7px 14px !important;}
body.apple-view #det-usine-badge{background:rgba(29,29,31,.68) !important;backdrop-filter:blur(8px);border-radius:999px !important;padding:7px 14px !important;}
body.apple-view #det-usine-badge span:first-child{font-size:11px !important;font-weight:700 !important;letter-spacing:1px !important;}
body.apple-view #det-usine-num{font-family:'DM Sans',sans-serif !important;font-size:16px !important;font-weight:800 !important;letter-spacing:0 !important;}
.recap-q{align-items:center;}
.recap-q-name{display:flex;flex-direction:column;line-height:1.25;}
.recap-q-name small{font-size:12px;font-weight:600;color:#8a8a8e;}
/* Apple : badges en vrai « matériau » Apple (verre dépoli saturé, texte SF-like) */
body.apple-view .pbig-ref,body.apple-view #det-ref-badge{background:rgba(255,255,255,.95) !important;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:#1d1d1f !important;font-size:13px !important;font-weight:600 !important;letter-spacing:.2px !important;padding:6px 12px !important;box-shadow:0 1px 4px rgba(0,0,0,.14);border-radius:999px !important;}
body.apple-view .pbig-usine,body.apple-view #det-usine-badge{background:rgba(28,28,30,.85) !important;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:999px !important;padding:6px 12px !important;font-size:12px !important;font-weight:600 !important;letter-spacing:.2px !important;}
body.apple-view #det-usine-badge span:first-child{font-size:10px !important;font-weight:600 !important;letter-spacing:.8px !important;color:rgba(255,255,255,.75) !important;}
body.apple-view #det-usine-num{font-size:13px !important;font-weight:700 !important;}
/* Onglets segmentés façon Apple (vue client) */
#shared-tabs{display:inline-flex;background:#ebebee;border-radius:999px;padding:4px;margin:4px 0 20px;gap:2px;}
#shared-tabs button{border:none;background:transparent;padding:9px 20px;border-radius:999px;font-size:14px;font-weight:600;color:#1d1d1f;cursor:pointer;font-family:inherit;transition:background .18s,color .18s;white-space:nowrap;}
#shared-tabs button.on{background:#1d1d1f;color:#fff;}
#shared-tabs button:not(.on):hover{color:#000;}
/* Popup récap : gabarit modale Apple */
.recap-card{text-align:left;position:relative;padding:36px 40px 30px;}
.recap-x{position:absolute;top:16px;left:16px;width:36px;height:36px;border-radius:50%;background:#e8e8ed;border:none;color:#4b4b4f;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;}
.recap-x:hover{background:#dededf;}
.recap-eyebrow{font-size:14px;font-weight:600;color:var(--g2);margin-bottom:10px;}
.recap-stats{justify-content:flex-start;}
.recap-stat{text-align:left;}
body.shared-view .dimg-col,body.apple-view .dimg-col{border-right:none;border-bottom:none;}
/* Apple : flèches de fiche = pastilles grises + chevrons (style apple.com) */
body.apple-view .modal-bg.show .dmod-nav{background:#e8e8ed;box-shadow:none;font-size:0;color:transparent;}
body.apple-view .modal-bg.show .dmod-nav:hover:not(:disabled){background:#dededf;}
body.apple-view .dmod-nav::after{content:'';width:13px;height:13px;border-right:2.5px solid var(--g2);border-top:2.5px solid var(--g2);display:block;border-radius:1px;}
body.apple-view .dmod-prev::after{transform:rotate(-135deg);margin-left:7px;}
body.apple-view .dmod-next::after{transform:rotate(45deg);margin-right:7px;}
body.apple-view .dmod-nav:hover:not(:disabled)::after{border-color:#48484a;}
body.apple-view .dhead-actions .dclose{background:#e8e8ed;box-shadow:none;color:var(--g2);font-size:15px;font-weight:600;}
body.apple-view .dhead-actions .dclose:hover{background:#dededf;color:#48484a;}
/* ══ THÈME APPLE ÉTENDU AU CATALOGUE (18/07) — mêmes codes que la vue client :
fond #f5f5f7, blocs blancs sans bordure dure, hairlines, pilules, rouge
réservé aux vrais accents. ══ */
/* Fond & header */
body.apple-view:not(.shared-view){background:#f5f5f7;}
body.apple-view:not(.shared-view) header{background:transparent;border-bottom:none;} /* capsule : flancs transparents (05/08) */
body.apple-view:not(.shared-view) #results-bar{background:#f5f5f7;}
body.apple-view:not(.shared-view) .header-search{background:#fff;border:none;box-shadow:var(--sh-sm);}
/* Panneau filtres */
body.apple-view .fp-head{border-bottom:1px solid #d2d2d7;}
body.apple-view .fp-title{font-family:'DM Sans',sans-serif;font-weight:800;letter-spacing:0;font-size:15px;}
body.apple-view .fg{border-bottom:none;}
body.apple-view .msd-btn{border:none;background:#fff;box-shadow:var(--sh-sm);border-radius:10px;}
body.apple-view .msd-btn:hover,body.apple-view .msd-btn.open{box-shadow:var(--sh-md);border:none;}
body.apple-view .msd-panel{border:none;border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.16);}
body.apple-view .msd-count{background:#1d1d1f;}
body.apple-view .msd-option.selected .msd-count-inline{color:#1d1d1f;background:#e8e8ed;}
body.apple-view .fpill{border:1.5px solid #d2d2d7;color:#1d1d1f;border-radius:999px;}
body.apple-view .fpill:hover{border-color:#1d1d1f;}
body.apple-view .fpill.active{background:#1d1d1f;border-color:#1d1d1f;color:#fff;}
/* Cartes catalogue */
body.apple-view .pcard{border:none;border-radius:18px;box-shadow:0 4px 22px rgba(0,0,0,.05);}
body.apple-view .pcard:hover{border:none;box-shadow:0 10px 32px rgba(0,0,0,.10);transform:translateY(-2px);}
body.apple-view .pcard-spec{background:#f5f5f7;border:none;border-radius:9px;}
body.apple-view .pcard-subtitle{color:var(--g2);}
body.apple-view .btn-add-cart{border:1.5px solid #d2d2d7;border-radius:999px;}
body.apple-view .btn-add-cart:hover{border-color:#1d1d1f;}
body.apple-view .btn-add-cart.added{background:#1d1d1f;border-color:#1d1d1f;color:#fff;}
/* Pager & états vides */
body.apple-view .pager-top{background:#ebebee;border:none;border-radius:999px;}
body.apple-view .pager-top .pnum.active{background:#1d1d1f;border:none;color:#fff;}
body.apple-view .btn-empty-reset{border-radius:999px;}
/* Fiche produit catalogue (pavés specs) */
body.apple-view .dspec-item{background:#f5f5f7;border:none;border-radius:12px;}
body.apple-view .dspec-lbl{color:var(--g2);}
body.apple-view .dspec-val{color:#1d1d1f;}
body.apple-view .btn-cart-det{border-radius:999px;}
/* Tiroir Ma Liste */
body.apple-view .drawer-totals{background:#f5f5f7;border:none;border-radius:12px;}
body.apple-view .da-action,body.apple-view .da-copy-link{border-radius:999px;}
body.apple-view #f-refmax-top{border:1px solid #e0e0e5 !important;box-shadow:var(--sh-sm);border-radius:999px !important;background:#fff !important;}
body.apple-view .rbar-sel{height:auto !important;line-height:1.3;padding:9px 28px 9px 14px !important;}
/* ---- Cartes catalogue = cartes étiquette de la vue client (18/07) ---- */
body.apple-view .sc-card .sc-body{display:flex;flex-direction:column;flex:1;}
/* Filet fantôme sous DÉTAIL (31/07) : une carte moins haute que sa voisine de
rangée laissait la grille flotter au-dessus du bas de carte → son bord
inférieur traçait un trait en travers. La grille remplit désormais le corps
et c'est la rangée DÉTAIL (1fr) qui absorbe l'espace en plus. Le décor hero
(.phero-card, 3 rangées sans DÉTAIL) est exclu. */
body.apple-view .sc-card:not(.phero-card) .sc-grid{flex:1;grid-template-rows:auto auto auto 1fr;}
body.apple-view .sc-card:not(.phero-card) .sc-grid.has-prix{grid-template-rows:auto auto auto 1fr auto;}
body.apple-view .sc-card .pcard-grp-add{background:#fff;border-top:none;margin-top:auto;}
body.apple-view .sc-foot{padding:10px 12px 12px;}
body.apple-view .sc-foot .btn-add-cart{width:100%;text-align:center;}
body.apple-view .pcard-resa-overlay{top:10px;right:10px;left:auto;background:rgba(180,83,9,.82);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border-radius:999px;padding:6px 12px;font-size:11px;font-weight:700;letter-spacing:.4px;}
/* ---- ESSAI ?haut=1 : filtres en BARRE HORIZONTALE au-dessus de la grille (18/07) ---- */
@media(min-width:769px){
body.topbar-view .body-wrap{display:block;padding:0 16px 32px;}
body.topbar-view .filters-panel{position:static !important;display:flex !important;flex-wrap:wrap;align-items:center;gap:8px;justify-content:center;height:auto !important;overflow:visible !important;border-right:none;background:transparent;padding:14px 0 18px;}
body.topbar-view .fp-head{border-bottom:none;margin:0;padding:0;order:99;}
body.topbar-view .fp-title{display:none;}
body.topbar-view .filters-panel .fg{border:none !important;margin:0 !important;padding:0 !important;}
body.topbar-view .filters-panel .msd{width:auto;}
body.topbar-view .filters-panel .msd-btn{width:auto;padding:9px 12px 9px 14px;}
body.topbar-view .format-pills{display:flex !important;margin:0;gap:8px;}
body.topbar-view .format-pills .fpill{width:auto !important;}
body.topbar-view .msd-panel{width:auto !important;min-width:230px;max-width:340px;}
body.topbar-view .body-wrap>div:last-child{padding:12px 0 0;}
}
@media(min-width:769px){
body.topbar-view .pgrid{grid-template-columns:repeat(4,1fr);max-width:var(--gab);margin-left:auto;margin-right:auto;gap:8px;} /* PORTABLE/MacBook = 4 cartes (29/08 Ethan) */
/* Grand écran externe (≥1800px) = 6 cartes ; portable reste à 4 (12/09 Ethan) */
@media(min-width:1800px){body.topbar-view .pgrid{grid-template-columns:repeat(6,1fr);}}
/* Grand écran : 6 cartes par rangée (12/09 Ethan) */
@media(min-width:2100px){body.topbar-view .pgrid{grid-template-columns:repeat(6,1fr);}body.shared-view .pgrid{grid-template-columns:repeat(5,1fr);}}
/* Perf CLS desktop : quand on quitte le hero pour la grille, la bascule est
synchrone mais la grille reste VIDE le temps du fetch (debounce 200ms) → le
contenu s'effondre puis resaute quand les cartes arrivent (CLS ~0,58). On
réserve une hauteur stable tant que la grille est vide ; dès que le spinner
OU les cartes sont injectés (:empty ne matche plus) le min-height disparaît
→ zéro effet visuel sur la grille pleine et sur l'état « Aucun résultat ». */
body.topbar-view .pgrid:empty{min-height:calc(100vh - 230px);}
}
/* ---- Tiroir MA LISTE façon Apple (18/07) ---- */
body.apple-view .cart-drawer{background:#f5f5f7;}
body.apple-view .drawer-head{border-bottom:1px solid #d2d2d7;}
body.apple-view .drawer-title{font-size:24px;-webkit-text-stroke:.7px #000;letter-spacing:1.5px;}
body.apple-view .drawer-meta{color:var(--g2);}
body.apple-view .dh-clear-btn{background:#e8e8ed;border:none;color:#1d1d1f;font-weight:600;height:34px;}
body.apple-view .dh-clear-btn:hover{background:#dededf;color:#1d1d1f;}
body.apple-view .dh-close-btn{background:#e8e8ed;border:none;color:var(--g2);}
body.apple-view .dh-close-btn:hover{background:#dededf;color:#48484a;}
body.apple-view .ci{border:none;border-radius:14px;box-shadow:0 2px 10px rgba(0,0,0,.05);margin-bottom:5px;}
body.apple-view .ci-kgs{color:#000;font-weight:800;}
body.apple-view .ci-qty-btn{border:none;background:#e8e8ed;}
body.apple-view .ci-qty-btn:hover{background:#dededf;}
body.apple-view .drawer-footer{border-top:1px solid #d2d2d7;background:#f5f5f7;}
body.apple-view .da-action{background:#1d1d1f;}
body.apple-view .da-action:hover{background:#000;}
body.apple-view .da-copy-link{background:#e8e8ed;color:#1d1d1f;}
body.apple-view .da-copy-link:hover{background:#dededf;}
/* « Recevoir le prix » (26/08) : 2 boutons empilés, WhatsApp en vert */
.da-prix-row{display:flex;flex-direction:column;}
.da-prix-wa,body.apple-view .da-prix-wa{background:#25D366 !important;color:#fff !important;}
.da-prix-wa:hover,body.apple-view .da-prix-wa:hover{background:#1da851 !important;}
body.apple-view .drawer-totals{background:#fff;border:none;box-shadow:0 2px 10px rgba(0,0,0,.05);}
body.apple-view .dt-val{color:#000;}
body.apple-view .btn-drawer-browse{border-radius:999px;}
/* Recommencer : bouton pilule avec fleche, a droite de Sans reserve (topbar) */
.fp-reset-ico,.fp-reset-t2{display:none;}
body.topbar-view .fp-reset{display:inline-flex;align-items:center;justify-content:center;background:#e8e8ed !important;border-radius:999px;width:38px;height:38px;padding:0 !important;color:#1d1d1f !important;}
body.topbar-view .fp-reset:hover{background:#dededf !important;}
body.topbar-view .fp-reset .fp-reset-ico{display:block;width:16px;height:16px;}
body.topbar-view .fp-reset-t1,body.topbar-view .fp-reset-t2{display:none;}
body.topbar-view .fpill-photo,body.topbar-view .fpill-resa{font-size:13px !important;padding:7px 14px !important;gap:6px !important;}
/* + rond dans la ligne DETAIL des cartes catalogue (18/07) */
body.apple-view .sc-det-row{display:flex;align-items:center;gap:8px;}
body.apple-view .sc-add{flex-shrink:0;width:34px;height:34px;border-radius:999px;border:1.5px solid #1d1d1f;background:#1d1d1f;cursor:pointer;font-size:0 !important;display:flex;align-items:center;justify-content:center;padding:0;transition:border-color .15s,background .15s;}
body.apple-view .sc-add svg{display:none;}
body.apple-view .sc-add::before{content:'+';font-size:21px;font-weight:500;color:#fff;font-family:'DM Sans',sans-serif;line-height:1;}
body.apple-view .sc-add:hover{background:#000;border-color:#000;}
body.apple-view .sc-add.added{background:#FE0000;border-color:#FE0000;}
/* Cellule + de la carte (29/08) : bouton centré dans sa case (droite) */
body.apple-view .pgrid .sc-card .sc-price-add{justify-content:center !important;}
body.apple-view .pgrid .sc-card .sc-price-add .sc-add{margin-left:0 !important;}
/* 17/08 (Ethan) : + devient POUBELLE quand l'article est dans la liste (re-clic = retire). */
body.apple-view .sc-add.added::before{content:'';width:17px;height:17px;background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23fff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='3%206%205%206%2021%206'/%3E%3Cpath%20d='M19%206v14a2%202%200%200%201-2%202H7a2%202%200%200%201-2-2V6m3%200V4a2%202%200%200%201%202-2h4a2%202%200%200%201%202%202v2'/%3E%3Cline%20x1='10'%20y1='11'%20x2='10'%20y2='17'/%3E%3Cline%20x1='14'%20y1='11'%20x2='14'%20y2='17'/%3E%3C/svg%3E") center/contain no-repeat;}
/* topbar UNE ligne (v2, 18/07) : tri = pastille avec menu, + page et pager en bout de barre, tout compacte */
body.topbar-view .filters-panel{gap:6px;}
body.topbar-view .filters-panel .msd-btn{font-size:14px;padding:9px 10px 9px 12px;}
body.topbar-view .fpill{padding:7px 10px !important;}
body.topbar-view .fpill-photo,body.topbar-view .fpill-resa{padding:7px 10px !important;font-size:12.5px !important;}
body.topbar-view .fp-reset,body.topbar-view .filters-panel #add-page-btn{width:36px;height:36px;}
body.topbar-view .rbar-sort{display:none;}
body.topbar-view #tb-sort{order:100;width:auto;}
body.topbar-view .tb-sort-btn{width:56px !important;height:38px !important;padding:0 !important;justify-content:center;border-radius:999px;}
body.topbar-view .filters-panel #add-page-btn{order:-1;border:none;background:#fff;box-shadow:var(--sh-sm);border-radius:999px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;}
body.topbar-view .filters-panel .pager-top{order:-1;margin:0;}
/* Panneau Details a deux niveaux : familles puis options (18/07) */
.msd-group-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;cursor:pointer;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;color:var(--ink);border-top:1.5px solid #222;}
.msd-group-row:first-child{border-top:none;}
.msd-group-row:hover{background:#f5f5f7;}
.mgr-right{display:flex;align-items:center;gap:7px;}
.mgr-arrow{color:#a1a1a6;font-size:17px;line-height:1;}
.mgr-nsel{background:#1d1d1f;color:#fff;border-radius:999px;font-size:11px;font-weight:700;padding:2px 8px;line-height:1.4;}
/* Plage Laize/Ø/Poids affichée à droite du titre de section (28/08, comme Grammages) */
.mgr-range{color:var(--g2,#6e6e73);font-size:13px;font-weight:700;white-space:nowrap;}
.gsl-host{display:block;}
/* Popup FLOTTANT des sections avancées (08/08) : options en dropdown sous la ligne */
.adv-pop{background:#fff;border:1px solid var(--hairline);border-radius:10px;box-shadow:var(--sh-md);max-height:340px;overflow-y:auto;padding:4px 2px;margin-top:2px;}
.adv-pop .msd-search-wrap{position:sticky;top:0;background:#fff;z-index:2;padding:2px 2px 4px;}
@media(min-width:769px){.adv-pop{position:absolute;left:0;right:0;top:0;z-index:60;margin-top:0;}}
.msd-back-row{display:none;align-items:center;gap:7px;padding:10px 12px;cursor:pointer;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:700;color:var(--ink);border-bottom:1px solid #eee;position:sticky;top:0;background:#fff;z-index:2;}
.msd-back-row:hover{background:#f5f5f7;}
.msd-back-ar{font-size:17px;line-height:1;}
/* topbar : pilules Bobine/Format retirees, le + page prend leur place en tete (18/07) */
body.topbar-view .filters-panel .fg:has([data-format]){display:none !important;}
/* topbar : SANS PHOTO et RESERVE retires, restent PHOTO et DISPO (18/07) */
body.topbar-view .fpill-photo[data-photo="without"],body.topbar-view .fpill-resa[data-resa="with"]{display:none !important;}
/* Album photo : bouton header (ex-tiroir), cache en vue client */
body.shared-view #album-photo-btn{display:none !important;}
/* topbar 2e ligne : actions + tags des filtres actifs, visible seulement si filtre pose (18/07) */
body.topbar-view #topbar-row2{display:none;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:8px;padding:2px 0 10px;max-width:var(--gab);margin-left:auto;margin-right:auto;}
body.topbar-view #topbar-row2:has(.fchip){display:flex;}
body.topbar-view #topbar-row2 .filter-chips{display:flex !important;flex:1;min-width:0;flex-wrap:wrap;justify-content:center;margin:0;padding:0;max-width:none;gap:6px;}
body.topbar-view #topbar-row2 .fchip{background:#fff;border:none;box-shadow:var(--sh-sm);color:#1d1d1f;font-size:13px;font-weight:600;padding:7px 10px 7px 14px;border-radius:999px;}
body.topbar-view #topbar-row2 .fchip button{color:var(--g2);font-size:15px;}
body.topbar-view #topbar-row2 .fchip button:hover{color:#1d1d1f;}
/* header : hover neutre (pas de rouge) sur Album photo / Liste en theme Apple */
body.apple-view .btn-head:hover{border-color:#1d1d1f;color:var(--ink2);background:#f5f5f7;}
/* Album photo et Liste : largeur fixe 125px */
/* header : recherche centree en absolu = vraie symetrie logo/boutons */
body.apple-view .header-inner{position:relative;}
body.apple-view .hright{margin-left:auto;}
/* Toasts facon Apple : pilule blanche depolie, texte sombre, sans lisere rouge */
body.apple-view .toast{background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:#1d1d1f;border:none;border-left:none;border-radius:999px;font-size:14px;font-weight:600;padding:12px 22px;box-shadow:0 8px 30px rgba(0,0,0,.18);}
body.topbar-view #topbar-row2 #tb-sort{margin-left:auto;}
/* topbar : menu avec selection active = liseré noir, libellé fixe */
body.topbar-view .msd-btn.has-sel{box-shadow:0 0 0 1.5px #1d1d1f,0 1px 6px rgba(0,0,0,.06);}
/* topbar : bouton Recommencer retire (les tags ont chacun leur croix) */
body.topbar-view .fp-head{display:none !important;}
/* menus : option cochee en NOIR (plus de rouge) en theme Apple ; Tout effacer retire du topbar */
body.apple-view .msd-option.selected{color:#1d1d1f;background:#f5f5f7;}
body.apple-view .msd-option.selected .msd-check{background:#1d1d1f;border-color:#1d1d1f;box-shadow:0 0 0 3px rgba(0,0,0,.08);}
body.topbar-view .chips-clear{display:none !important;}
/* + page facon Apple : jamais de rouge — hover noir, etat "tout ajouté" = noir avec x (18/07) */
body.apple-view .vt-toggle-btn.add-page-btn:hover{background:#1d1d1f;color:#fff;border-color:#1d1d1f;}
body.apple-view .vt-toggle-btn.add-page-btn.all-in{background:#1d1d1f;border-color:#1d1d1f;color:#fff;}
body.apple-view .vt-toggle-btn.add-page-btn.all-in svg{display:block;transform:rotate(45deg);}
/* ---- Header CAPSULE FLOTTANTE facon apple.com (18/07) : barre blanche depolie
detachee du haut, Liste = bouton bleu rempli (Acheter), Album photo = contour (Decouvrir) ---- */
@media(min-width:769px){
body.apple-view header{background:transparent;border-bottom:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;top:10px;padding:0 16px;} /* capsule aussi en vue client (05/08) */
body.apple-view .header-inner{background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border-radius:20px;box-shadow:var(--sh-md);max-width:var(--gab-head);margin:0 auto;padding:0 20px;height:58px;}
body.apple-view:not(.shared-view) #cart-btn{background:#fff;border:1px solid var(--g3);color:#1d1d1f;}
body.apple-view:not(.shared-view) #cart-btn:hover{background:#f5f5f7;border:1px solid var(--g3);color:#1d1d1f;}
body.apple-view:not(.shared-view) #cart-btn .btn-panier-txt{color:#1d1d1f;}
body.apple-view:not(.shared-view) #cart-btn .cart-badge{background:#1d1d1f;color:#fff;}
body.apple-view:not(.shared-view) #album-photo-btn{background:#fff;border:1.5px solid #d2d2d7;color:#1d1d1f;}
body.apple-view:not(.shared-view) #album-photo-btn:hover{border-color:var(--g3);background:#fff;color:#1d1d1f;}
}
/* ── Bouton OFFRE (22/07) : sélections préfaites par qualité de papier ── */
#offre-wrap,#fab-wrap{position:relative;display:flex;align-items:center;margin-right:8px;}
#offre-btn .offre-arrow,#fab-btn .offre-arrow{font-size:12px;line-height:1;margin-left:2px;transition:transform .15s;}
#offre-btn.open .offre-arrow,#fab-btn.open .offre-arrow{transform:rotate(180deg);}
body.apple-view:not(.shared-view) #offre-btn,body.topbar-view #offre-btn,body.apple-view:not(.shared-view) #fab-btn,body.topbar-view #fab-btn{background:#fff;border:none;box-shadow:var(--sh-sm);color:#1d1d1f;}
body.apple-view:not(.shared-view) #offre-btn:hover,body.topbar-view #offre-btn:hover,body.apple-view:not(.shared-view) #fab-btn:hover,body.topbar-view #fab-btn:hover{background:#fff;border:none;box-shadow:var(--sh-md);color:#1d1d1f;}
body.shared-view #offre-wrap,body.shared-view #fab-wrap{display:none !important;}
.offre-menu{position:absolute;top:calc(100% + 10px);right:0;background:#fff;border:1px solid #e8e8ed;border-radius:20px;box-shadow:var(--sh-lg);padding:6px;min-width:270px;max-width:calc(100vw - 16px);max-height:min(74vh,660px);overflow-y:auto;overscroll-behavior:contain;display:none;z-index:3000;}
.offre-menu.show{display:block;}
/* Segment FAB|LOTS du popup Quantité masqué (pools fusionnés, demande Ethan 08/08) */
#qty-seg{display:none !important;}
/* Bandeau « PRIX DÉPART USINE » de la fiche produit retiré (demande Ethan 08/08) */
#det-price-row{display:none !important;}
.offre-load{padding:14px;font-family:'DM Sans',sans-serif;font-size:13px;color:var(--g2);}
.offre-item{display:flex;align-items:baseline;gap:12px;width:100%;padding:10px 14px;border:none;background:none;border-radius:10px;font-family:'DM Sans',sans-serif;font-size:14.5px;font-weight:700;color:#1d1d1f;cursor:pointer;text-align:left;}
.offre-item .offre-lbl{flex:1;}
.offre-item small{font-size:12px;font-weight:600;color:var(--g2);white-space:nowrap;}
.offre-item:hover{background:#f5f5f7;}
/* Segment FAB / STOCK en haut du menu (même style que le popup Quantité) */
.offre-seg{display:flex;gap:2px;background:#f0f0f2;border-radius:999px;padding:3px;margin:2px 6px 6px;}
.offre-seg-btn{flex:1;padding:7px 0;border:none;border-radius:999px;background:transparent;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:700;letter-spacing:.3px;color:var(--g2);cursor:pointer;}
.offre-seg-btn.on{background:#fff;color:#1d1d1f;box-shadow:var(--sh-sm);}
.offre-seg-btn:disabled{opacity:.4;cursor:default;}
/* Offre (niveau 2) : sous-en-tête qualité×forme + lignes par bande de grammage */
.offre-seg-forme{margin-top:0;}
/* L'intro container a SA PROPRE mise à l'échelle (zoom .ctn-scene par palier
de viewport) : on ANNULE le zoom global dessus, sinon les deux se cumulent
et le camion sort du cadre en très grand écran (05/08). */
#ctn-splash{zoom:calc(1/var(--fitz,1));}
.offre-chev-us{margin-left:2px;color:#c7c7cc;font-weight:700;font-size:17px;line-height:1;padding:2px 6px;border-radius:8px;display:inline-block;transition:transform .15s,color .15s;}
.offre-chev-us:hover{color:#1d1d1f;background:#f5f5f7;}
.offre-chev-us.open{transform:rotate(90deg);color:#1d1d1f;}
.offre-usine{padding-left:28px;}
#fab-menu{min-width:400px;}
.fab-us-hdr .offre-lbl{font-weight:800;}
.fab-offre{padding-left:46px;}
.fab-offre .offre-lbl{font-weight:600;font-size:13px;color:var(--g1);white-space:nowrap;}
.offre-usine .offre-lbl{font-weight:600;font-size:13.5px;color:var(--g1);}
/* ── Bouton − de retrait en vue client (équipe seulement) : même gabarit que
le + des cartes catalogue, calé en bas à droite de la carte ── */
body.apple-view .sc-card{position:relative;}
/* (18/08) sc-moins (− retrait vue client) : plus d'ancrage absolu — il vit dans
la ligne PRIX comme le + du catalogue (styles .sc-price-main .sc-add). */
.offre-offer{padding:9px 14px;}
.offre-offer .offre-lbl small{font-size:11px;font-weight:700;letter-spacing:.3px;color:#a1a1a6;margin-left:4px;}
/* + page (2e ligne) : rond BLEU Apple assorti au bouton Liste */
body.topbar-view #topbar-row2 #add-page-btn{border:none;background:#1d1d1f;color:#fff;border-radius:999px;width:36px;height:36px;min-width:36px;display:flex;align-items:center;justify-content:center;margin:0;padding:0;box-shadow:var(--sh-md);}
body.topbar-view #topbar-row2 #add-page-btn:hover{background:#333;color:#fff;border:none;}
/* 21/07 (Ethan) : le + bleu reste TOUJOURS le + bleu — plus d'état sombre
trash/croix quand tout est en liste (le clic ouvre le popup Quantité de
toute façon ; retirer = poubelle du header). */
body.topbar-view #topbar-row2 #add-page-btn.all-in{background:#1d1d1f;color:#fff;box-shadow:var(--sh-md);}
body.topbar-view #topbar-row2 #add-page-btn.all-in::before{display:none;content:none;}
body.topbar-view #topbar-row2 #add-page-btn.all-in svg{display:block;transform:none;}
/* topbar : plus de pagination (scroll infini) */
body.topbar-view .pager,body.topbar-view .pager-top{display:none !important;}
/* catalogue : badges ref / usine retires des photos de cartes (18/07) — la vue client les garde */
body.apple-view:not(.shared-view) .pcard .pbig-ref,body.apple-view:not(.shared-view) .pcard .pbig-usine{display:none;}
/* topbar : DEUX largeurs de bouton unifiees (18/07) — 96px standard, 134px pour les longs */
body.topbar-view .filters-panel .msd-btn{width:96px;justify-content:center;padding:9px 8px;box-sizing:border-box;}
body.topbar-view #sb-msd-type .msd-btn,body.topbar-view #sb-msd-grammage .msd-btn,body.topbar-view #sb-msd-diametre .msd-btn,body.topbar-view #sb-msd-format .msd-btn{width:134px;}
body.topbar-view .format-pills .fpill-photo,body.topbar-view .format-pills .fpill-resa{width:96px !important;justify-content:center !important;box-sizing:border-box;}
/* topbar : texte + fleche centres dans les pilules a largeur fixe */
body.topbar-view .filters-panel .msd-btn-label{flex:0 1 auto;}
/* catalogue : compteur articles/tonnage retire du header (la vue client garde le sien) */
body.apple-view:not(.shared-view) #rbar-count{display:none !important;}
/* Album photo / Liste : compacts facon Decouvrir / Acheter d'apple.com (18/07) */
body.apple-view:not(.shared-view) #album-photo-btn{border:1px solid var(--g3);background:#fff;color:#1d1d1f;height:36px;padding:0 16px;font-weight:400;}
body.apple-view:not(.shared-view) #album-photo-btn:hover{border-color:#1d1d1f;background:#fff;}
body.apple-view:not(.shared-view) #cart-btn{height:36px;padding:0 16px;width:auto;border-radius:999px;}
body.apple-view:not(.shared-view) #cart-btn svg{display:none;}
/* …sauf l'icône PARTAGER qui remplace le texte « Liste » quand la sélection
est non vide (spécificité > les deux règles display:none ci-dessus/mobile). */
body.apple-view:not(.shared-view) #cart-btn svg.cart-share-ico,body.topbar-view #cart-btn svg.cart-share-ico{display:block;}
body.apple-view:not(.shared-view) #cart-btn .btn-panier-txt{font-size:18.5px !important;font-weight:700 !important;} /* 18/08 : alignée sur Offre (l'ancienne 14px/400 écrasait tout) */
body.apple-view:not(.shared-view) #album-photo-btn,body.apple-view:not(.shared-view) #cart-btn{border-radius:999px;}
/* + des cartes : survol BLEU */
body.apple-view .sc-add:hover{border-color:#1d1d1f;background:#1d1d1f;}
body.apple-view .sc-add:hover::before{color:#fff;}
/* badge x N : blanc translucide discret */
body.apple-view .sc-count{background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:#1d1d1f;font-size:12px;font-weight:600;box-shadow:var(--sh-sm);}
/* badge RESERVE : pastille blanche translucide, texte ambre — plus discret */
body.apple-view .pcard-resa-overlay{background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:#b45309;font-size:10.5px;font-weight:700;letter-spacing:.5px;box-shadow:var(--sh-sm);padding:5px 10px;}
/* Poids = section du rail (curseur comme Grammages) — visible */
/* Ref article / Max : champs gris Apple, lisibles dans la capsule blanche */
body.apple-view:not(.shared-view) #f-refmin-top,body.apple-view:not(.shared-view) #f-refmax-top{background:#fff !important;border:1px solid #e0e0e5 !important;box-shadow:var(--sh-sm) !important;}
body.apple-view #f-refmin-top::placeholder,body.apple-view #f-refmax-top::placeholder{color:var(--g2);}
/* toasts : rappel de marque — texte + contour ROUGE Prodi sur blanc depoli */
body.apple-view .toast{color:#1d1d1f;border:1px solid rgba(0,0,0,.22);font-weight:700;}
/* badges x N et RESERVE : +5 % */
body.apple-view .sc-count{font-size:12.6px;padding:4px 11.5px;}
body.apple-view .pcard-resa-overlay{font-size:11px;padding:5.5px 10.5px;}
/* topbar : Details juste avant Ref usine (18/07) */
body.topbar-view .filters-panel .fg:has(#sb-msd-details){order:5;}
/* Grammages JUSTE au-dessus de Filtres avancés (08/08) : entre Détails(5) et tb-adv(9) */
body.topbar-view .filters-panel .fg:has(#sb-msd-grammage){order:7;}
body.topbar-view .filters-panel .fg:has(#sb-msd-laize),body.topbar-view .filters-panel .fg:has(#sb-msd-diametre),body.topbar-view .filters-panel .fg:has(#sb-msd-poids){order:10;}
/* Dimensions (quand elle remonte dans la barre) APRÈS Détails (08/08) */
body.topbar-view .filters-panel .fg:has(#sb-msd-format){order:6;}
body.topbar-view .filters-panel .fg:has(#sb-msd-usine){display:none !important;}
body.topbar-view .filters-panel .fg:has(.fpill-photo){display:none !important;}
/* Filtres avances : en bout de barre */
body.topbar-view #tb-adv{order:9;width:auto;}
body.topbar-view #tb-adv .msd-btn{width:auto;padding:9px 14px;}
/* topbar : la zone de filtres (barre + tags) COLLE sous le header au scroll (18/07) */
@media(min-width:769px){
body.topbar-view .body-wrap>.sidebar-col{position:sticky;top:52px;z-index:90;background:transparent;pointer-events:none;}
body.topbar-view .body-wrap>.sidebar-col button,body.topbar-view .body-wrap>.sidebar-col .msd,body.topbar-view .body-wrap>.sidebar-col .fchip,body.topbar-view .body-wrap>.sidebar-col input{pointer-events:auto;}
}
/* Effet VOL (18/07) : pilules translucides depolies, les articles defilent derriere */
body.topbar-view .filters-panel .msd-btn,body.topbar-view .fp-reset,body.topbar-view .tb-sort-btn,body.topbar-view #topbar-row2 .fchip{background:rgba(255,255,255,.75);-webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);}
body.topbar-view .filters-panel .msd-btn:hover{background:rgba(255,255,255,.95);}
/* + et tri : ancres ABSOLUES sur la ligne de filtres — la ligne des tags ne
réserve plus leur hauteur, la grille commence juste sous les tags (18/07) */
/* + et tri aux EXTRÉMITÉS de la barre header (05/08) : ancrage en % sur les
bords de la capsule (--gab-head) — les % restent justes sous le zoom global,
contrairement aux vw */
body.topbar-view #topbar-row2 #add-page-btn{position:absolute;left:max(8px,calc(50% - var(--gab-head)/2));top:15px;margin:0;}
body.topbar-view #topbar-row2 #tb-sort{position:absolute;right:max(8px,calc(50% - var(--gab-head)/2));top:15px;margin:0;}
body.topbar-view #topbar-row2{padding:0 24px 10px;}
/* ═══════ HERO PRODIX — page d'arrivée Base44 × Apple (18/07) ═══════ */
body.topbar-view #prodix-hero{position:relative;min-height:calc(100vh - 230px);display:flex;align-items:center;justify-content:center;overflow:hidden;background:#f5f5f7;border-radius:0 0 28px 28px;margin-bottom:28px;}
body.topbar-view .phero-tapis{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:26px;pointer-events:none;user-select:none;}
body.topbar-view .phero-tapis::before,body.topbar-view .phero-tapis::after{content:'';position:absolute;left:0;right:0;height:17%;z-index:2;}
body.topbar-view .phero-tapis::before{top:0;background:linear-gradient(to bottom,#f5f5f7,rgba(245,245,247,0));}
body.topbar-view .phero-tapis::after{bottom:0;background:linear-gradient(to top,#f5f5f7,rgba(245,245,247,0));}
body.topbar-view .phero-rail{overflow:hidden;opacity:.55;}
/* gap:0 : l'espacement vit DANS .phero-set (gap 18 + padding-right 18) pour
que translateX(-50%) tombe exactement sur la frontière entre les 2 copies. */
body.topbar-view .phero-piste{display:flex;gap:0;width:max-content;will-change:transform;}
body.topbar-view .phero-set{display:flex;gap:18px;padding-right:18px;flex:0 0 auto;}
body.topbar-view .phero-rail-h .phero-piste{animation:phero-defile 84s linear infinite;}
body.topbar-view .phero-rail-b .phero-piste{animation:phero-defile 66s linear infinite reverse;}
@keyframes phero-defile{from{transform:translateX(0);}to{transform:translateX(-50%);}}
body.topbar-view .phero-card{flex:0 0 auto;width:272px;cursor:default;}
body.topbar-view .phero-card .pcard-img{height:132px;}
body.topbar-view .phero-card .sc-title{font-size:19px !important;padding:7px 10px 3px !important;-webkit-text-stroke:.4px #000;}
body.topbar-view .phero-card .sc-cap{font-size:9px;letter-spacing:.3px;}
body.topbar-view .phero-card .sc-val{font-size:13.5px;letter-spacing:0;}
body.topbar-view .phero-card .sc-val small{font-size:9px;}
body.topbar-view .phero-card .sc-cell{padding:5px 6px !important;}
body.topbar-view .phero-voile{position:absolute;inset:0;background:rgba(245,245,247,.6);}
body.topbar-view .phero-inner{position:relative;z-index:2;width:100%;max-width:780px;padding:56px 24px 72px;text-align:center;}
body.topbar-view .phero-title{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:clamp(48px,6.5vw,88px);line-height:.94;letter-spacing:.012em;color:#1d1d1f;-webkit-text-stroke:.7px #000;margin:0 0 16px;}
body.topbar-view .phero-sub{font-size:clamp(15px,1.5vw,18.5px);font-weight:500;color:var(--g2);line-height:1.45;max-width:540px;margin:0 auto 34px;}
body.topbar-view .phero-box{max-width:700px;margin:0 auto;background:#fff;border-radius:24px;border:1px solid rgba(0,0,0,.04);box-shadow:0 24px 60px rgba(0,0,0,.09),0 2px 8px rgba(0,0,0,.05);padding:18px 18px 13px;text-align:left;transition:border-color .18s,box-shadow .18s;}
body.topbar-view .phero-box:focus-within{border-color:rgba(254,0,0,.5);box-shadow:0 24px 60px rgba(0,0,0,.09),0 0 0 4px rgba(254,0,0,.12);}
body.topbar-view .phero-box textarea{width:100%;min-height:56px;resize:none;border:0;outline:0;background:transparent;font-family:'DM Sans',sans-serif;font-size:17px;font-weight:500;color:#1d1d1f;line-height:1.5;box-sizing:border-box;}
body.topbar-view .phero-box textarea::placeholder{color:#a1a1a6;}
body.topbar-view .phero-bar{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding-top:11px;border-top:1px solid #f0f0f2;}
body.topbar-view .phero-brand{display:inline-flex;align-items:center;gap:8px;}
body.topbar-view .phero-brand img{width:28px;height:28px;border-radius:999px;display:block;box-shadow:var(--sh-sm);}
body.topbar-view .phero-brand b{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:17px;letter-spacing:.06em;color:#1d1d1f;}
body.topbar-view .phero-brand em{font-style:normal;font-size:12.5px;font-weight:500;color:var(--g2);}
body.topbar-view .phero-send{width:44px;height:44px;border-radius:999px;border:0;background:#111;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,transform .12s;padding:0;}
body.topbar-view .phero-send:hover{background:#333;transform:scale(1.05);}
body.topbar-view .phero-send:active{transform:scale(.94);}
body.topbar-view .phero-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px;}
body.topbar-view .phero-pill{border:0;border-radius:999px;background:#fff;box-shadow:var(--sh-sm);padding:10px 17px;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;color:#1d1d1f;cursor:pointer;transition:background .15s,transform .1s;}
body.topbar-view .phero-pill:hover{background:#e8e8ed;}
body.topbar-view .phero-pill:active{transform:scale(.97);}
body.topbar-view .phero-fade{position:absolute;z-index:3;left:0;right:0;bottom:0;height:120px;background:linear-gradient(to bottom,rgba(245,245,247,0),#f5f5f7 88%);pointer-events:none;}
@media (prefers-reduced-motion:reduce){body.topbar-view .phero-piste{animation:none !important;transform:translateX(-15%);}}
/* landing hero seul : fab PRODIX retire (le hero EST l'entree PRODIX) */
body.topbar-view .fab-prodix{display:none !important;}
/* hero : logo PRODIX sur pastille translucide (remplace titre+sous-titre) */
body.topbar-view .phero-logo{width:150px;height:150px;margin:-30px auto 28px;border-radius:50%;background:rgba(255,255,255,.65);-webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);box-shadow:0 8px 30px rgba(0,0,0,.10);display:flex;align-items:center;justify-content:center;}
body.topbar-view .phero-logo img{width:114px;height:114px;object-fit:contain;}
/* boite hero sur UNE ligne : texte et envoyer alignes */
body.topbar-view .phero-box-row{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 24px;border-radius:999px;}
body.topbar-view .phero-box-row textarea{flex:1;min-height:24px;height:24px;overflow:hidden;white-space:nowrap;margin:0;}
body.topbar-view .phero-box-row .phero-send{flex-shrink:0;}
/* Pilule du HERO (pas celle du panneau conversation) : +10 % et plus en avant
(demande Ethan 20/07) — desktop seulement, le mobile garde sa version compacte. */
@media(min-width:769px){
/* Contour marqué (la pilule blanche se fondait dans le nuage blanc) :
liseré gris franc façon Apple + ombre de contact qui dessine la silhouette. */
/* Contour NOIR de la barre de saisie (demande Ethan 20/07), fond blanc neige. */
body.topbar-view .phero-inner>.phero-box{max-width:770px;background:#fff;border:2px solid #111;box-shadow:0 2px 7px rgba(0,0,0,.10),0 12px 34px rgba(0,0,0,.11),0 30px 72px rgba(0,0,0,.09);}
body.topbar-view .phero-inner>.phero-box-row{padding:12px 12px 12px 26px;gap:13px;}
body.topbar-view .phero-inner>.phero-box textarea{font-size:19px;}
body.topbar-view .phero-inner>.phero-box .phero-send{width:48px;height:48px;}
body.topbar-view .phero-inner>.phero-box .phero-send svg{width:20px;height:20px;}
body.topbar-view .phero-inner>.phero-box .phero-attach{width:42px;height:42px;}
/* « Nuage » : grand voile blanc en dégradé radial derrière la pilule — les
rails s'estompent doucement autour d'elle (net au centre, fondu au bord).
Un simple gradient = peint une fois, zéro coût GPU. */
/* PAS de z-index sur la barre : sinon elle devient son propre contexte
d'empilement et le ::before z-index:-1 passe AU-DESSUS de son fond (barre
voilée par le nuage, vécu 20/07). Sans z-index, le pseudo rejoint le
contexte de .phero-inner (z:2) → nuage DERRIÈRE toute la barre, devant les rails. */
body.topbar-view .phero-inner>.phero-box{position:relative;}
body.topbar-view .phero-inner>.phero-box::before{content:'';position:absolute;inset:-140px -220px;border-radius:50%;background:radial-gradient(closest-side,rgba(245,245,247,.98) 42%,rgba(245,245,247,.88) 66%,rgba(245,245,247,0) 100%);z-index:-1;pointer-events:none;}
}
/* chat PRODIX integre au hero */
body.topbar-view .phero-chat{display:flex;flex-direction:column;gap:10px;max-width:700px;margin:0 auto 14px;text-align:left;max-height:48vh;overflow-y:auto;padding:18px;background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%);border-radius:24px;box-shadow:0 16px 50px rgba(0,0,0,.10);}
/* ── VRAIE interface de conversation PRODIX dans le hero (18/07) ── */
body.topbar-view .phero-panel{display:flex;flex-direction:column;max-width:1080px;height:calc(100vh - 215px);min-height:560px;margin:0 auto;background:#fff;border-radius:26px;box-shadow:0 24px 70px rgba(0,0,0,.14);overflow:visible;position:relative;text-align:left;}
body.topbar-view .phero-panel-head{position:absolute;top:-36px;right:22px;left:auto;transform:none;width:78px;height:78px;padding:0;border:none;border-radius:50%;background:rgba(255,255,255,.32);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);box-shadow:0 8px 26px rgba(0,0,0,.10);display:flex;align-items:center;justify-content:center;z-index:5;}
body.topbar-view .phero-panel-head>img{width:58px;height:58px;object-fit:contain;margin-top:9px;}
body.topbar-view .phph-t b{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:18px;letter-spacing:.06em;color:#1d1d1f;display:block;line-height:1;}
body.topbar-view .phph-t span{font-size:12px;color:var(--g2);display:block;margin-top:2px;}
body.topbar-view .phero-new{margin-left:auto;background:#f5f5f7;border:none;border-radius:999px;padding:8px 14px;font-family:'DM Sans',sans-serif;font-size:12.5px;font-weight:600;color:#1d1d1f;cursor:pointer;transition:background .15s;}
body.topbar-view .phero-new:hover{background:#e8e8ed;}
body.topbar-view .phero-panel .phero-chat{flex:1;max-height:none;max-width:none;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border-radius:0;margin:0;padding:50px 18px 16px;}
body.topbar-view .phero-panel .phero-box{margin:8px 14px 14px;flex-shrink:0;box-shadow:0 1px 6px rgba(0,0,0,.08);border:1px solid #ececf0;}
body.topbar-view .phero-convo .phero-tapis{opacity:.45;}
body.topbar-view .phero-convo .phero-inner{max-width:1010px;padding-top:20px;padding-bottom:28px;}
/* attente PRODIX : points qui dansent + texte tournant */
.px-dots{display:inline-flex;gap:3px;margin-right:8px;vertical-align:middle;}
.px-dots i{width:6px;height:6px;border-radius:50%;background:#a1a1a6;animation:pxdot 1.2s ease-in-out infinite;}
.px-dots i:nth-child(2){animation-delay:.15s;}
.px-dots i:nth-child(3){animation-delay:.3s;}
@keyframes pxdot{0%,60%,100%{opacity:.35;transform:translateY(0);}30%{opacity:1;transform:translateY(-3px);}}
.px-wait{color:var(--g2);}
/* transition accueil -> conversation */
body.topbar-view .phero-logo,body.topbar-view .phero-box{transition:opacity .2s ease,transform .2s ease;}
body.topbar-view .phero-out{opacity:0;transform:scale(.96) translateY(8px);}
@keyframes pheroPanelIn{from{opacity:0;transform:translateY(18px) scale(.985);}to{opacity:1;transform:none;}}
body.topbar-view .phero-panel-in{animation:pheroPanelIn .42s cubic-bezier(.32,.72,.28,1);}
/* panneau conversation : la barre de saisie prend toute la largeur, bas net */
body.topbar-view .phero-panel .phero-box{max-width:none;margin:6px 16px 16px;background:#f5f5f7;border:none;box-shadow:none;}
body.topbar-view .phero-panel .phero-box:focus-within{background:#fff;box-shadow:0 0 0 3px rgba(254,0,0,.22);}
body.topbar-view .phero-send:disabled{opacity:.55;}
/* bouton joindre un fichier dans la barre PRODIX */
body.topbar-view .phero-attach{flex-shrink:0;width:38px;height:38px;border-radius:999px;border:none;background:#e8e8ed;color:#1d1d1f;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;padding:0;}
body.topbar-view .phero-attach:hover{background:#dededf;}
/* historique d'offres : chips Reprendre sous la pilule d'accueil */
body.topbar-view .phero-hist{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:16px;}
body.topbar-view .phist-lbl{display:inline-flex;align-items:center;color:var(--g2);}
body.topbar-view .phist-chip{border:none;border-radius:999px;background:#fff;box-shadow:var(--sh-sm);padding:8px 14px;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;color:#1d1d1f;cursor:pointer;transition:background .15s;}
body.topbar-view .phist-chip:hover{background:#e8e8ed;}
/* badge PROMO -30% : pastille depolie, texte rouge Prodi */
body.apple-view .pcard-promo-overlay{position:absolute;top:10px;right:10px;left:auto;z-index:2;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:#FE0000;font-size:11px;font-weight:800;letter-spacing:.4px;padding:5.5px 10.5px;border-radius:999px;box-shadow:var(--sh-sm);}
/* topbar : menu Mandrins retire de la barre (vit dans Filtres avances) */
body.topbar-view .filters-panel .fg:has(#sb-msd-mandrin){display:none !important;}
/* conversation : plus de voile de fondu par-dessus le bas du panneau */
body.topbar-view .phero-convo .phero-fade{display:none;}
/* bouton Revenir : coin haut gauche du panneau conversation */
body.topbar-view #px-retour{position:absolute;top:14px;left:14px;z-index:6;border:none;border-radius:999px;background:#f5f5f7;color:#1d1d1f;font-family:'DM Sans',sans-serif;font-size:12.5px;font-weight:600;padding:8px 14px;cursor:pointer;transition:background .15s;}
body.topbar-view #px-retour:hover{background:#e8e8ed;}
/* conversation : page verrouillee, seul le fil du chat scrolle */
body.phero-lock{overflow:hidden;height:100vh;}
/* panda du panneau de conversation : retire (l'accueil garde le sien) */
body.topbar-view .phero-panel-head{display:none !important;}
/* intro lien client : couches GPU sur tout ce qui bouge (jank fix 18/07) */
.ctn-truck,.ctn-slide,.ctn-drop,.ctn-fk,.ctn-wheel,.ctn-fk-wheel,.ctn-door{will-change:transform;transform:translateZ(0);backface-visibility:hidden;}
.ctn-scene{contain:layout paint;}
/* ═══════ REFONTE RESPONSIVE topbar/hero — mobile & tablette (18/07) ═══════ */
@media(max-width:768px){
/* le nouveau parcours remplace l'ancien mobile : plus de tiroir ni loupe */
body.topbar-view .mob-search-head,body.topbar-view .mob-filter-head,body.topbar-view .mob-search-bar,body.topbar-view #mob-filter-btn{display:none !important;}
body.topbar-view .sidebar-col{display:block !important;}
body.topbar-view .filters-panel{display:flex !important;}
/* header capsule compacte en GRID : [logo · Liste] puis recherche 100% */
body.topbar-view header{top:0;padding:8px 8px 0;}
body.topbar-view .header-inner{display:grid !important;grid-template-columns:auto 1fr auto;grid-template-areas:"logo . liste" "search search search";align-items:center;height:auto !important;row-gap:8px;padding:8px 12px;border-radius:16px;}
body.topbar-view .logo-link{grid-area:logo;position:static !important;transform:none !important;}
body.topbar-view .hright{grid-area:liste;display:flex !important;margin:0 !important;}
body.topbar-view .header-search-group{grid-area:search;display:block !important;position:static !important;transform:none !important;width:auto;margin:0;}
body.topbar-view .header-search{display:flex !important;max-width:none;width:100%;}
body.topbar-view #f-refmin-top,body.topbar-view #f-refmax-top{flex:1 1 0 !important;width:auto !important;height:34px;font-size:13px;}
body.topbar-view #rbar-count{display:none !important;}
body.topbar-view .cart-wrap{display:flex !important;}
body.topbar-view #cart-btn{display:flex !important;height:34px;width:auto !important;padding:0 16px !important;background:#fff !important;border:1px solid var(--g3) !important;border-radius:999px !important;color:#1d1d1f !important;}
body.topbar-view #cart-btn svg{display:none;}
body.topbar-view #cart-btn .btn-panier-txt{display:inline !important;font-size:14px !important;font-weight:700 !important;color:#fff !important;}
body.topbar-view #cart-btn .cart-badge{background:#1d1d1f;color:#fff;}
body.topbar-view #offre-btn,body.topbar-view #fab-btn{display:flex !important;height:34px;width:auto !important;padding:0 14px !important;background:#fff !important;border:1px solid var(--g3) !important;border-radius:999px !important;color:#1d1d1f !important;}
body.topbar-view #offre-btn .offre-txt,body.topbar-view #fab-btn .offre-txt{font-size:14px !important;font-weight:700 !important;}
/* Album photo : même encre que Usine/Offre (il ressortait gris #555 = faux « pas gras », 17/08) */
body.topbar-view #album-btn .offre-txt{color:#1d1d1f !important;}
body.topbar-view #offre-wrap,body.topbar-view #fab-wrap{margin-right:6px;}
body.topbar-view .offre-menu{min-width:230px;}
/* barre de filtres : rangée dérulante horizontale */
body.topbar-view .body-wrap{display:block;padding:0 10px 24px;}
/* Safari iOS : la colonne filtres doit porter son PROPRE contexte au-dessus
du hero PRODIX, sinon les .msd-panel (fixed z2000) se peignent DERRIÈRE le
voile du hero (vécu 31/07 sur iPhone — Chrome n'est pas affecté).
z-index 99 = au-dessus du hero (z 2-5), sous le header sticky (z 100). */
body.topbar-view .body-wrap>.sidebar-col{position:relative;z-index:99;background:transparent;}
body.topbar-view .msd-panel{width:auto !important;min-width:240px;max-width:calc(100vw - 16px);}
body.topbar-view .filters-panel{position:static !important;top:auto;height:auto !important;border-right:none;background:transparent;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;gap:6px;padding:10px 4px 12px;-webkit-overflow-scrolling:touch;scrollbar-width:none;pointer-events:auto;}
body.topbar-view .filters-panel::-webkit-scrollbar{display:none;}
body.topbar-view .filters-panel .msd,body.topbar-view .filters-panel .fg{flex-shrink:0;}
body.topbar-view .filters-panel .msd-btn{width:auto !important;padding:8px 12px;font-size:13px;display:inline-flex !important;align-items:center !important;box-sizing:border-box;}
/* iOS (20/08) : la flèche ▾ (U+25BE) rend en EMOJI plus haut sur Safari → boutons
de tailles inégales (invisible sur Chrome). Fix : masquer le glyphe et dessiner
un chevron en CSS (bordures) → aucun glyphe, taille identique partout. */
body.topbar-view .filters-panel .msd-btn .msd-arrow{font-size:0 !important;width:8px !important;height:8px !important;min-width:8px !important;flex:0 0 8px !important;background:none !important;position:relative;margin-left:5px;}
body.topbar-view .filters-panel .msd-btn .msd-arrow::after{content:'' !important;position:absolute;top:1px;left:0;width:6px;height:6px;border-right:1.7px solid #86868b;border-bottom:1.7px solid #86868b;transform:rotate(45deg);background:none;}
body.topbar-view .fpill-photo,body.topbar-view .fpill-resa{padding:6px 11px !important;font-size:11.5px !important;}
/* 2e ligne : + / tags déroulants / tri dans le flux */
body.topbar-view #topbar-row2{padding:0 4px 8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
body.topbar-view #topbar-row2::-webkit-scrollbar{display:none;}
body.topbar-view #topbar-row2 #add-page-btn{position:static;order:-2;width:32px;height:32px;min-width:32px;}
body.topbar-view #topbar-row2 #tb-sort{position:static;order:99;margin-left:6px;}
body.topbar-view .tb-sort-btn{width:44px !important;height:32px !important;}
body.topbar-view #topbar-row2 .filter-chips{flex-wrap:nowrap;justify-content:flex-start;}
body.topbar-view #topbar-row2 .fchip{white-space:nowrap;flex-shrink:0;font-size:11.5px;padding:6px 8px 6px 11px;}
/* hero */
body.topbar-view #prodix-hero{min-height:calc(100dvh - 170px);border-radius:0 0 20px 20px;margin-bottom:16px;}
body.topbar-view .phero-inner{padding:26px 12px 46px;}
body.topbar-view .phero-logo{width:104px;height:104px;margin:-6px auto 20px;}
body.topbar-view .phero-logo img{width:78px;height:78px;}
body.topbar-view .phero-box-row{padding:8px 8px 8px 16px;gap:8px;}
body.topbar-view .phero-box textarea{font-size:15px;}
body.topbar-view .phero-send{width:38px;height:38px;}
body.topbar-view .phero-attach{width:32px;height:32px;}
body.topbar-view .phero-card{width:180px;}
body.topbar-view .phero-card .pcard-img{height:96px;}
body.topbar-view .phero-card .sc-title{font-size:14px !important;padding:5px 8px 2px !important;}
body.topbar-view .phero-card .sc-cap{font-size:7.5px;}
body.topbar-view .phero-card .sc-val{font-size:11px;}
body.topbar-view .phist-chip{font-size:12px;padding:7px 11px;}
/* panneau conversation plein écran */
body.topbar-view .phero-panel{max-width:none;width:100%;height:calc(100dvh - 150px);min-height:400px;border-radius:20px;}
body.topbar-view .phero-panel .phero-chat{padding:44px 10px 10px;}
body.topbar-view .phero-panel .phero-box{margin:6px 8px 10px;}
body.topbar-view #px-retour{top:10px;left:10px;padding:7px 12px;font-size:12px;}
body.topbar-view .phero-chat>div{max-width:94% !important;}
/* cartes étiquette : 2 colonnes, typo réduite */
body.topbar-view .pgrid{grid-template-columns:1fr 1fr !important;gap:8px !important;}
body.topbar-view .sc-card .pcard-img{height:150px;}
body.topbar-view .sc-title{font-size:16px !important;padding:6px 8px 3px !important;-webkit-text-stroke:.4px #000;}
body.topbar-view .sc-cap{font-size:7.5px !important;letter-spacing:.2px;}
body.topbar-view .sc-val{font-size:12px !important;letter-spacing:0;}
body.topbar-view .sc-val small{font-size:8px;}
body.topbar-view .sc-cell{padding:4px 5px !important;}
body.topbar-view .sc-add{width:26px;height:26px;}
body.topbar-view .sc-add::before{font-size:16px;}
/* + des cartes = MÊME style que l'ordi (cercle BLANC + ombre, « + » noir) — 29/08 Ethan */
body.apple-view .pgrid .sc-card .sc-price-main .sc-add{border:none !important;background:#fff !important;box-shadow:0 2px 9px rgba(0,0,0,.19) !important;}
body.apple-view .pgrid .sc-card .sc-price-main .sc-add::before{font-weight:700 !important;color:#1d1d1f !important;}
body.apple-view .pgrid .sc-card .sc-price-main .sc-add.added{background:#FE0000 !important;}
body.topbar-view .sc-count{font-size:10px;padding:3px 8px;}
body.topbar-view .pcard-promo-overlay,body.topbar-view .pcard-resa-overlay{font-size:9px;padding:4px 8px;}
/* Rétrécissage cartes MOBILE (29/08 Ethan) = même logique que desktop, hauteurs
de lignes fixes + réduites (polices mobiles plus petites → lignes plus courtes) */
body.apple-view .pgrid .sc-card .sc-grid{grid-template-rows:none !important;}
body.apple-view .pgrid .sc-card .sc-cell{height:26px !important;min-height:0 !important;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;padding-top:0 !important;padding-bottom:0 !important;}
body.apple-view .pgrid .sc-card .sc-cell:not(.sc-det-only):not(.sc-price-main) .sc-val{line-height:1 !important;flex-shrink:0 !important;}
body.apple-view .pgrid .sc-card .sc-cell.sc-title{height:22px !important;line-height:22px !important;display:block !important;}
body.apple-view .pgrid .sc-card .sc-cell.sc-det-only{height:21px !important;padding-top:4px !important;flex-direction:row !important;align-items:center;min-width:0 !important;overflow:hidden;} /* 30/08 : detail descendu de 4px (padding, pas margin — une marge laissait voir le fond zebre) */
/* 30/08 : detail sur UNE ligne + ellipse en mobile (la regle n'existait qu'en
desktop -> le texte passait sur 2 lignes et chevauchait la grille) */
body.apple-view .pgrid .sc-card .sc-cell.sc-det-only .sc-val{min-width:0;flex:1;display:block !important;-webkit-line-clamp:unset !important;white-space:nowrap !important;overflow:hidden;text-overflow:ellipsis;}
body.apple-view .pgrid .sc-card .sc-cell.sc-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;display:block !important;}
body.apple-view .pgrid .sc-card .sc-cell.sc-price-usine{height:29px !important;flex-direction:row !important;align-items:center;justify-content:flex-start;gap:6px;}
body.apple-view .pgrid .sc-card .sc-cell.sc-price-main{height:29px !important;flex-direction:row !important;align-items:center;justify-content:flex-start;gap:8px;}
body.apple-view .pgrid .sc-card .sc-price-main .sc-add{margin-left:auto !important;flex:0 0 auto;}
/* popup tonnage */
body.topbar-view #tonnage-bg>div{padding:22px !important;border-radius:18px !important;}
}
/* tablette portrait : cartes sur 3 colonnes, hero un peu réduit */
@media(min-width:769px) and (max-width:1024px){
body.topbar-view .pgrid{grid-template-columns:repeat(3,1fr);}
body.topbar-view .phero-card{width:220px;}
body.topbar-view .phero-panel{max-width:94vw;}
}
/* Laizes/Diamètre = sections du rail (curseurs comme Grammages) — visibilité « bobines seules » via updateFilterVisibility */
/* accueil : pastille panda retiree (19/07) */
body.topbar-view .phero-logo{display:none !important;}
/* ══ PERF iPhone/iPad (19/07) : flous live des badges coupes (3 zones de blur
par carte = scroll qui rame sur iOS), rails hero compacts sur mobile ══ */
@media (pointer:coarse){
.pcard-type-overlay,.pcard-photo-ref,.pcard-gsm-overlay,.pcard-ref-overlay,.pcard-qbadge{-webkit-backdrop-filter:none !important;backdrop-filter:none !important;}
body.apple-view .sc-count{-webkit-backdrop-filter:none !important;backdrop-filter:none !important;background:rgba(255,255,255,.95);}
body.apple-view .pcard-resa-overlay{-webkit-backdrop-filter:none !important;backdrop-filter:none !important;background:rgba(255,255,255,.95);}
}
/* PERF (desktop aussi) : flou live des badges de cartes coupe partout — le blur
sous une pastille quasi opaque n'est pas perceptible en scroll et coûte 2-3
recalculs de flou par carte à chaque frame. Fond remonté a .95 (= rendu déjà
en prod sur mobile) pour garder le contraste. Ne touche PAS les badges de
fiche/modale (pbig-ref/pbig-usine), uniques par page. */
body.apple-view .sc-count,
body.apple-view .pcard-resa-overlay,
body.apple-view .pcard-promo-overlay{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.95);}
@media (max-width:820px){
body.topbar-view .phero-tapis{gap:16px;}
body.topbar-view .phero-card{width:196px;}
body.topbar-view .phero-card .pcard-img{height:96px;}
body.topbar-view .phero-card .sc-title{font-size:14px !important;padding:5px 8px 2px !important;}
body.topbar-view .phero-card .sc-cap{font-size:7.5px;}
body.topbar-view .phero-card .sc-val{font-size:10.5px;}
body.topbar-view .phero-card .sc-cell{padding:4px 5px !important;}
}
/* ── DOUBLE CURSEUR GRAMMAGES (31/07) — panneau .msd-panel en mode slider ── */
.msd-slider-panel{padding:16px;max-height:none;overflow:visible;min-width:250px;}
.gsl{display:flex;flex-direction:column;gap:13px;}
.gsl-val{font-weight:700;font-size:15px;color:var(--ink);text-align:center;}
/* La piste capte le POINTEUR (drag maison, cf _buildGrammageSlider) ; les
inputs range sont purement visuels — Safari ignore pointer-events sur le
pseudo-élément thumb, ne jamais revenir aux 2 ranges superposés cliquables. */
.gsl-track{position:relative;height:34px;margin:6px 10px 0;cursor:pointer;touch-action:none;}
.gsl-btnval{margin-left:auto;padding-right:8px;font-weight:700;font-size:15.4px;color:#1d1d1f;white-space:nowrap;}
.gsl-track::before{content:'';position:absolute;left:0;right:0;top:15.5px;height:3px;border-radius:99px;background:#e3e3e6;}
.gsl-fill{position:absolute;top:15.5px;height:3px;border-radius:99px;background:#1d1d1f;pointer-events:none;}
.gsl-track input[type=range]{position:absolute;inset:0;width:100%;height:34px;margin:0;background:none;
pointer-events:none;-webkit-appearance:none;appearance:none;}
.gsl-track input[type=range]::-webkit-slider-runnable-track{background:transparent;height:34px;}
.gsl-track input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
width:14px;height:30px;margin-top:2px;border-radius:8px;background:#fff;border:1px solid #ececef;
box-shadow:0 1px 3px rgba(0,0,0,.22),0 3px 8px rgba(0,0,0,.12);}
.gsl-track input[type=range]::-moz-range-thumb{width:14px;height:30px;border-radius:8px;
background:#fff;border:1px solid #ececef;box-shadow:0 1px 3px rgba(0,0,0,.22),0 3px 8px rgba(0,0,0,.12);}
/* Bulles de valeur suivant chaque poignée (design F pilules + D bulles, choix Ethan) */
.gsl-bub{position:absolute;top:-30px;transform:translateX(-50%);background:#1d1d1f;color:#fff;
font-size:12.5px;font-weight:700;padding:4px 9px;border-radius:8px;white-space:nowrap;pointer-events:none;z-index:2;}
.gsl-bub::after{content:'';position:absolute;left:50%;top:100%;transform:translateX(-50%);
border:5px solid transparent;border-top-color:#1d1d1f;}
.gsl-bornes{display:flex;justify-content:space-between;font-size:11.5px;color:var(--g3);margin-top:-7px;}
/* Curseur CIE dans le menu Détails (même dessin, encart dans la liste) */
.gsl-cie{padding:12px 14px 12px;gap:11px;border-bottom:1px solid #ececf0;}
.gsl-cie .gsl-val{font-size:14px;}
/* ── ESSAI ?bas=1 : pilule PRODIX en barre basse fixe, grille en landing ── */
body.saisie-basse #px-dock{position:fixed;left:0;right:0;bottom:0;z-index:1500;
display:flex;justify-content:center;pointer-events:none;
padding:12px 12px calc(12px + env(safe-area-inset-bottom));}
body.saisie-basse #px-dock .phero-box{width:min(720px,100%);margin:0;
pointer-events:auto;border:none;box-shadow:0 6px 26px rgba(0,0,0,.16);}
body.saisie-basse #pgrid{padding-bottom:96px;}
body.saisie-basse footer{padding-bottom:110px;}
/* Segment BOBINE/FORMAT des tuiles = LE MÊME composant que le segment du
menu Offre (fusion 05/08) — seuls la taille et l'ombre de la piste diffèrent. */
body.saisie-basse .px-tuile-seg{display:flex;gap:2px;background:#f0f0f2;border-radius:999px;
padding:3px;box-shadow:var(--sh-md);}
body.saisie-basse .px-tuile-seg button{border:none;background:transparent;outline:none;
border-radius:999px;padding:10px 26px;font-family:'DM Sans',sans-serif;
font-weight:800;font-size:14.5px;letter-spacing:.3px;color:var(--g2);cursor:pointer;
transition:color .15s;}
body.saisie-basse .px-tuile-seg button:not(.on):hover{color:#1d1d1f;}
body.saisie-basse .px-tuile-seg button.on{background:#fff;color:#1d1d1f;box-shadow:var(--sh-sm);}
/* Tuiles qualités en landing (mêmes visuels que la vitrine) */
body.saisie-basse #px-tuiles{display:grid;grid-template-columns:1fr 1fr;gap:14px;
max-width:var(--gab);margin:0 auto;padding:10px 0 14px;}
body.saisie-basse .px-tuile{position:relative;overflow:hidden;border-radius:20px;
cursor:pointer;height:clamp(250px,38vh,440px);background:#eee;}
body.saisie-basse .px-tuile img{position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;transition:transform .5s ease;}
body.saisie-basse .px-tuile:hover img{transform:scale(1.04);}
body.saisie-basse .px-tuile-in{position:absolute;inset:0;z-index:2;display:flex;
flex-direction:column;align-items:center;gap:12px;
padding-top:clamp(10px,2.5vh,20px);}
body.saisie-basse .px-tuile h2{margin:0;font-family:'Bebas Neue',sans-serif;
font-weight:400;font-size:clamp(38px,4.4vw,64px);line-height:1;
letter-spacing:.02em;color:#111;}
body.saisie-basse .px-tuile.dark h2{color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.3);}
body.saisie-basse .px-tuile-btn{background:#fff;color:#111;border-radius:999px;
padding:9px 20px;font-weight:700;font-size:14.5px;
box-shadow:0 2px 12px rgba(0,0,0,.14);}
/* Bandeau « autres qualités » sous les tuiles — même dessin que la vitrine */
body.saisie-basse #px-band-wrap{max-width:1720px;margin:0 auto;padding:0 14px 130px;}
body.saisie-basse .px-band{display:flex;gap:12px;overflow-x:auto;
scroll-snap-type:x mandatory;scrollbar-width:none;
-webkit-overflow-scrolling:touch;padding:4px 0;}
body.saisie-basse .px-band::-webkit-scrollbar{display:none;}
body.saisie-basse .px-qcard{position:relative;flex:0 0 clamp(300px,36vw,500px);
aspect-ratio:2/1;overflow:hidden;scroll-snap-align:start;background:#000;
cursor:pointer;border-radius:22px;}
body.saisie-basse .px-qcard img{position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;display:block;}
body.saisie-basse .px-qcard::after{content:'';position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(0,0,0,0) 42%,rgba(0,0,0,.58) 100%);}
body.saisie-basse .px-qcard-title{position:absolute;left:18px;bottom:12px;z-index:2;
color:#fff;font-family:'Bebas Neue',sans-serif;font-size:26px;
letter-spacing:1.2px;line-height:1;text-shadow:0 1px 10px rgba(0,0,0,.4);}
body.saisie-basse .px-qcard-btn{position:absolute;right:12px;bottom:12px;z-index:2;
background:rgba(255,255,255,.95);color:#1d1d1f;border:none;border-radius:999px;
padding:9px 18px;font-family:'DM Sans',sans-serif;font-size:13.5px;
font-weight:600;cursor:pointer;}
body.saisie-basse .px-qcard:hover .px-qcard-btn{background:#fff;}
/* points de pagination : la pilule active se remplit (durée = _PER du JS) */
body.saisie-basse .px-band-dots{display:flex;gap:14px;justify-content:center;
align-items:center;margin-top:16px;}
body.saisie-basse .pxdot{width:10px;height:10px;border-radius:999px;border:none;
padding:0;background:#b6b6ba;cursor:pointer;position:relative;overflow:hidden;
transition:width .35s ease;}
body.saisie-basse .pxdot.on{width:58px;background:#d2d2d6;}
body.saisie-basse .pxdot.on::after{content:'';position:absolute;left:0;top:0;bottom:0;
width:10px;border-radius:999px;background:#1d1d1f;
animation:pxdotfill 5.5s linear forwards;}
body.saisie-basse .pxdot.on.still{background:#1d1d1f;}
body.saisie-basse .pxdot.on.still::after{animation:none;}
@keyframes pxdotfill{to{width:100%;}}
@media(max-width:768px){
body.saisie-basse #px-tuiles{grid-template-columns:1fr;gap:10px;padding:8px 10px 10px;}
body.saisie-basse .px-tuile{height:210px;}
body.saisie-basse .px-tuile h2{font-size:38px;}
body.saisie-basse .px-qcard{flex-basis:76vw;}
body.saisie-basse #px-band-wrap{padding:0 10px 120px;}
}
/* ===== DESKTOP : filtres en COLONNE GAUCHE (07/08, demande Ethan) =====
Le mobile (@media max-width:768px) reste en barre du haut, inchangé.
.body-wrap n'a que 2 enfants : .sidebar-col (filtres) + le contenu →
grid 2 colonnes propre. On ANNULE la barre horizontale topbar sur desktop. */
@media(min-width:769px){
/* Grille 2 colonnes : rail filtres (gauche) + contenu (droite) */
body.topbar-view .body-wrap{
position:relative;
display:grid;
grid-template-columns:270px minmax(0,1fr); /* 300→270 (−10 %, 17/08) */
gap:0; /* 17/08 : plus d'écart entre rail et tuiles */
align-items:start;
max-width:none;
margin:0;
padding:0 0 48px 0; /* 17/08 : ZÉRO gouttière à droite, le fond produits va au bord */
}
body.topbar-view .mob-filter-btn{display:none !important;}
/* Ancienne ligne titre FILTRES (#topbar-row2) masquée → le rail démarre flush sous le header */
body.topbar-view #topbar-row2{display:none !important;}
/* Header : collé en haut, PLEINE LARGEUR, logo à gauche, hauteur réduite (demande Ethan) */
body.apple-view header{top:0 !important;padding:0 !important;border-bottom:1px solid var(--border) !important;}
body.apple-view .header-inner{max-width:none !important;margin:0 !important;border-radius:0 !important;box-shadow:none !important;background:#fff !important;padding:0 24px !important;height:50px !important;}
body.apple-view .header-inner .logo-link{margin-left:0;} /* 20→10→0 (17/08, logo −10px ×2) */
/* Boutons header (Album photo · Usine · Offre · Liste) réduits ~ à la taille des
champs Réf article/Max (08/08 Ethan) : h 38px, texte 14.5px, padding resserré */
body.topbar-view .hright .btn-head{height:42px !important;min-height:0 !important;padding:0 18px !important;border:1px solid rgba(0,0,0,.07) !important;background:#fff !important;box-shadow:0 2px 10px rgba(0,0,0,.16) !important;} /* 17/08 : design pilule d'avant, juste plus démarqué (ombre portée) */
body.topbar-view .hright .btn-head .offre-txt,body.topbar-view .hright .btn-head .btn-panier-txt{font-size:16px !important;font-weight:700 !important;}
/* Album photo : même encre noire que Usine/Offre (héritait du gris .btn-head, 17/08) */
body.topbar-view #album-btn .offre-txt{color:#1d1d1f !important;}
body.topbar-view .hright .btn-head .btn-panier-txt+*,body.topbar-view .hright #cart-btn svg{width:18px !important;height:18px !important;}
/* Header +10 % (17/08 Ethan) : barre, logo, champs Réf */
body.topbar-view .header-inner{height:63px;}
body.topbar-view .logo-full{height:38.5px;}
/* Vue client (?s=) : header harmonisé au catalogue (18/08) — même logo, même hauteur, bouton Excel en pilule */
body.shared-view .header-inner{height:63px;}
body.shared-view .logo-full{height:38.5px;}
/* 18/08 (Ethan) : bouton Télécharger = MÊMES codes que Album photo (carte du
rail — arrondi 12px, liseré + ombre douce, 18.5px/700, hover #fafafa) */
body.shared-view .hright .btn-head{height:auto !important;min-height:0 !important;padding:9px 14px !important;border:1px solid rgba(0,0,0,.05) !important;border-radius:12px !important;background:#fff !important;box-shadow:0 2px 8px rgba(0,0,0,.10) !important;}
body.shared-view .hright .btn-head:hover{background:#fafafa !important;}
body.shared-view .hright #cart-btn svg{width:20px !important;height:20px !important;}
body.topbar-view #f-refmin-top,body.topbar-view #f-refmax-top{height:42px !important;font-size:15.5px !important;width:139px !important;}
/* Pas de trait au-dessus du footer (demande Ethan) */
body.topbar-view footer{border-top:none !important;}
/* Barre du haut de la colonne produits (déplacée en JS) : + à GAUCHE, tri à DROITE */
body.topbar-view #desk-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 2px 6px;min-height:34px;margin-top:-8px;}
/* Tonnage de la sélection filtrée, à côté du + (08/08 Ethan) */
body.topbar-view #desk-toolbar #tb-tons{flex:0 0 auto;order:0;font-family:'DM Sans',sans-serif;font-size:15px;color:var(--g2);white-space:nowrap;margin-left:8px;transform:translateY(3px);}
body.topbar-view #desk-toolbar #tb-tons:empty{display:none;}
body.topbar-view #desk-toolbar #tb-tons b{font-weight:800;color:#1d1d1f;font-size:16.5px;}
/* + = pastille BLANCHE (couleurs inversées avec le tri) */
body.topbar-view #desk-toolbar #add-page-btn{position:static !important;order:0;width:35.6px !important;height:35.6px !important;margin:0 !important;transform:translate(5px,3px);flex:0 0 auto !important;background:#fff !important;border:none !important;border-radius:999px !important;box-shadow:var(--sh-md);color:#1d1d1f !important;padding:0 !important;display:flex;align-items:center;justify-content:center;}
body.topbar-view #desk-toolbar #add-page-btn svg{width:18px;height:18px;stroke:#1d1d1f;}
/* chips des filtres actifs ENTRE le + et le tri */
body.topbar-view #desk-toolbar #filter-chips{order:1;flex:1 1 auto;display:flex !important;flex-wrap:wrap;gap:6px;margin:0;padding:0 6px;justify-content:center;align-items:center;max-width:none;transform:translateY(-5px);}
/* chips = pilules NEUTRES (blanc + ombre), comme le système d'origine (08/08) */
body.topbar-view #desk-toolbar #filter-chips .fchip{background:#fff !important;border:none !important;box-shadow:var(--sh-sm) !important;color:#1d1d1f !important;font-size:13px !important;font-weight:600 !important;padding:7px 10px 7px 14px !important;border-radius:999px !important;}
body.topbar-view #desk-toolbar #filter-chips .fchip button{color:var(--g2) !important;font-size:15px !important;}
body.topbar-view #desk-toolbar #filter-chips .fchip button:hover{color:#1d1d1f !important;}
body.topbar-view #desk-toolbar #tb-sort{position:static !important;order:2;width:auto;margin:0;}
/* .sidebar-col = colonne flex sticky ; rangée haute (tri/+/chips) AU-DESSUS des filtres */
body.topbar-view .sidebar-col{display:flex;flex-direction:column;gap:12px;}
/* Panneau filtres = liste verticale pleine largeur, carte blanche */
body.topbar-view .filters-panel{
order:2;
width:100% !important;
position:static !important;
display:flex !important;
flex-direction:column;
align-items:stretch;
justify-content:flex-start;
flex-wrap:nowrap !important;
gap:9px;
padding:16px;
height:auto !important;
overflow:visible !important;
background:#fff;
border-radius:0 0 16px 16px;
box-shadow:var(--sh-sm);
}
body.topbar-view .filters-panel .fg{width:100%;margin:0;}
body.topbar-view .filters-panel .msd{width:100% !important;}
/* Boutons filtres = PLEINE LARGEUR du rail (bat #sb-msd-type width:134px + .msd-btn width:auto!important) */
body.topbar-view .filters-panel .msd-btn,
body.topbar-view #sb-msd-type .msd-btn,
body.topbar-view #sb-msd-details .msd-btn,
body.topbar-view #sb-msd-grammage .msd-btn,
body.topbar-view #sb-msd-couleur .msd-btn,
body.topbar-view #sb-msd-format .msd-btn,
body.topbar-view #sb-msd-laize .msd-btn,
body.topbar-view #sb-msd-mandrin .msd-btn,
body.topbar-view #sb-msd-diametre .msd-btn,
body.topbar-view #sb-msd-poids .msd-btn,
body.topbar-view #tb-adv .msd-btn{width:100% !important;justify-content:space-between !important;padding:11px 14px !important;box-sizing:border-box;font-size:18.5px !important;font-weight:700 !important;color:#1d1d1f !important;}
/* Polices du rail +15% + plus noires/grasses (demande Ethan) */
body.topbar-view .filters-panel .format-pills .fpill{font-size:16.5px !important;font-weight:800 !important;}
body.topbar-view .filters-panel .fp-title{font-size:16.5px !important;font-weight:800 !important;color:#1d1d1f !important;}
body.topbar-view .filters-panel .gsl-val{font-size:17.5px !important;font-weight:800 !important;color:#1d1d1f !important;}
body.topbar-view .filters-panel .gsl-bornes span{font-size:16.5px !important;font-weight:700 !important;color:#48484a !important;}
body.topbar-view .filters-panel .msd-option,
body.topbar-view .filters-panel .msd-label{font-size:17.5px !important;font-weight:600 !important;color:#1d1d1f !important;}
body.topbar-view .filters-panel .msd-group-row{font-size:18.5px !important;font-weight:700 !important;color:#1d1d1f !important;}
body.topbar-view .filters-panel .msd-search-inp{font-size:17.5px !important;}
/* Flèche = SVG inline (20/08) — ancienne icône sliders supprimée */
body.topbar-view .filters-panel .msd-btn .msd-arrow{font-size:0 !important;background:none !important;}
body.topbar-view .filters-panel .fg:has([data-format]){display:block !important;order:-1;}
/* FILTRES AVANCÉS dépliés DIRECTEMENT dans le rail (08/08 Ethan) — plus de clic */
body.topbar-view .filters-panel #tb-adv .msd-panel{display:block !important;margin-top:2px !important;}
body.topbar-view .filters-panel #tb-adv .msd-btn{pointer-events:none;border:none !important;background:transparent !important;box-shadow:none !important;padding:8px 4px 1px !important;font-size:14.5px !important;font-weight:800 !important;color:var(--g2) !important;text-transform:uppercase;letter-spacing:.5px;}
body.topbar-view .filters-panel #tb-adv .msd-btn .msd-arrow{display:none !important;}
/* Compactage général du rail (08/08) : lignes avancées + slider plus serrés */
body.topbar-view .filters-panel .msd-group-row{padding-top:8px !important;padding-bottom:8px !important;}
body.topbar-view .filters-panel .gsl-track{margin:3px 12px 0 !important;}
/* HOMOGÉNÉITÉ (08/08 Ethan) : Offre, Type de papier, Détails = MÊME ligne plate
que les sections avancées (label + filet + chevron ›), plus de cartes/pilules */
body.topbar-view .filters-panel #sb-msd-type .msd-btn,
body.topbar-view .filters-panel #sb-msd-details .msd-btn,
body.topbar-view .filters-panel #sb-msd-couleur .msd-btn,
body.topbar-view .filters-panel #sb-msd-format .msd-btn{
width:100% !important;height:auto !important;min-height:0 !important;
border:none !important;border-bottom:1.5px solid #222 !important;
background:transparent !important;box-shadow:none !important;border-radius:0 !important;
padding:9px 12px !important;font-size:18.5px !important;font-weight:700 !important;
color:#1d1d1f !important;justify-content:space-between !important;}
/* chevron › à droite (on masque le ▾ / l'icône filtre et on pose un › en ::after) */
body.topbar-view .filters-panel #sb-msd-type .msd-arrow,
body.topbar-view .filters-panel #sb-msd-details .msd-arrow,
body.topbar-view .filters-panel #sb-msd-couleur .msd-arrow,
body.topbar-view .filters-panel #sb-msd-format .msd-arrow{
background:none !important;width:auto !important;height:auto !important;flex:none !important;
transform:none !important;font-size:0 !important;}
body.topbar-view .filters-panel #sb-msd-type .msd-arrow::after,
body.topbar-view .filters-panel #sb-msd-details .msd-arrow::after,
body.topbar-view .filters-panel #sb-msd-couleur .msd-arrow::after,
body.topbar-view .filters-panel #sb-msd-format .msd-arrow::after{
content:none !important;display:none !important;} /* glyph › SUPPRIMÉ — SVG inline (20/08) */
/* Rangée haute du rail : FILTRES + tri (⤓) + ajout (+) + chips — compacte */
body.topbar-view #topbar-row2{
display:none !important; /* masqué : chips/tri/+ déplacés ailleurs, le rail démarre flush */
}
body.topbar-view #topbar-row2 .fp-head{order:0;flex:1 1 auto;border:none !important;padding:0;margin:0;}
body.topbar-view #topbar-row2 .fp-title{display:block;font-size:15px;}
body.topbar-view #topbar-row2 .pager-top{display:none !important;} /* scroll infini desktop */
body.topbar-view #topbar-row2 .filter-chips{order:5;flex:1 1 100%;justify-content:flex-start;margin:0;padding:0;}
/* Tri ⤓ = pastille ronde NOIRE (couleurs inversées avec le +) */
body.topbar-view #tb-sort .tb-sort-btn{width:37.3px !important;height:37.3px !important;border-radius:999px;background:#fff !important;border:none !important;box-shadow:var(--sh-md);transform:translateY(3px);}
body.topbar-view #desk-toolbar #tb-sort .tb-sort-btn svg{stroke:#1d1d1f;width:17.6px !important;height:17.6px !important;}
/* BOBINE / FORMAT : contrôle SEGMENTÉ (piste grise + pastille blanche active) */
/* Segments BOBINE/FORMAT des tuiles RETIRÉS sur desktop (le rail a le sien) */
body.saisie-basse .px-tuile-seg{display:none !important;}
/* Tuiles : plus BASSES (6 visibles sans scroll) + remplissent la colonne jusqu'au rail */
body.saisie-basse #px-tuiles{max-width:none !important;margin:0 !important;}
body.saisie-basse .px-tuile{height:250px !important;}
/* Titres des tuiles en BAS À GAUCHE (comme les cartes de la bande) */
body.saisie-basse .px-tuile-in{align-items:flex-start !important;justify-content:flex-end !important;padding:0 24px clamp(14px,3vh,24px) 28px !important;gap:0 !important;background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,.08) 32%,transparent 55%) !important;}
body.saisie-basse .px-tuile h2{text-align:left !important;width:100%;color:#fff !important;text-shadow:0 1px 10px rgba(0,0,0,.35);}
/* Cartes du bandeau = MÊME taille que les tuiles (2 par vue), rangées uniformes + ALIGNÉES */
body.saisie-basse #px-band-wrap{max-width:none !important;margin:0 !important;padding:0 0 20px !important;}
body.saisie-basse .px-band{gap:14px !important;padding:0 !important;}
body.saisie-basse .px-qcard{flex:0 0 calc(50% - 7px) !important;height:225px !important;aspect-ratio:auto !important;}
/* Grille articles = remplit toute la colonne (plus de centrage max-width qui laissait un vide à gauche) */
body.topbar-view .pgrid{max-width:none !important;margin:0 !important;}
/* Hauteur UNIFORME des lignes de carte : 55px, titre 45px (demande Ethan) */
body.apple-view .pgrid .sc-card .sc-grid{grid-template-rows:none !important;}
body.apple-view .pgrid .sc-card .sc-cell{height:30px !important;min-height:0 !important;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;}
/* Valeurs de carte : line-height assez ample pour ne pas rogner le haut des
glyphes (ex. « Argent ») malgré overflow:hidden (ellipsis) — 08/08 Ethan */
body.apple-view .pgrid .sc-card .sc-cell:not(.sc-det-only):not(.sc-price-main) .sc-val{line-height:1 !important;flex-shrink:0 !important;}
body.apple-view .pgrid .sc-card .sc-cell:not(.sc-det-only):not(.sc-price-main) .sc-cap{flex-shrink:0 !important;}
body.apple-view .pgrid .sc-card .sc-cell.sc-title{height:26px !important;display:block !important;line-height:26px !important;padding-top:0 !important;padding-bottom:0 !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
body.apple-view .pgrid .sc-card .sc-cell.sc-det-only{height:22px !important;display:flex !important;flex-direction:row !important;align-items:center;min-width:0 !important;overflow:hidden;}
body.apple-view .pgrid .sc-card .sc-cell.sc-det-only .sc-val{min-width:0;flex:1;display:block !important;-webkit-line-clamp:unset !important;white-space:nowrap !important;overflow:hidden;text-overflow:ellipsis;}
/* Ligne PRIX en CELLULES GRID (span 2) : USINE (gauche) | PRIX + bouton (droite),
alignées PILE sur les colonnes du dessus (COULEUR/POIDS) grâce au grid. */
body.apple-view .pgrid .sc-card .sc-cell.sc-price-usine{height:26px !important;padding:2px 5px 2px 8px !important;display:flex !important;flex-direction:row !important;align-items:center !important;justify-content:flex-start;gap:7px;overflow:hidden;}
body.apple-view .pgrid .sc-card .sc-cell.sc-price-main{height:26px !important;padding:2px 3px 2px 8px !important;display:flex !important;flex-direction:row !important;align-items:center !important;justify-content:flex-start;gap:12px;}
body.apple-view .pgrid .sc-card .sc-price-val{font-size:19px !important;font-weight:800 !important;line-height:1 !important;}
/* + de carte = MÊME design que le + de la barre outils (#add-page-btn) :
cercle blanc, pas de bordure, ombre var(--sh-md), + gras noir (08/08 Ethan). */
/* + INVERSÉ (17/08 Ethan) : fond noir, signe blanc ; en liste = rouge + poubelle */
body.apple-view .pgrid .sc-card .sc-price-main .sc-add{width:28px !important;height:28px !important;flex:0 0 auto;margin-left:auto !important;border:none !important;background:#fff !important;box-shadow:0 2px 9px rgba(0,0,0,.19) !important;}
body.apple-view .pgrid .sc-card .sc-price-main .sc-add::before{font-size:18px !important;font-weight:700 !important;color:#1d1d1f !important;}
body.apple-view .pgrid .sc-card .sc-price-main .sc-add:hover{border:none !important;background:#1d1d1f !important;box-shadow:var(--sh-md) !important;}
body.apple-view .pgrid .sc-card .sc-price-main .sc-add.added{background:#FE0000 !important;}
body.apple-view .pgrid .sc-card .sc-price-main .sc-add.added:hover{background:#cc0000 !important;}
body.apple-view .pgrid .sc-card .sc-price-main .sc-add.added::before{content:'';width:15px;height:15px;}
/* Barre PRODIX du bas masquée POUR LE MOMENT (desktop) — réactivable en retirant cette ligne */
body.saisie-basse #px-dock{display:none !important;}
/* + et tri ⤓ (barre) masqués sur le LANDING (inutiles avant d'avoir filtré) */
body.saisie-basse #desk-toolbar{display:none !important;}
/* Boutons « Voir le stock » retirés (le clic sur la tuile entre déjà dans le stock) */
body.saisie-basse .px-qcard-btn,body.saisie-basse .px-tuile-cta{display:none !important;}
/* Segment Bobine/Format = MÊME style que les cartes du rail (17/08) :
blanc flottant, ombre douce, sans bordure — actif = fond noir. */
body.topbar-view .filters-panel .format-pills{display:flex !important;width:100% !important;margin:0 !important;position:relative;grid-template-columns:none !important;gap:4px;background:transparent;border-radius:0;padding:0;box-shadow:none;}
/* 23/08 Ethan : contour fin visible pour que ça se lise comme des boutons */
body.topbar-view .filters-panel .format-pills .fpill{flex:1 1 0 !important;position:relative;z-index:1;border:none !important;background:#fff !important;border:1px solid #d2d2d7 !important;outline:none;border-radius:12px !important;box-shadow:0 2px 8px rgba(0,0,0,.10) !important;padding:9px 0 !important;width:auto !important;font-family:'DM Sans',sans-serif;font-weight:700;color:#1d1d1f !important;box-shadow:none !important;}
body.topbar-view .filters-panel .format-pills .fpill:not(.active):hover{background:#fafafa !important;}
body.topbar-view .filters-panel .format-pills .fpill.active{background:#222 !important;color:#fff !important;}
/* Bouton « Offre » en HAUT du rail (déplacé du header en JS), pleine largeur */
body.topbar-view .filters-panel #offre-wrap{order:-2;width:100%;position:relative;margin-bottom:2px;}
body.topbar-view .filters-panel #offre-wrap .btn-head{width:100% !important;justify-content:space-between !important;}
/* Tous les menus du rail se déroulent INLINE (partie du panneau, pas d'overlay
flottant) — le rail s'allonge. S'ouvre/ferme via .show (toggleMsd). */
body.topbar-view .filters-panel .msd:not(#sb-msd-type):not(#sb-msd-details) .msd-panel{position:static !important;inset:auto !important;width:100% !important;min-width:0 !important;max-width:none !important;transform:none !important;box-shadow:none !important;border:none !important;margin:6px 0 0 !important;background:transparent !important;max-height:none !important;overflow-x:clip;}
/* Type de papier ET Détails = dropdowns FLOTTANTS qui SURVOLENT le panneau (ne le
rallongent pas), largeur du rail, ~6 items visibles puis SCROLL. */
body.topbar-view #sb-msd-type .msd-panel,
body.topbar-view #sb-msd-details .msd-panel{position:absolute !important;top:calc(100% + 4px) !important;left:0 !important;right:auto !important;inset-inline:0 auto !important;transform:none !important;width:100% !important;min-width:0 !important;max-width:none !important;max-height:344px !important;overflow-y:auto !important;overflow-x:hidden;box-sizing:border-box;}
/* Rail = largeur FIXE 270px (300→270 le 17/08, −10 %), RIEN ne la bouge —
garder cette valeur ET grid-template-columns du .body-wrap SYNCHRO */
body.topbar-view .sidebar-col{width:270px !important;min-width:270px !important;max-width:270px !important;box-sizing:border-box;position:sticky;top:52px;align-self:start;}
body.topbar-view .filters-panel{box-sizing:border-box;max-width:100%;}
body.topbar-view .filters-panel .msd-option{white-space:normal !important;}
body.topbar-view .filters-panel .msd-label{white-space:normal !important;overflow-wrap:anywhere;min-width:0;}
/* GRAMMAGES : ACCORDÉON (17/08) — fermé = juste « Grammages » + flèche,
clic = le curseur se déplie dans la carte (classe .gsl-open posée en JS) */
body.topbar-view #sb-msd-grammage .msd-btn{pointer-events:auto;background:transparent !important;box-shadow:none !important;border:none !important;font-weight:700;cursor:pointer;}
body.topbar-view #sb-msd-grammage .gsl-btnval{display:none !important;}
body.topbar-view #sb-msd-grammage.gsl-open .gsl-btnval{display:inline !important;margin-left:auto;padding-right:8px !important;font-size:15.5px;font-weight:700;color:#48484a;white-space:nowrap;}
body.topbar-view #sb-msd-grammage .msd-btn .msd-arrow{display:inline-block;background:none !important;width:auto !important;height:auto !important;flex:none !important;font-size:0 !important;transform:none !important;}
body.topbar-view #sb-msd-grammage .msd-btn .msd-arrow::after{content:none !important;display:none !important;} /* glyph › Grammages SUPPRIMÉ — SVG inline (20/08) */
body.topbar-view #sb-msd-grammage .gsl-val{display:none;}
body.topbar-view #sb-msd-grammage .gsl-bornes{display:none !important;}
body.topbar-view #sb-msd-grammage .msd-panel{position:static !important;inset:auto !important;display:none !important;width:100% !important;min-width:0 !important;max-width:none !important;transform:none !important;box-shadow:none !important;border:none !important;padding:4px 2px 0 !important;margin:0 !important;background:transparent !important;}
body.topbar-view #sb-msd-grammage.gsl-open .msd-panel{display:block !important;}
/* Laize / Ø / Poids = DUPLICATION exacte de l'accordéon-curseur Grammages (29/08) */
body.topbar-view #sb-msd-laize .msd-btn,body.topbar-view #sb-msd-diametre .msd-btn,body.topbar-view #sb-msd-poids .msd-btn{pointer-events:auto;background:transparent !important;box-shadow:none !important;border:none !important;font-weight:700;cursor:pointer;}
body.topbar-view #sb-msd-laize .gsl-btnval,body.topbar-view #sb-msd-diametre .gsl-btnval,body.topbar-view #sb-msd-poids .gsl-btnval{display:none !important;}
body.topbar-view #sb-msd-laize.gsl-open .gsl-btnval,body.topbar-view #sb-msd-diametre.gsl-open .gsl-btnval,body.topbar-view #sb-msd-poids.gsl-open .gsl-btnval{display:inline !important;margin-left:auto;padding-right:8px !important;font-size:13.5px;font-weight:700;color:#48484a;white-space:nowrap;}
body.topbar-view #sb-msd-grammage .msd-btn-label,body.topbar-view #sb-msd-laize .msd-btn-label,body.topbar-view #sb-msd-diametre .msd-btn-label,body.topbar-view #sb-msd-poids .msd-btn-label{flex:0 0 auto;white-space:nowrap;}
body.topbar-view #sb-msd-laize .msd-btn .msd-arrow,body.topbar-view #sb-msd-diametre .msd-btn .msd-arrow,body.topbar-view #sb-msd-poids .msd-btn .msd-arrow{display:inline-block;background:none !important;width:auto !important;height:auto !important;flex:none !important;font-size:0 !important;transform:none !important;}
body.topbar-view #sb-msd-laize .gsl-val,body.topbar-view #sb-msd-diametre .gsl-val,body.topbar-view #sb-msd-poids .gsl-val{display:none;}
body.topbar-view #sb-msd-laize .gsl-bornes,body.topbar-view #sb-msd-diametre .gsl-bornes,body.topbar-view #sb-msd-poids .gsl-bornes{display:none !important;}
body.topbar-view #sb-msd-laize .msd-panel,body.topbar-view #sb-msd-diametre .msd-panel,body.topbar-view #sb-msd-poids .msd-panel{position:static !important;inset:auto !important;display:none !important;width:100% !important;min-width:0 !important;max-width:none !important;transform:none !important;box-shadow:none !important;border:none !important;padding:4px 2px 0 !important;margin:0 !important;background:transparent !important;}
body.topbar-view #sb-msd-laize.gsl-open .msd-panel,body.topbar-view #sb-msd-diametre.gsl-open .msd-panel,body.topbar-view #sb-msd-poids.gsl-open .msd-panel{display:block !important;}
body.topbar-view .filters-panel #sb-msd-laize,body.topbar-view .filters-panel #sb-msd-diametre,body.topbar-view .filters-panel #sb-msd-poids{border:1px solid rgba(0,0,0,.05);border-radius:12px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.10);margin:0;}
body.topbar-view .filters-panel #sb-msd-laize .msd-btn,body.topbar-view .filters-panel #sb-msd-diametre .msd-btn,body.topbar-view .filters-panel #sb-msd-poids .msd-btn{border:none !important;background:transparent !important;box-shadow:none !important;border-radius:11px !important;padding:9px 14px !important;margin:0 !important;width:100% !important;}
body.topbar-view .filters-panel #sb-msd-laize .msd-panel,body.topbar-view .filters-panel #sb-msd-diametre .msd-panel,body.topbar-view .filters-panel #sb-msd-poids .msd-panel{margin:0 !important;padding:0 5px 6px !important;background:transparent !important;}
}
/* ── Segment BOBINE|FORMAT harmonisé partout sur le dessin « contour noir »
(17/08 Ethan) : menu Offre + tuiles landing = même style que le rail. ── */
.offre-seg-forme{background:transparent !important;border-radius:0 !important;padding:0 6px !important;gap:8px !important;box-shadow:none !important;}
.offre-seg-forme .offre-seg-btn{border:1.5px solid #222 !important;border-radius:7px !important;background:#fff !important;color:#222 !important;font-size:12px !important;font-weight:700 !important;letter-spacing:.8px;text-transform:uppercase;padding:8px 0 !important;box-shadow:none !important;}
.offre-seg-forme .offre-seg-btn:not(.on):not(:disabled):hover{background:#f5f5f3 !important;}
.offre-seg-forme .offre-seg-btn.on{background:#222 !important;border-color:#222 !important;color:#fff !important;}
body.saisie-basse .px-tuile-seg{background:transparent !important;border-radius:0 !important;padding:0 !important;gap:8px !important;box-shadow:none !important;}
body.saisie-basse .px-tuile-seg button{border:1.5px solid #222 !important;border-radius:7px !important;background:#fff !important;color:#222 !important;font-weight:700 !important;letter-spacing:.8px;text-transform:uppercase;box-shadow:none !important;}
body.saisie-basse .px-tuile-seg button:not(.on):hover{background:#f5f5f3 !important;}
body.saisie-basse .px-tuile-seg button.on{background:#222 !important;border-color:#222 !important;color:#fff !important;}
/* Chevrons du rail vers le BAS (17/08 Ethan) : › tourné 90°, ouvert = vers le haut */
body.topbar-view .filters-panel .mgr-arrow{display:inline-block;transform:rotate(90deg);transition:transform .15s;}
body.topbar-view .filters-panel .msd-group-row.open .mgr-arrow{transform:rotate(-90deg);}
/* BOBINE/FORMAT à la même taille que Type de papier (18.5px, 17/08) */
body.topbar-view .filters-panel .format-pills .fpill{font-size:18.5px !important;padding:9px 0 !important;}
/* ── Rail 17/08 v3 : style APPLE « réglages » — une rangée par filtre,
cartes blanches flottantes (ombre, sans bordure), UNE colonne, compact. ── */
@media(min-width:769px){
/* le panneau devient un fond discret, les rangées portent le blanc */
body.topbar-view .filters-panel{background:transparent !important;box-shadow:none !important;padding:10px 4px 20px !important;gap:4px !important;}
body.topbar-view .filters-panel #sb-msd-type .msd-btn,
body.topbar-view .filters-panel #sb-msd-details .msd-btn,
body.topbar-view .filters-panel #sb-msd-couleur .msd-btn,
body.topbar-view .filters-panel #sb-msd-format .msd-btn{
border:1px solid rgba(0,0,0,.05) !important;border-radius:12px !important;
background:#fff !important;box-shadow:0 2px 8px rgba(0,0,0,.10) !important;
padding:9px 14px !important;margin:0 !important;}
body.topbar-view .filters-panel .msd-btn:hover{background:#fafafa !important;}
/* Grammages : une carte avec le curseur dedans */
body.topbar-view .filters-panel #sb-msd-grammage{border:1px solid rgba(0,0,0,.05);border-radius:12px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.10);margin:0;}
body.topbar-view .filters-panel #sb-msd-grammage .msd-btn{border:none !important;background:transparent !important;box-shadow:none !important;border-radius:11px !important;padding:9px 14px !important;margin:0 !important;width:100% !important;}
body.topbar-view .filters-panel #sb-msd-grammage .msd-panel{margin:0 !important;padding:0 5px 6px !important;background:transparent !important;}
/* Avancés : mêmes cartes, UNE colonne */
body.topbar-view .filters-panel #tb-adv .msd-panel{display:block !important;}
body.topbar-view .filters-panel .msd-group-row{
border:1px solid rgba(0,0,0,.05) !important;border-radius:12px !important;
background:#fff !important;box-shadow:0 2px 8px rgba(0,0,0,.10) !important;
padding:9px 14px !important;margin:0 0 4px !important;font-size:18.5px !important;}
body.topbar-view .filters-panel .msd-group-row:hover{background:#fafafa !important;}
/* Titre FILTRES AVANCÉS : petites capitales grises, aéré */
body.topbar-view .filters-panel #tb-adv .msd-btn{border:none !important;background:transparent !important;box-shadow:none !important;margin:4px 0 2px !important;}
}
/* ── Démarcation rail / produits (17/08, ESSAI) : la zone des tuiles a son
propre fond plus soutenu — les cartes blanches ressortent. ── */
@media(min-width:769px){
body.topbar-view .body-wrap>div:not(.sidebar-col){background:#e4e4ea;border-radius:16px 0 0 16px;padding:10px 12px 16px;min-height:70vh;}
/* rail : fond légèrement teinté distinct (17/08 ESSAI) */
body.topbar-view .body-wrap>.sidebar-col{background:transparent;border-radius:0;box-shadow:none;}
/* toute la colonne gauche est blanche jusqu'en bas (pas que le panneau sticky) */
body.topbar-view .body-wrap{background:linear-gradient(90deg,#fff 270px,transparent 270px);}
body.topbar-view .filters-panel{padding:10px 8px 20px !important;}
}
/* Colonne gauche BLANCHE toute hauteur (17/08) — posé en fin de fichier car
une règle background .body-wrap plus spécifique l'écrasait plus haut. */
@media(min-width:769px){
body.topbar-view .body-wrap{background:linear-gradient(90deg,#f0f0f4 270px,#f5f5f7 270px) !important;}
}
/* Rail v4 (17/08) : titre de section aéré, chevrons gris doux */
@media(min-width:769px){
body.topbar-view .filters-panel #tb-adv .msd-btn{margin:10px 0 2px !important;color:#1d1d1f !important;}
}
@media(min-width:769px){
body.apple-view .pgrid .sc-card .sc-price-main .sc-add:hover::before{color:#fff !important;}
}
/* Ma Liste = même pilule que Album photo/Usine/Offre (17/08) */
@media(min-width:769px){
body.topbar-view #cart-btn{height:42px !important;padding:0 18px !important;border:1px solid rgba(0,0,0,.07) !important;background:#fff !important;box-shadow:0 2px 10px rgba(0,0,0,.16) !important;border-radius:999px !important;}
body.topbar-view #cart-btn .btn-panier-txt{font-size:16px !important;font-weight:700 !important;color:#1d1d1f !important;}
}
/* 17/08 (Ethan) : bouton scanner QR du header masqué — « inutile » */
body.topbar-view .dh-scan-btn{display:none !important;}
/* 17-18/08 (Ethan) : poubelle « Vider la liste » retirée du header
(on gère la liste dans le tiroir Ma Liste) */
body.topbar-view #cart-clear-btn{display:none !important;}
/* Ma Liste : camion visible + même graisse que les autres boutons (17-18/08) */
@media(min-width:769px){
body.topbar-view #cart-btn svg{display:inline-block !important;}
body.topbar-view #cart-btn .btn-panier-txt{font-size:16px !important;font-weight:700 !important;}
}
/* 18/08 (Ethan) : boutons du header = EXACTEMENT la forme des cartes du rail
(arrondi 12px, liseré + ombre douce identiques, police 18.5px/700) */
@media(min-width:769px){
body.topbar-view .hright .btn-head,
body.topbar-view #cart-btn{
height:auto !important;padding:9px 14px !important;
border:1px solid rgba(0,0,0,.05) !important;border-radius:12px !important;
background:#fff !important;box-shadow:0 2px 8px rgba(0,0,0,.10) !important;}
body.topbar-view .hright .btn-head .offre-txt,
body.topbar-view .hright .btn-head .btn-panier-txt,
body.topbar-view #cart-btn .btn-panier-txt{
font-size:18.5px !important;font-weight:700 !important;color:#1d1d1f !important;}
body.topbar-view .hright .btn-head:hover,
body.topbar-view #cart-btn:hover{background:#fafafa !important;}
}
@media(min-width:769px){
body.topbar-view #cart-btn img{height:23px !important;width:auto;} /* camion calé sur la hauteur texte */
}
/* ── CARTE v2 (18/08, inspirée ligne liste ethanelb) ── */
.nc2{display:flex;flex-direction:column;}
.nc2 .nc-body{display:flex;flex-direction:column;flex:1;background:#fff;}
.nc2 .nc-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:11px 13px 0;}
.nc2 .nc-title{font-family:'Bebas Neue',sans-serif;font-size:21px;letter-spacing:.4px;line-height:1;color:#111;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nc2 .nc-gsm{font-family:'Bebas Neue',sans-serif;font-size:17px;color:#111;flex-shrink:0;line-height:1;}
.nc2 .nc-sub{padding:5px 13px 0;font-size:13.5px;color:#6e6e73;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nc2 .nc-foot{display:flex;align-items:center;gap:8px;padding:10px 11px 11px 13px;margin-top:auto;}
.nc2 .nc-ref{font-size:12.5px;font-weight:600;color:#48484a;background:#f2f2f6;border-radius:6px;padding:4px 8px;display:inline-flex;align-items:center;gap:5px;cursor:pointer;white-space:nowrap;}
.nc2 .nc-ref:hover{background:#e8e8ee;}
.nc2 .nc-price{color:#FE0000;font-weight:800;font-size:16px;margin-left:auto;white-space:nowrap;}
.nc2 .nc-kgs{font-weight:800;font-size:16px;color:#111;white-space:nowrap;}
.nc2 .nc-kgs small{font-size:11.5px;font-weight:700;}
/* + de la carte v2 : blanc/noir, en liste = rouge poubelle (mêmes codes qu'avant) */
body.topbar-view .nc2 .sc-add{width:28px !important;height:28px !important;flex:0 0 auto;border:none !important;background:#fff !important;box-shadow:0 2px 9px rgba(0,0,0,.19) !important;}
body.topbar-view .nc2 .sc-add::before{font-size:18px !important;font-weight:700 !important;color:#1d1d1f !important;}
body.topbar-view .nc2 .sc-add:hover{background:#1d1d1f !important;}
body.topbar-view .nc2 .sc-add:hover::before{color:#fff !important;}
body.topbar-view .nc2 .sc-add.added{background:#FE0000 !important;}
body.topbar-view .nc2 .sc-add.added:hover{background:#cc0000 !important;}
body.topbar-view .nc2 .sc-add.added::before{content:'';width:15px;height:15px;}
/* ── Tiroir Ma Liste calé sur le modèle ethanelb (18/08) ── */
body.apple-view .ci-laize{text-transform:uppercase;font-size:14.5px;font-weight:800;letter-spacing:.3px;}
body.apple-view .ci-name{color:#6e6e73;font-size:13px;}
body.apple-view .ci-gsm{font-size:17px;}
body.apple-view .ci-price{font-size:14px !important;font-weight:800 !important;}
body.apple-view .ci-kgs{font-size:15px;}
/* ── Tiroir Ma Liste : MINI-ÉTIQUETTE façon carte catalogue (18/08 v2) ── */
body.apple-view .cie-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#e8e8e4;border:1px solid #e8e8e4;border-radius:6px;overflow:hidden;margin-top:5px;}
body.apple-view .cie-cell{background:#fff;padding:4px 8px;}
body.apple-view .cie-cap{font-size:8.5px;font-weight:700;letter-spacing:.7px;color:#86868b;}
body.apple-view .cie-val{font-size:13.5px;font-weight:700;color:#111;line-height:1.15;}
body.apple-view .cie-val small{font-size:10px;font-weight:600;}
/* Carte liste 3 col (18/08) : titre+poubelle / grammage-laize-couleur / poids-réf-prix, photo seule dehors */
body.apple-view .cie-grid.cie-g4{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:0;}
body.apple-view .cie-g4 .cie-cell{padding:3px 7px;}
body.apple-view .cie-g4 .cie-cap{font-size:9.5px;}
body.apple-view .cie-g4 .cie-val{font-size:14px;}
body.apple-view .cie-g4 .cie-title{grid-column:1/-1;font-size:14.5px;font-weight:800;color:#111;letter-spacing:.2px;line-height:1.2;display:flex;align-items:center;gap:6px;min-width:0;padding:4px 7px;}
body.apple-view .cie-g4 .cie-title-txt{flex:1;min-width:0;}
body.apple-view .cie-g4 .cie-rm{min-width:0;min-height:0;width:auto;height:auto;margin:0;padding:0;flex-shrink:0;color:var(--red);}
body.apple-view .cie-g4 .cie-rm:hover{color:#cc0000;}
/* Cadenas ORANGE dans la carte du tiroir « Ma Liste » quand l'article est réservé (28/08). */
.cie-lock{display:inline-flex;align-items:center;flex-shrink:0;color:#ea8600;line-height:0;}
/* Clients externes / accès sans prix (body.hide-reserved) : les réservés sont
masqués du catalogue → le filtre Réservé/Dispo n'a plus de sens, on le cache. */
body.hide-reserved .fpill-resa{display:none !important;}
body.hide-reserved .fd-section:has(.fpill-resa){display:none !important;}
body.apple-view .cie-g4 .cie-ref{cursor:pointer;}
body.apple-view .cie-g4 .cie-ref:hover{background:#f6f6f4;}
body.apple-view .cie-g4 .cie-ref .cie-val{font-family:monospace;display:flex;align-items:center;gap:4px;}
body.apple-view .ci-laize{text-transform:uppercase;font-family:'Bebas Neue',sans-serif;font-size:17px;font-weight:400;letter-spacing:.5px;}
body.apple-view .ci-gsm{display:none;} /* le grammage vit dans la grille */
body.apple-view .ci-foot{margin-top:6px;}
/* 18/08 : téléphone — Ma Liste = juste le CAMION, pilule compacte */
@media(max-width:768px){
body.topbar-view #cart-btn{padding:5px 12px !important;min-width:0 !important;width:auto !important;}
body.topbar-view #cart-btn .btn-panier-txt{display:none !important;}
body.topbar-view #cart-btn img{height:28.7px !important;width:auto;} /* +10% cumulé (26→28,7) Ethan 26/08 */
}
/* ── 18/08 téléphone : TOUS les filtres en pilules individuelles dans la barre
défilante (le groupe « Filtres avancés » est dissous, chaque section devient
une pilule ; son panneau s'ouvre en surcouche pleine largeur). ── */
@media(max-width:768px){
body.topbar-view .filters-panel #tb-adv>.msd-btn{display:none !important;}
body.topbar-view .filters-panel #tb-adv{display:contents;}
body.topbar-view .filters-panel #tb-adv>.msd-panel{display:contents !important;}
body.topbar-view .filters-panel .msd-group-row{flex:0 0 auto;border:none !important;border-radius:999px !important;background:#fff !important;padding:8px 14px !important;margin:0 !important;font-size:14.5px !important;white-space:nowrap;box-shadow:0 1px 4px rgba(0,0,0,.10);}
body.topbar-view .filters-panel #tb-adv .adv-pop{position:fixed !important;left:10px !important;right:10px !important;top:120px !important;bottom:auto !important;width:auto !important;max-height:62vh;overflow-y:auto;background:#fff !important;border-radius:14px;box-shadow:0 14px 44px rgba(0,0,0,.28);z-index:3000;padding:8px;}
}
@media(max-width:768px){
/* la plage chiffrée vit AVEC le curseur (panneau ouvert), pas sur la pilule */
body.topbar-view #sb-msd-grammage .gsl-btnval{display:none !important;}
body.topbar-view #sb-msd-grammage .msd-panel .gsl-val{display:block !important;}
}
@media(max-width:768px){
/* 18/08 : pilules avancées APRÈS Type/Détails/Grammages (elles retombaient
entre les deux, ordre flex) + harmonisées sur le modèle « Type de papier » */
body.topbar-view .filters-panel .msd-group-row{order:10;font-size:13px !important;font-weight:600 !important;padding:8px 12px !important;border-radius:10px !important;box-shadow:0 1px 6px rgba(0,0,0,.06) !important;}
}
/* Tonnage sélection dans le header (18/08, téléphone) */
#head-tons{display:none;}
@media(max-width:768px){
body.topbar-view #head-tons{display:block;font-size:22px;color:#1d1d1f;white-space:nowrap;align-self:center;justify-self:start;padding-left:10px;}
body.topbar-view #head-tons b{font-weight:800;}
}
/* ── 18/08 (Ethan) : menus déroulants DÉPÔT + OFFRE = EXACTEMENT le dessin du
rail de filtres (v3 Apple 17/08) — fond gris doux, cartes blanches
flottantes (arrondi 12px, liseré + ombre douce, 18.5px/700), segment
BOBINE/FORMAT blanc → actif noir, chevron ˅ gris. Remplace le dessin
« contour noir » du bloc 17/08 plus haut pour ces deux menus. ── */
.offre-menu{background:#f0f0f4;border:none;border-radius:16px;padding:10px;min-width:270px;}
.offre-menu.show{display:flex;flex-direction:column;gap:4px;}
body.topbar-view .offre-menu{min-width:270px;}
/* segment BOBINE|FORMAT : même recette que .format-pills du rail */
.offre-seg-forme{background:transparent !important;border-radius:0 !important;padding:0 !important;gap:4px !important;margin:0 0 4px !important;box-shadow:none !important;}
.offre-seg-forme .offre-seg-btn{border:1px solid rgba(0,0,0,.05) !important;border-radius:12px !important;background:#fff !important;color:#1d1d1f !important;font-size:18.5px !important;font-weight:700 !important;letter-spacing:.5px;text-transform:uppercase;padding:9px 0 !important;box-shadow:none !important;}
.offre-seg-forme .offre-seg-btn:not(.on):not(:disabled):hover{background:#fafafa !important;}
.offre-seg-forme .offre-seg-btn.on{background:#222 !important;border-color:#222 !important;color:#fff !important;}
/* lignes qualités = cartes du rail (Type de papier, Détails…) */
.offre-item{border:1px solid rgba(0,0,0,.05);border-radius:12px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.10);padding:9px 14px;align-items:center;box-sizing:border-box;}
.offre-item:hover{background:#fafafa;}
.offre-offer .offre-lbl{font-size:18.5px;font-weight:700;color:#1d1d1f;}
/* chevron ˅ gris comme le rail (ouvert = ˄) */
.offre-chev-us{color:#a1a1a6;font-weight:400;font-size:19px;transform:rotate(90deg);padding:2px 4px;}
.offre-chev-us:hover{color:#1d1d1f;background:transparent;}
.offre-chev-us.open{transform:rotate(-90deg);color:#1d1d1f;}
/* sous-lignes dépliées (usines / offres) = rangées plates sur le fond gris,
comme les panneaux inline du rail */
.offre-item.offre-usine{border:none;border-radius:10px;background:transparent;box-shadow:none;padding:7px 14px 7px 22px;}
.offre-item.offre-usine:hover{background:#e6e6ec;}
.offre-usine .offre-lbl{font-size:16px;font-weight:600;}
.fab-us-hdr .offre-lbl{font-size:16px;font-weight:800;}
/* 18/08 (Ethan) : vue client — badge réf masqué sur les cartes (inutile côté
client ; la poubelle est retirée en JS, le prix s'affiche à sa place) */
body.shared-view .pbig-ref{display:none !important;}
/* UNIFORMITÉ flèche boutons filtres (20/08, Ethan) — UN SEUL chevron identique à
TOUTES les largeurs (mobile + desktop) : tue les 2 styles qui cohabitaient
(icône « sliders » sur certains boutons, glyph « › » sur Type/Détails/Couleur/
Dimensions/Grammages). Fin de fichier + !important pour battre les overrides #id. */
body.topbar-view .filters-panel .msd-btn .msd-arrow{font-size:0 !important;width:auto !important;min-width:0 !important;height:auto !important;flex:0 0 auto !important;background:none !important;border:none !important;box-shadow:none !important;padding:0 !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;}
body.topbar-view .filters-panel .msd-btn .msd-arrow::before,
body.topbar-view .filters-panel .msd-btn .msd-arrow::after{content:none !important;display:none !important;background:none !important;border:none !important;}
body.topbar-view .filters-panel .msd-btn .msd-arrow svg{display:block !important;width:13px !important;height:13px !important;stroke:#86868b !important;fill:none !important;transform:none !important;}
/* MENU FILTRE MOBILE = BOTTOM-SHEET (21/08) — plein écran + fond noir, patron du popup
tonnage (qui marche sur iOS). Impossible de passer derrière les tuiles : z 9000/9001
au niveau body, backdrop opaque. Fin du bug de compositing Safari des dropdowns fixed. */
#msd-sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:9000;}
/* padding-top:0 (26/08) : avec un padding-top, la recherche collée `top:0` se
figeait 16px trop bas (un sticky ne peut pas remonter dans le padding) et les
options défilaient DANS ce trou, passant DERRIÈRE la recherche. On enlève le
padding-haut ; l'espace du haut vient de la marge de la poignée. */
.msd-panel.msd-sheet{position:fixed !important;left:0 !important;right:0 !important;bottom:0 !important;top:auto !important;width:100% !important;max-width:100% !important;min-width:0 !important;max-height:74vh !important;z-index:9001 !important;border:none !important;border-radius:18px 18px 0 0 !important;box-shadow:0 -10px 40px rgba(0,0,0,.28) !important;overflow-y:auto !important;padding:0 14px calc(18px + env(safe-area-inset-bottom)) !important;animation:msdSheetUp .24s cubic-bezier(.32,.72,0,1) !important;}
/* Poignée NON collante : elle défile avec le contenu (marge du haut = l'espace). */
.msd-panel.msd-sheet::before{content:'';display:block;width:40px;height:4px;border-radius:99px;background:#d2d2d7;margin:12px auto 12px;flex:0 0 auto;}
/* Recherche = seule collée en haut, PLEINE LARGEUR + fond blanc opaque → couvre
toute option qui défile derrière. */
.msd-panel.msd-sheet .msd-search-wrap{top:0;margin:0 -14px;padding:8px 24px;background:#fff;}
@keyframes msdSheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
/* ── ACCÈS LEAD (23/08) : formulaire « Accéder au stock » validé sans code
client → catalogue SANS PRIX ; on masque aussi l'export chiffré
(Excel de la liste). body.lead-view = catalogue.js. */
body.lead-view #btn-excel-list{display:none !important;}
/* 23/08 Ethan : Album photo + Fiches non plus ne parlent pas aux leads */
body.lead-view #album-wrap,body.lead-view #fiche-wrap{display:none !important;}
/* ── STAND BY (23/08 Ethan) : Fabrication + Stocklot masqués pour TOUT LE
MONDE « pour le moment » — réactiver en supprimant cette règle. */
#fab-wrap,#offre-wrap{display:none !important;}
/* ── TÉLÉPHONE 23/08 (Ethan) : plus de barre de filtres horizontale — les
filtres passent par le TIROIR (#filter-drawer, bouton Filtres du header,
ex-panneau ethanelb.github.io). Réf article Min/Max = dans le tiroir.
Album photo mobile : sacrifié avec le menu Outils (dispo sur ordinateur). */
@media(max-width:768px){
body.topbar-view .filters-panel{display:none !important;}
body.topbar-view .header-search-group,body.topbar-view #album-wrap{display:none !important;}
}
/* Toast MOBILE « Navigation PC recommandé » (26/08) — dans le stock, monte du bas */
#pc-hint{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translate(-50%,160%);background:#1d1d1f;color:#fff;padding:11px 18px;border-radius:999px;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;box-shadow:0 10px 34px rgba(0,0,0,.3);z-index:9500;display:flex;align-items:center;gap:9px;white-space:nowrap;max-width:calc(100vw - 24px);opacity:0;pointer-events:none;transition:transform .42s cubic-bezier(.32,.72,0,1),opacity .42s;}
#pc-hint.show{transform:translate(-50%,0);opacity:1;}
/* Case prix « Ajouter + » (29/08 Ethan) : plus de pilule — TOUTE la case fait
bouton, le .sc-add la remplit (texte « Ajouter » + signe « + » à côté, sans
fond ni bordure). L'état « dans la liste » garde la poubelle rouge (re-clic = retire). */
body.apple-view .pgrid .sc-card .sc-price-main.sc-price-add{cursor:pointer;transition:background .15s;}
/* État « déjà dans la liste » : la case redevient transparente (poubelle rouge visible). */
body.apple-view .pgrid .sc-card .sc-price-main.sc-price-add:has(.sc-add.added){background:transparent !important;}
body.apple-view .pgrid .sc-card .sc-price-main.sc-price-add .sc-add:not(.added){width:100% !important;min-width:0 !important;height:100% !important;padding:0 !important;border:none !important;background:transparent !important;box-shadow:none !important;border-radius:0 !important;justify-content:flex-start !important;}
/* Défaut = clair + texte foncé ; SURVOL = fond NOIR + texte blanc (inversion). */
body.apple-view .pgrid .sc-card .sc-price-main.sc-price-add:hover{background:#1d1d1f !important;}
body.apple-view .pgrid .sc-card .sc-price-main.sc-price-add .sc-add:not(.added):hover{background:transparent !important;box-shadow:none !important;}
body.apple-view .pgrid .sc-card .sc-price-main.sc-price-add .sc-add:not(.added)::before{content:'Ajouter +' !important;font-family:'DM Sans',sans-serif !important;font-size:15.5px !important;font-weight:800 !important;color:#1d1d1f !important;letter-spacing:.2px;line-height:1.2;}
body.apple-view .pgrid .sc-card .sc-price-main.sc-price-add:hover .sc-add:not(.added)::before{color:#fff !important;}
body.apple-view .pgrid .sc-card .sc-price-main.sc-price-add .sc-add.added{width:28px !important;padding:0 !important;}
/* Prix + « Ajouter + » alignés à GAUCHE dans leur case (29/08 Ethan). */
body.apple-view .pgrid .sc-card .sc-cell.sc-price-main:not(.sc-price-add){justify-content:flex-start !important;}
/* Cartes catalogue à bords CARRÉS (29/08 Ethan) — carte + grille interne
(.sc-grid a un border-radius:0 0 17px 17px + overflow:hidden qui arrondissait
le BAS des cartes / rognait le bouton foncé). Pas la vue client ?s=. */
body.apple-view:not(.shared-view) .pgrid .pcard,
body.apple-view:not(.shared-view) .pgrid .sc-grid{border-radius:0 !important;}
/* Fond de page en BLANC derrière les cartes (29/08 Ethan, validé) — le panneau de filtres repasse en gris clair plus bas. */
html:has(body.apple-view:not(.shared-view)),
body.apple-view:not(.shared-view),
body.apple-view:not(.shared-view) .body-wrap,
body.topbar-view:not(.shared-view) .body-wrap>div:not(.sidebar-col),
body.apple-view:not(.shared-view) #results-bar,
body.apple-view:not(.shared-view) .rbar-inner,
body.apple-view:not(.shared-view) footer{background:#fff !important;}
/* Gris clair DERRIÈRE le panneau de filtres (rail desktop) — cartes restent blanches (29/08 Ethan). */
body.topbar-view:not(.shared-view) .body-wrap>.sidebar-col{background:#f5f5f7 !important;}
/* ── ACCUEIL CATALOGUE : rangées horizontales par qualité (29/08 Ethan) ── */
#quality-rows{display:none;}
body.landing-rows #quality-rows{display:block;}
body.landing-rows #pgrid,body.landing-rows #pager,body.landing-rows #scroll-sentinel{display:none !important;}
/* Accueil (rangées) : barre + / tonnage / tri masquée — elle apparaît dès qu'on filtre. */
body.landing-rows #desk-toolbar{display:none !important;}
.qrow-sec{margin:0 0 22px;}
.qrow-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 2px 8px;}
.qrow-title{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:34px;letter-spacing:.5px;color:#1d1d1f;margin:0;line-height:1.15;flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.qrow-title .qrow-sub{font-family:'DM Sans',sans-serif;font-weight:600;font-size:16px;letter-spacing:0;color:#1d1d1f;}
.qrow-more{background:none;border:none;color:#1d1d1f;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:700;cursor:pointer;padding:4px;white-space:nowrap;flex-shrink:0;}
.qrow-more:hover{color:#000;text-decoration:underline;}
.qrow-scroll.pgrid{display:flex !important;align-items:flex-start !important;gap:12px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;padding:2px 2px 10px;grid-template-columns:none !important;}
/* 30/08 : barre de défilement MASQUÉE (mobile + ordi) — le débord des cartes
suffit à comprendre qu'on peut glisser */
.qrow-scroll.pgrid{scrollbar-width:none;-ms-overflow-style:none;}
.qrow-scroll.pgrid::-webkit-scrollbar{display:none;height:0;}
.qrow-scroll .pcard{flex:0 0 212px;width:212px;scroll-snap-align:start;content-visibility:visible !important;contain-intrinsic-size:auto !important;}
.qrow-scroll .pcard .pcard-img{height:172px;}
/* Zébrage (30/08) : une rangée sur deux sur fond gris clair — marges négatives
= le panneau gris déborde du gabarit sans décaler le contenu (titres alignés
entre rangées grises et blanches) */
#quality-rows .qrow-sec:nth-child(even){background:#f0f0f4;
padding:14px 14px 4px;margin-left:-14px;margin-right:-14px;}
@media(max-width:768px){
/* 30/08 : la zone produits mobile n'a AUCUN padding latéral -> titres/cartes
colles au bord (mesure 0-2px). 14px ici + les marges -14px du zebrage se
compensent : bande grise plein bord, contenus alignes a 14px. */
#quality-rows{padding:0 14px;}
/* 30/08 (test Ethan) : CONTOUR de la photo aligne sur l'etiquette */
body.apple-view .pgrid .sc-card .pcard-img{border:1px solid #c9c9ce;border-bottom:none;border-radius:0;box-sizing:border-box;background:#fff;}
.qrow-title{font-size:29px;}
.qrow-title .qrow-sub{font-size:14px;}
.qrow-scroll .pcard{flex:0 0 166px;width:166px;}
.qrow-scroll .pcard .pcard-img{height:150px;}
}
/* 30/08 : lignes header mobile visuellement EGALES — 14px de blanc au-dessus
du logo (8px header + 6px header-inner) faisaient paraitre la ligne 1 plus
haute que la ligne grise (40px chacune). En fin de fichier pour la cascade. */
@media(max-width:768px){
body:not(.shared-view) header{padding-top:2px !important;}
body:not(.shared-view) .header-inner{padding-top:0 !important;}
}
/* ── VUE CLIENT MOBILE (31/08 Ethan) : header + cartes 2 colonnes ──
Le logo (absolu, centré, z1 — règle mobile .logo-link) passait PAR-DESSUS le
compteur « 87 formats • 26,5 t » → logo réduit + compteur compacté pour
cohabiter sur ~390px. Cellules des cartes 2 col : caps/valeurs réduites
(« GRAMMAGE/DIMENSIONS/963 × 1005 » sortaient tronqués). */
@media(max-width:768px){
body.shared-view .logo-full{height:26px !important;}
body.shared-view .rbar-count{font-size:10.5px !important;margin-left:6px !important;}
body.shared-view .pgrid .sc-card .sc-cap{font-size:8.5px !important;letter-spacing:.2px !important;}
body.shared-view .pgrid .sc-card .sc-cell .sc-val{font-size:12px !important;}
body.shared-view .pgrid .sc-card .sc-det-only .sc-val{font-size:12px !important;}
}