* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: #000; color: #FFF; font-family: 'Sora', sans-serif; -webkit-font-smoothing: antialiased; }
.hidden { display: none !important; }

/* ===== SPLASH ===== */
#splash { position: fixed; inset: 0; z-index: 9999; background: #0A0A0A; display: flex; align-items: center; justify-content: center; transition: opacity .4s ease; }
#splash.hide { opacity: 0; pointer-events: none; }
.splash-inner { text-align: center; padding: 0 28px; }
.splash-title { font-family: 'Fraunces', serif; font-size: 34px; font-weight: 600; color: #FFF; margin-bottom: 14px; }
.splash-tagline-fr { font-size: 14px; color: #E0A847; font-weight: 500; letter-spacing: .02em; margin-bottom: 8px; }
.splash-tagline-ar { font-size: 15px; color: #CFCFCF; font-weight: 500; line-height: 1.6; }

/* ===== HEADER ===== */
#header { position: sticky; top: 0; z-index: 50; background: #000; border-bottom: 1px solid #1A1A1A; }
#categories { display: flex; gap: 8px; padding: 10px 16px; overflow-x: auto; scrollbar-width: none; }
#categories::-webkit-scrollbar { display: none; }
.chip { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 13px; padding: 7px 16px; border-radius: 999px; border: 1.5px solid #262626; background: #161616; color: #B0B0B0; cursor: pointer; white-space: nowrap; transition: all .15s; }
.chip.active { background: #C4593A; border-color: #C4593A; color: #FFF; }

/* ===== HORIZONTAL ROWS ===== */
.hrow { padding: 16px 0 4px; }
.hrow-head { display: flex; align-items: center; justify-content: space-between; padding: 0 16px 10px; }
.hrow-title { font-family: 'Fraunces', serif; font-size: 17px; font-weight: 600; }
.hrow-scroll { display: flex; gap: 10px; overflow-x: auto; padding: 0 16px 4px; scrollbar-width: none; scroll-snap-type: x mandatory; }
.hrow-scroll::-webkit-scrollbar { display: none; }
.hcard { flex: 0 0 auto; width: 168px; cursor: pointer; scroll-snap-align: start; }
.hcard-media { position: relative; width: 168px; height: 220px; border-radius: 16px; overflow: hidden; background: #141414; }
.hcard-media img { width: 100%; height: 100%; object-fit: cover; }
.hcard-stats { position: absolute; bottom: 7px; left: 7px; background: rgba(10,10,10,.7); backdrop-filter: blur(4px); border-radius: 999px; padding: 3px 9px; font-size: 11px; font-weight: 600; color: #FF6B6B; }
.catalog-head { padding: 18px 16px 8px; }

/* ===== MASONRY ===== */
.masonry { column-gap: 3px; column-count: 2; padding: 4px 3px 84px; }
@media (min-width: 640px) { .masonry { column-count: 3; } }
@media (min-width: 960px) { .masonry { column-count: 4; } }
.card { break-inside: avoid; margin-bottom: 3px; overflow: hidden; background: #141414; border-radius: 14px; cursor: pointer; }
.card-media { position: relative; width: 100%; }
.card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.new-badge { position: absolute; top: 8px; left: 8px; background: #C4593A; color: #FFF; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 999px; letter-spacing: .08em; text-transform: uppercase; z-index: 2; }
.heart-btn { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 999px; background: rgba(0,0,0,.45); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; transition: transform .15s; z-index: 2; }
.heart-btn:hover { transform: scale(1.08); }
.heart-btn svg { width: 15px; height: 15px; }
.card-ribbon { position: absolute; bottom: 8px; left: 8px; display: flex; align-items: center; gap: 8px; background: rgba(10,10,10,.65); backdrop-filter: blur(4px); border-radius: 999px; padding: 4px 10px; font-size: 11px; font-weight: 600; color: #FFF; z-index: 2; }
.card-ribbon .stat { display: flex; align-items: center; gap: 3px; }
.card-body { padding: 10px 12px 12px; }
.card-title { font-family: 'Fraunces', serif; font-size: 16px; font-weight: 600; margin: 0; color: #FFF; }

/* ===== PAGES ===== */
.view { min-height: 100vh; }
.page { padding-bottom: 84px; }
.page-topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 12px; background: #0A0A0A; border-bottom: 1px solid #1A1A1A; padding: 14px 16px; }
.page-topbar h2 { font-family: 'Fraunces', serif; font-size: 18px; font-weight: 600; }
.back-btn { background: none; border: none; color: #FFF; cursor: pointer; display: flex; align-items: center; }
.back-btn svg { width: 22px; height: 22px; }

/* ===== SEARCH ===== */
.search-topbar { gap: 12px; }
.search-field { flex: 1; position: relative; display: flex; align-items: center; }
.search-field-icon { position: absolute; left: 10px; width: 16px; height: 16px; color: #6B6B6B; pointer-events: none; }
#search-input { width: 100%; background: #161616; border: 1.5px solid #262626; border-radius: 10px; color: #FFF; font-family: 'Sora', sans-serif; font-size: 14px; padding: 10px 12px 10px 34px; outline: none; -webkit-appearance: none; }
#search-input:focus { border-color: #C4593A; }
#search-input::placeholder { color: #555; }
#search-cancel { background: none; border: none; color: #C4593A; font-family: 'Sora', sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }

/* ===== DETAIL ===== */
.detail-image { width: 100%; background: #141414; position: relative; max-height: 72vh; aspect-ratio: 4 / 5; }
.gallery-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; height: 100%; }
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-slide { flex: 0 0 100%; scroll-snap-align: center; height: 100%; }
.gallery-slide img { display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .25s ease; }
.gallery-slide img.loaded { opacity: 1; }
.gallery-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 7px; z-index: 3; }
.gdot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.45); cursor: pointer; transition: all .2s; }
.gdot.active { background: #FFF; width: 20px; border-radius: 99px; }
.detail-actions { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #1A1A1A; }
.detail-category { font-size: 11px; font-weight: 700; color: #E0A847; text-transform: uppercase; letter-spacing: .06em; }
.detail-icons { display: flex; gap: 18px; }
.d-icon { background: none; border: none; color: #B0B0B0; display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; cursor: pointer; }
.d-icon svg { width: 21px; height: 21px; }
.d-icon .heart-icon { stroke: #FF6B6B; fill: none; }
.d-icon.liked { color: #FF6B6B; }
.d-icon.liked .heart-icon { fill: #FF6B6B; }
.detail-info { padding: 16px; }
.detail-title { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.info-line { font-size: 14px; color: #C9C9C9; line-height: 1.6; }
.info-extra { margin-top: 6px; }
.detail-explain { font-size: 13px; color: #C9C9C9; background: #131313; border: 1px solid #222; border-radius: 10px; padding: 10px 12px; line-height: 1.55; margin-bottom: 10px; }
.detail-explain strong { color: #FFF; }
.buy-note { margin-top: 10px; font-size: 13px; color: #E0A847; background: #161616; border: 1px solid #262626; border-radius: 10px; padding: 10px 12px; line-height: 1.5; }
.show-more-btn { margin-top: 8px; background: none; border: none; color: #C4593A; font-weight: 600; font-size: 13px; cursor: pointer; }
.buy-btn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; margin-top: 18px; padding: 15px; background: #2AABEE; color: #FFF; text-decoration: none; border-radius: 14px; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 16px; border: none; cursor: pointer; box-shadow: 0 6px 20px rgba(42,171,238,.3); }
.buy-btn:active { opacity: .85; }

/* ===== COMMENTS ===== */
.comments-section { padding: 0 16px 32px; border-top: 1px solid #1A1A1A; }
.comments-title { font-family: 'Fraunces', serif; font-size: 16px; font-weight: 600; padding: 14px 0 12px; }
.comment-form { display: flex; flex-direction: row; align-items: center; gap: 8px; margin-bottom: 20px; }
.comment-form input { flex: 1; background: #161616; border: 1.5px solid #262626; border-radius: 999px; color: #FFF; font-family: 'Sora', sans-serif; font-size: 14px; padding: 11px 16px; outline: none; -webkit-appearance: none; }
.comment-form input:focus { border-color: #C4593A; }
.comment-form input::placeholder { color: #555; }
.comment-send-btn { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: #C4593A; color: #FFF; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity .15s, transform .15s; }
.comment-send-btn:active { opacity: .8; transform: scale(.94); }
.comment-send-btn:disabled { opacity: .45; cursor: not-allowed; }
.comment-send-btn svg { width: 18px; height: 18px; }
.comments-loading, .comments-empty { font-size: 13px; color: #555; text-align: center; padding: 16px 0; }
.comment { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 12px 0; border-bottom: 1px solid #161616; }
.comment:last-child { border-bottom: none; }
.comment-body { flex: 1; min-width: 0; }
.comment-author { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.comment-time { font-size: 11px; color: #555; margin-bottom: 4px; }
.comment-text { font-size: 13px; color: #C0C0C0; line-height: 1.5; word-break: break-word; }
.comment-like-btn { background: none; border: none; color: #6B6B6B; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-weight: 600; cursor: pointer; flex-shrink: 0; padding: 2px 4px; }
.comment-like-btn.liked { color: #FF6B6B; }

/* ===== FAVORITES ===== */
#favorites-masonry { padding: 12px 3px 84px; }
.empty-msg { text-align: center; color: #6B6B6B; font-size: 14px; padding: 60px 24px; line-height: 1.6; }

/* ===== PROFILE / MON ESPACE ===== */
.profile-hero { display: flex; align-items: center; gap: 16px; padding: 32px 20px 24px; background: #000; border-bottom: 1px solid #1A1A1A; }
.profile-avatar { width: 64px; height: 64px; border-radius: 50%; background: #262626; color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 22px; flex-shrink: 0; letter-spacing: .02em; }
.profile-avatar.is-pro { background: linear-gradient(135deg, #C4593A, #E0A847); box-shadow: 0 6px 18px rgba(196,89,58,.35); }
.profile-identity { min-width: 0; }
.profile-name { font-family: 'Fraunces', serif; font-size: 21px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.profile-tag { font-size: 13px; color: #999; margin-top: 2px; display: block; }
.pro-badge-inline { font-family: 'Sora', sans-serif; font-size: 10px; font-weight: 700; background: linear-gradient(135deg,#E0A847,#C4593A); color: #FFF; padding: 3px 9px; border-radius: 99px; letter-spacing: .05em; }

.profile-pro-cta { margin: 16px; background: linear-gradient(135deg, rgba(196,89,58,.15), rgba(224,168,71,.15)); border: 1px solid rgba(224,168,71,.25); border-radius: 14px; padding: 16px; text-align: center; }
.profile-pro-cta p { font-size: 14px; color: #E0A847; font-weight: 600; margin-bottom: 12px; }

.profile-menu { padding: 8px 12px 0; }
.profile-menu-item { width: 100%; display: flex; align-items: center; gap: 14px; background: none; border: none; border-bottom: 1px solid #161616; color: #EEE; font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 500; padding: 16px 8px; cursor: pointer; text-decoration: none; text-align: left; }
.profile-menu-item:active { background: #141414; }
.profile-menu-item > svg:first-child { width: 21px; height: 21px; color: #C4593A; flex-shrink: 0; }
.profile-menu-item span { flex: 1; }
.profile-menu-item .chevron { width: 18px; height: 18px; color: #555; }
.profile-footer { text-align: center; color: #555; font-size: 12px; line-height: 1.6; padding: 28px 20px 100px; }

/* ===== BOTTOM NAV ===== */
#bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: 64px; background: #0A0A0A; border-top: 1px solid #1A1A1A; display: flex; align-items: center; justify-content: space-around; z-index: 100; padding-bottom: env(safe-area-inset-bottom); }
.nav-btn { background: none; border: none; color: #6B6B6B; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 10px; }
.nav-btn svg { width: 22px; height: 22px; }
.nav-btn.active { color: #FFF; }
.nav-btn-search { background: #C4593A; border-radius: 999px; width: 48px; height: 48px; margin-top: -22px; color: #FFF; box-shadow: 0 6px 16px rgba(196,89,58,.4); }
.nav-btn-search svg { width: 20px; height: 20px; }
.nav-avatar { width: 28px; height: 28px; border-radius: 50%; background: #262626; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; border: 1.5px solid #6B6B6B; }
.nav-btn-profile.active .nav-avatar { border-color: #FFF; }
.nav-avatar.is-pro { background: linear-gradient(135deg, #C4593A, #E0A847); border-color: #E0A847; }

/* ===== TOOLS PANEL ===== */
.tools-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.75); z-index: 200; opacity: 0; pointer-events: none; }
.tools-overlay.open { opacity: 1; pointer-events: all; }
.tools-panel { position: fixed; inset: 0; background: #0F0F0F; z-index: 201; padding: 18px 24px 56px; overflow-y: auto; opacity: 0; visibility: hidden; pointer-events: none; }
.tools-panel.open { opacity: 1; visibility: visible; pointer-events: auto; }
.tools-handle { width: 40px; height: 4px; background: #333; border-radius: 99px; margin: 0 auto 16px; }
.tools-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; }
.tools-title { font-family: 'Fraunces', serif; font-size: 18px; font-weight: 600; }
.tools-subtitle { font-size: 12px; color: #888; margin-top: 3px; font-weight: 500; }
.tools-close { background: #222; border: none; color: #999; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.tools-close svg { width: 16px; height: 16px; }
.pro-cta { background: linear-gradient(135deg, rgba(196,89,58,.15), rgba(224,168,71,.15)); border: 1px solid rgba(224,168,71,.25); border-radius: 14px; padding: 14px 16px; margin-bottom: 20px; display: flex; flex-direction: column; gap: 10px; }
.pro-cta-text { font-size: 13px; color: #E0A847; font-weight: 600; }
.pro-cta-btn { background: linear-gradient(135deg, #C4593A, #E0A847); color: #FFF; border: none; padding: 10px 16px; border-radius: 10px; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 14px; cursor: pointer; box-shadow: 0 4px 14px rgba(196,89,58,.3); }
.pro-cta-btn:active { opacity: .85; }
.tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tool-item { background: none; border: none; display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; padding: 10px 6px; border-radius: 16px; position: relative; }
.tool-item:active { background: #1a1a1a; }
.tool-icon { position: relative; width: 64px; height: 64px; border-radius: 18px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.4); transition: opacity .2s; }
.tool-icon svg { width: 28px; height: 28px; }
.tool-name { font-family: 'Sora', sans-serif; font-size: 11px; font-weight: 600; color: #C9C9C9; text-align: center; line-height: 1.3; }
.lock-badge { position: absolute; bottom: -4px; right: -4px; width: 22px; height: 22px; background: #1a1a1a; border: 2px solid #111; border-radius: 99px; display: none; align-items: center; justify-content: center; }
.lock-badge svg { width: 11px; height: 11px; }
.tool-item.locked .tool-icon { opacity: .55; }
.tool-item.locked .lock-badge { display: flex; }
.tool-item.locked .tool-name { color: #6B6B6B; }

/* ===== MODALS ===== */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.75); z-index: 300; opacity: 0; pointer-events: none; }
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal { position: fixed; inset: 0; background: #0F0F0F; z-index: 301; overflow-y: auto; opacity: 0; visibility: hidden; pointer-events: none; }
.modal.open { opacity: 1; visibility: visible; pointer-events: auto; }
@media (min-width: 640px) {
  .modal { left: 50%; right: 0; transform: none; max-width: 560px; margin: 0 auto; border-left: 1px solid #1A1A1A; border-right: 1px solid #1A1A1A; }
}
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 12px; border-bottom: 1px solid #1A1A1A; position: sticky; top: 0; background: #111; z-index: 2; }
.modal-header h2 { font-family: 'Fraunces', serif; font-size: 18px; font-weight: 600; }
.modal-close { background: #222; border: none; color: #999; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.modal-close svg { width: 16px; height: 16px; }
.modal-body { padding: 20px 20px 32px; }
.modal-body h4 { font-family: 'Fraunces', serif; font-size: 14px; color: #E0A847; margin: 14px 0 4px; }
.modal-body p { font-size: 13px; color: #C0C0C0; line-height: 1.6; }
.modal-body h4:first-child { margin-top: 0; }
.about-logo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin: 0 auto 14px; border: 2px solid #262626; display: block; }

.pro-intro { font-size: 14px; color: #C9C9C9; line-height: 1.6; margin-bottom: 18px; }
.pro-intro strong { color: #E0A847; }
.pro-benefits { background: #161616; border-radius: 12px; padding: 14px; margin-bottom: 20px; }
.pro-benefit { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #C9C9C9; padding: 4px 0; }
.pro-check { color: #1F9B5F; font-weight: 700; font-size: 14px; }
.pro-form { display: flex; flex-direction: column; gap: 14px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-size: 12px; color: #999; font-weight: 600; }
.form-field input, .form-field select { background: #161616; border: 1.5px solid #262626; border-radius: 10px; color: #FFF; font-family: 'Sora', sans-serif; font-size: 14px; padding: 12px 14px; outline: none; -webkit-appearance: none; }
.form-field input:focus, .form-field select:focus { border-color: #C4593A; }
.form-field input::placeholder { color: #555; }
.pro-submit-btn { background: linear-gradient(135deg, #C4593A, #E0A847); color: #FFF; border: none; padding: 14px; border-radius: 12px; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 15px; cursor: pointer; margin-top: 8px; box-shadow: 0 4px 14px rgba(196,89,58,.3); }
.pro-submit-btn:active { opacity: .85; }
.pro-submit-btn:disabled { opacity: .5; cursor: not-allowed; }
.pro-disclaimer { font-size: 11px; color: #666; text-align: center; margin-top: 4px; }

/* ===== TOAST ===== */
.toast { position: fixed; bottom: 84px; left: 50%; transform: translateX(-50%) translateY(16px); background: #222; color: #FFF; font-size: 13px; font-weight: 600; padding: 10px 20px; border-radius: 99px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; white-space: nowrap; z-index: 400; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Telegram contact item accent (last menu item) */
.profile-menu-telegram > svg:first-child { color: #2AABEE; }

/* ═══════════ CALCULATEUR PRIX ═══════════ */
.calc-view { position: fixed; inset: 0; z-index: 350; background: #000; overflow-y: auto; transform: translateX(100%); transition: transform .3s cubic-bezier(.32,.72,0,1); }
.calc-view.open { transform: translateX(0); }
.calc-body { padding: 16px 16px 100px; }
.calc-client-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.calc-client-field label { font-size: 12px; color: #999; font-weight: 600; }
.calc-client-field input { background: #161616; border: 1.5px solid #262626; border-radius: 10px; color: #FFF; font-family: 'Sora', sans-serif; font-size: 15px; padding: 12px 14px; outline: none; -webkit-appearance: none; }
.calc-client-field input:focus { border-color: #C4593A; }
.calc-client-field input::placeholder { color: #555; }

.calc-product { background: #111; border: 1px solid #1E1E1E; border-radius: 18px; padding: 16px; margin-bottom: 16px; }
.calc-product-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.calc-product-num { font-family: 'Fraunces', serif; font-size: 15px; font-weight: 600; color: #E0A847; }
.calc-remove { background: #1E1E1E; border: none; color: #FF6B6B; width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.calc-remove svg { width: 16px; height: 16px; }

.calc-thumb { display: block; width: 100%; height: 180px; border-radius: 14px; overflow: hidden; background: #161616; border: 1.5px dashed #333; margin-bottom: 14px; cursor: pointer; position: relative; }
.calc-thumb.has-img { border-style: solid; border-color: #262626; }
.calc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.calc-thumb-empty { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #666; }
.calc-thumb-empty svg { width: 34px; height: 34px; }
.calc-thumb-empty span { font-size: 13px; font-weight: 500; }

.calc-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.calc-field label { font-size: 12px; color: #999; font-weight: 600; }
.calc-field input { background: #161616; border: 1.5px solid #262626; border-radius: 10px; color: #FFF; font-family: 'Sora', sans-serif; font-size: 15px; padding: 12px 14px; outline: none; -webkit-appearance: none; }
.calc-field input:focus { border-color: #C4593A; }
.calc-field input::placeholder { color: #555; }
.calc-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.calc-readout .calc-val { background: #0E0E0E; border: 1.5px solid #1E1E1E; border-radius: 10px; padding: 12px 14px; font-size: 15px; font-weight: 700; color: #E0A847; }
.calc-product-total { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; padding-top: 14px; border-top: 1px solid #1E1E1E; }
.calc-product-total span { font-size: 14px; color: #C9C9C9; font-weight: 600; }
.calc-product-total strong { font-size: 20px; color: #FFF; font-weight: 700; }

.calc-add-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; background: none; border: 1.5px dashed #333; color: #C4593A; font-family: 'Sora', sans-serif; font-weight: 600; font-size: 14px; padding: 14px; border-radius: 14px; cursor: pointer; margin-bottom: 16px; }
.calc-add-btn svg { width: 18px; height: 18px; }
.calc-add-btn:active { background: #111; }

.calc-grand { background: linear-gradient(135deg, rgba(196,89,58,.18), rgba(224,168,71,.14)); border: 1px solid rgba(224,168,71,.3); border-radius: 16px; padding: 18px; margin-bottom: 16px; }
.calc-grand-row { display: flex; align-items: center; justify-content: space-between; }
.calc-grand-row span { font-size: 15px; color: #E0A847; font-weight: 600; }
.calc-grand-row strong { font-size: 26px; color: #FFF; font-weight: 700; }

.calc-share-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px; background: #2AABEE; color: #FFF; border: none; padding: 15px; border-radius: 14px; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 16px; cursor: pointer; box-shadow: 0 6px 20px rgba(42,171,238,.3); }
.calc-share-btn:active { opacity: .85; }
.calc-share-btn svg { width: 20px; height: 20px; }

/* ── Formation Wilcom (YouTube) tool icon ───────────────────────── */
.tool-icon-yt { background: #fff; overflow: hidden; }
.tool-icon-yt img { width: 78%; height: auto; object-fit: contain; display: block; }

/* ── Notifications on/off toggle (profile) ──────────────────────── */
.notif-toggle-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 16px; padding: 14px 16px; background: #101010; border: 1px solid #1d1d1d; border-radius: 14px; }
.notif-toggle-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.notif-toggle-info > svg { width: 22px; height: 22px; color: #C4593A; flex-shrink: 0; }
.notif-toggle-title { font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 600; color: #EEE; }
.notif-toggle-sub { font-size: 12px; color: #888; margin-top: 2px; }
.notif-switch { position: relative; width: 48px; height: 28px; border: none; border-radius: 99px; background: #2a2a2a; cursor: pointer; flex-shrink: 0; padding: 0; transition: background .25s; }
.notif-switch-knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4); transition: transform .25s; }
.notif-switch.on { background: linear-gradient(135deg, #C4593A, #E0A847); }
.notif-switch.on .notif-switch-knob { transform: translateX(20px); }
.notif-switch.pending { opacity: .6; pointer-events: none; }

/* ── Calculateur Prix — refined product card ────────────────────── */
.calc-name { flex: 1; min-width: 0; background: #161616; border: 1.5px solid #262626; border-radius: 10px; color: #E0A847; font-family: 'Fraunces', serif; font-size: 16px; font-weight: 600; padding: 9px 12px; outline: none; -webkit-appearance: none; margin-right: 10px; }
.calc-name:focus { border-color: #C4593A; }
.calc-name::placeholder { color: #6b5a36; font-style: italic; font-weight: 600; }

/* Coef (left) + prix broderie réel en blanc (right) on one line */
.calc-coef-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.calc-coef-group { display: flex; align-items: center; gap: 8px; }
.calc-coef-label { font-size: 13px; color: #999; font-weight: 600; }
.calc-coef { width: 70px; background: #161616; border: 1.5px solid #262626; border-radius: 10px; color: #FFF; font-family: 'Sora', sans-serif; font-size: 15px; padding: 10px 12px; outline: none; -webkit-appearance: none; text-align: center; }
.calc-coef:focus { border-color: #C4593A; }
.calc-broderie-real { font-family: 'Sora', sans-serif; font-size: 18px; font-weight: 700; color: #FFF; white-space: nowrap; }

/* Dotted leader rows — values align on the right edge */
.calc-leader-line, .calc-other-line, .calc-total-line { display: flex; align-items: flex-end; }
.calc-dots { flex: 1 1 auto; min-width: 16px; border-bottom: 2px dotted #3a3a3a; margin: 0 8px 5px; }

/* prix arrondi (or) */
.calc-leader-line { margin-top: 6px; }
.calc-broderie-round { font-family: 'Sora', sans-serif; font-size: 14px; font-weight: 600; color: #E0A847; white-space: nowrap; }

/* Autres frais : libellé + champ or + DA hors champ */
.calc-other-line { margin-top: 10px; }
.calc-other-label { font-size: 14px; color: #C9C9C9; font-weight: 600; white-space: nowrap; }
.calc-other-input-wrap { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.calc-other { width: 92px; background: transparent; border: none; border-bottom: 1.5px solid #2a2a2a; border-radius: 0; color: #E0A847; font-family: 'Sora', sans-serif; font-size: 16px; font-weight: 700; padding: 2px 2px 4px; outline: none; -webkit-appearance: none; text-align: right; }
.calc-other:focus { border-bottom-color: #E0A847; }
.calc-other::placeholder { color: #5a4a2a; }
.calc-da { font-size: 14px; font-weight: 700; color: #E0A847; }
.calc-other-hint { font-size: 12px; color: #777; margin-top: 4px; }

/* Total produit */
.calc-total-line { margin-top: 12px; padding-top: 14px; border-top: 1px solid #1E1E1E; }
.calc-total-line .calc-dots { margin-bottom: 8px; }
.calc-total-label { font-size: 15px; color: #C9C9C9; font-weight: 700; white-space: nowrap; }
.calc-total-val { font-family: 'Sora', sans-serif; font-size: 22px; font-weight: 800; color: #E0A847; white-space: nowrap; }

/* ── Sliding calc view stays GPU-promoted; panels are instant now ── */
.calc-view { will-change: transform; }

/* ── Contact block (Messenger + Telegram) ───────────────────────── */
.contact-block { margin-top: 18px; }
.contact-label { font-family: 'Sora', sans-serif; font-size: 13px; font-weight: 600; color: #999; margin-bottom: 10px; }
.contact-btns { display: flex; gap: 10px; }
.contact-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; border: none; border-radius: 14px; color: #FFF; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 15px; cursor: pointer; }
.contact-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.contact-btn:active { opacity: .85; }
.contact-btn.messenger { background: linear-gradient(135deg, #0A7CFF, #A033FF); box-shadow: 0 6px 20px rgba(120,80,255,.30); }
.contact-btn.telegram { background: #2AABEE; box-shadow: 0 6px 20px rgba(42,171,238,.30); }

/* ── Avatar colour swatches ─────────────────────────────────────── */
.avatar-colors { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 16px 0; }
.avatar-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; outline: none; transition: transform .12s; }
.avatar-swatch:active { transform: scale(.9); }
.avatar-swatch.sel { border-color: #FFF; box-shadow: 0 0 0 2px #0A0A0A, 0 0 0 4px rgba(255,255,255,.25); }

/* Hide bottom-sheet grab handle (panels are full-screen now) */
.tools-handle { display: none; }

/* Arabic tagline at the bottom of the profile */
.footer-ar { display: inline-block; margin-top: 6px; color: #6a6a6a; font-size: 13px; }

/* ── Stitch breakdown (product detail) ──────────────────────────── */
.stitch-box { margin: 14px 0 4px; padding: 16px; background: #101010; border: 1px solid #1E1E1E; border-radius: 14px; }
.stitch-title { font-family: 'Sora', sans-serif; font-size: 13px; font-weight: 700; color: #999; margin-bottom: 12px; }
.stitch-row, .stitch-total { display: flex; align-items: flex-end; }
.stitch-row { margin-bottom: 8px; }
.stitch-name { font-size: 14px; color: #C9C9C9; font-weight: 600; white-space: nowrap; }
.stitch-dots { flex: 1 1 auto; min-width: 14px; border-bottom: 2px dotted #333; margin: 0 8px 5px; }
.stitch-val { font-family: 'Sora', sans-serif; font-size: 14px; color: #FFF; font-weight: 600; white-space: nowrap; }
.stitch-total { margin-top: 10px; padding-top: 12px; border-top: 1px solid #1E1E1E; }
.stitch-total > span:first-child { font-size: 14px; font-weight: 700; color: #C9C9C9; }
.stitch-total strong { font-family: 'Sora', sans-serif; font-size: 16px; font-weight: 800; color: #E0A847; white-space: nowrap; }
.stitch-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.stitch-copy, .stitch-calc { flex: 1; min-width: 140px; padding: 11px 12px; border-radius: 10px; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 13px; cursor: pointer; border: 1.5px solid #2a2a2a; background: #161616; color: #E0A847; }
.stitch-calc { border: none; background: linear-gradient(135deg, #C4593A, #E0A847); color: #FFF; }
.stitch-copy:active, .stitch-calc:active { opacity: .85; }

/* Kill the Android tap-highlight flash + accidental text selection on controls */
* { -webkit-tap-highlight-color: transparent; }
.nav-btn, .profile-menu-item, .tool-item, .card, .hcard, button, .contact-btn, .avatar-swatch, .gdot { -webkit-user-select: none; user-select: none; }
.card img, .hcard-media img, .gallery-slide img { -webkit-touch-callout: none; }