/* ============================================================================ MUDITEL — ECE THEME ADAPTER (Porto → ece design system) Maps Porto/Bootstrap4 (and UIkit/AdminLTE) component classes onto the ece token system (tokens.css). Light by default, dark via [data-theme="dark"] on . Every value uses ece variables so both themes switch for free. Loaded AFTER ece-theme/{tokens,base,components}.css. Scope = .telecom-scope on to beat Porto specificity. !important only on colors/backgrounds. ========================================================================== */ /* ============ BASE / BODY =============================================== */ body.telecom-scope { background: var(--surface-dim) !important; color: var(--on-surface) !important; font-family: var(--font-body) !important; font-size: 16px; line-height: 1.6; } body.telecom-scope *, body.telecom-scope *::before, body.telecom-scope *::after { box-sizing: border-box; } .telecom-scope ::selection { background: var(--primary); color: var(--on-primary); } .telecom-scope :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* Scrollbars */ .telecom-scope { scrollbar-color: var(--surface-highest) transparent; scrollbar-width: thin; } .telecom-scope ::-webkit-scrollbar { width: 10px; height: 10px; } .telecom-scope ::-webkit-scrollbar-track { background: var(--surface-low); } .telecom-scope ::-webkit-scrollbar-thumb { background: var(--surface-highest); border-radius: var(--r-full); border: 2px solid var(--surface-low); } .telecom-scope ::-webkit-scrollbar-thumb:hover { background: var(--primary); } /* ============ TYPOGRAPHY ================================================ */ .telecom-scope h1, .telecom-scope .h1, .telecom-scope h2, .telecom-scope .h2, .telecom-scope h3, .telecom-scope .h3, .telecom-scope h4, .telecom-scope .h4, .telecom-scope h5, .telecom-scope .h5, .telecom-scope h6, .telecom-scope .h6 { font-family: var(--font-display) !important; color: var(--on-surface) !important; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; } .telecom-scope h1, .telecom-scope .h1 { font-size: clamp(28px, 4vw, 40px); } .telecom-scope h2, .telecom-scope .h2 { font-size: clamp(24px, 3vw, 32px); } .telecom-scope h3, .telecom-scope .h3 { font-size: 22px; } .telecom-scope h4, .telecom-scope .h4 { font-size: 18px; } .telecom-scope p { color: var(--on-surface-variant); } .telecom-scope a { color: var(--primary); transition: color .18s ease; } .telecom-scope a:hover { color: var(--primary-hover); } .telecom-scope strong, .telecom-scope b { color: var(--on-surface); } .telecom-scope hr { border: none; border-top: 1px solid var(--outline-variant); margin: var(--s-8) 0; } /* ============ HEADER ==================================================== */ .telecom-scope .header, .telecom-scope .header-7 { background: color-mix(in srgb, var(--surface) 90%, transparent) !important; backdrop-filter: blur(12px) saturate(140%); border-bottom: 1px solid var(--outline-variant) !important; box-shadow: none !important; } .telecom-scope .header-top { background: linear-gradient(135deg, var(--primary), var(--primary-hover)) !important; color: var(--on-primary) !important; } .telecom-scope .header-top a, .telecom-scope .header-dropdown > a, .telecom-scope .top-menu a { color: var(--on-primary) !important; font-size: 13px; font-weight: 500; } .telecom-scope .header-top a:hover, .telecom-scope .top-menu a:hover { color: #fff !important; opacity: .85; } .telecom-scope .header-middle { background: var(--surface) !important; border-bottom: 1px solid var(--outline-variant) !important; } .telecom-scope .sticky-header { background: var(--surface) !important; } .telecom-scope .logo img { border-radius: 0; } /* Ticker kept but recolored to ece */ .telecom-scope .telecom-ticker { background: var(--surface-dim); border-bottom: 1px solid var(--outline-variant); padding: 8px 0; } .telecom-scope .telecom-ticker__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; } .telecom-scope .telecom-ticker__row .index-tag, .telecom-scope .index-tag { color: var(--on-surface-variant); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .telecom-scope .telecom-ticker__row .index-tag b, .telecom-scope .index-tag b { color: var(--primary); } .telecom-scope .telecom-ticker__pulse { color: var(--success); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; } .telecom-scope .telecom-ticker__pulse i { width: 8px; height: 8px; background: var(--success); border-radius: var(--r-full); display: inline-block; animation: ece-pulse 1.8s ease-in-out infinite; } @keyframes ece-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } } /* Main nav menu */ .telecom-scope .menu > li > a, .telecom-scope .main-nav .menu li > a { color: var(--on-surface) !important; font-weight: 600; font-size: 14px; letter-spacing: 0; padding: 18px 16px; border-radius: var(--r-md); transition: color .15s, background .15s; } .telecom-scope .menu > li:hover > a, .telecom-scope .menu > li > a:hover { color: var(--primary) !important; background: var(--primary-container) !important; } .telecom-scope .sf-with-ul::after { color: var(--primary) !important; } /* Superfish submenus / dropdowns — Porto hardcodes white */ .telecom-scope .sf-menu ul, .telecom-scope .megamenu, .telecom-scope .megamenu-sm, .telecom-scope .header-dropdown .header-menu, .telecom-scope .dropdown-menu, .telecom-scope .cart-dropdown .dropdown-menu { background: var(--surface) !important; border: 1px solid var(--outline-variant) !important; border-radius: var(--r-lg) !important; box-shadow: var(--el-3) !important; padding: 6px; } .telecom-scope .sf-menu ul li, .telecom-scope .megamenu .menu-col li, .telecom-scope .header-menu li { border-bottom: 1px solid var(--outline-variant); } .telecom-scope .sf-menu ul li:last-child, .telecom-scope .header-menu li:last-child { border-bottom: none; } .telecom-scope .sf-menu ul li a, .telecom-scope .megamenu a, .telecom-scope .header-menu li a, .telecom-scope .dropdown-menu .header-menu li a, .telecom-scope .dropdown-item { color: var(--on-surface-variant) !important; font-size: 14px; padding: 10px 14px; border-radius: var(--r-sm); transition: background .15s, color .15s; } .telecom-scope .sf-menu ul li a:hover, .telecom-scope .megamenu a:hover, .telecom-scope .header-menu li a:hover, .telecom-scope .dropdown-item:hover { background: var(--primary-container) !important; color: var(--primary) !important; } /* Header search */ .telecom-scope .header-search, .telecom-scope .header-search-wrapper { background: var(--surface-low) !important; border: 1px solid var(--outline) !important; border-radius: var(--r-md) !important; } .telecom-scope .header-search .form-control, .telecom-scope .header-search input { background: transparent !important; border: none !important; color: var(--on-surface) !important; } .telecom-scope .header-search .form-control::placeholder, .telecom-scope .header-search input::placeholder { color: var(--on-surface-variant); } .telecom-scope .header-search .btn, .telecom-scope .search-toggle { color: var(--on-surface-variant) !important; background: transparent !important; } .telecom-scope .header-search .btn:hover { color: var(--primary) !important; } .telecom-scope .cart-count { background: var(--primary) !important; color: var(--on-primary) !important; border-radius: var(--r-full) !important; font-weight: 700; } .telecom-scope .mobile-menu-toggler { color: var(--on-surface) !important; } /* ============ BUTTONS =================================================== */ .telecom-scope .btn, .telecom-scope .uk-button { border-radius: var(--r-md) !important; font-weight: 600 !important; font-size: 14px; padding: 12px 22px; border: 1px solid transparent; background: var(--surface-cont); color: var(--on-surface) !important; transition: background .18s, transform .12s, box-shadow .18s; } .telecom-scope .btn:hover, .telecom-scope .uk-button:hover { background: var(--surface-high); } .telecom-scope .btn:active { transform: translateY(1px); } .telecom-scope .btn-primary, .telecom-scope .btn-login, .telecom-scope .btn-g, .telecom-scope .uk-button-primary { background: var(--primary) !important; border-color: var(--primary) !important; color: var(--on-primary) !important; box-shadow: var(--el-1); } .telecom-scope .btn-primary:hover, .telecom-scope .btn-login:hover, .telecom-scope .btn-g:hover, .telecom-scope .uk-button-primary:hover { background: var(--primary-hover) !important; border-color: var(--primary-hover) !important; } .telecom-scope .btn-outline-primary, .telecom-scope .btn-outline-primary-2, .telecom-scope .btn-outline-dark, .telecom-scope .btn-default, .telecom-scope .uk-button-default { background: transparent !important; border: 1px solid var(--outline) !important; color: var(--on-surface) !important; } .telecom-scope .btn-outline-primary:hover, .telecom-scope .btn-outline-primary-2:hover, .telecom-scope .btn-outline-dark:hover, .telecom-scope .btn-default:hover, .telecom-scope .uk-button-default:hover { border-color: var(--primary) !important; color: var(--primary) !important; background: var(--primary-container) !important; } .telecom-scope .btn-success, .telecom-scope .btn-outline-success { background: var(--success) !important; border-color: var(--success) !important; color: var(--on-success) !important; } .telecom-scope .btn-danger, .telecom-scope .btn-outline-danger { background: var(--error) !important; border-color: var(--error) !important; color: var(--on-error) !important; } .telecom-scope .btn-warning, .telecom-scope .btn-outline-warning { background: var(--warning) !important; border-color: var(--warning) !important; color: var(--on-warning) !important; } .telecom-scope .btn-dark, .telecom-scope .btn-secondary { background: var(--surface-high) !important; border-color: var(--surface-high) !important; color: var(--on-surface) !important; } .telecom-scope .btn-link { background: transparent !important; border: none !important; color: var(--primary) !important; padding: 6px 0; } .telecom-scope .btn-link:hover { color: var(--primary-hover) !important; } .telecom-scope .btn-sm { padding: 8px 14px; font-size: 13px; } .telecom-scope .btn-lg, .telecom-scope .btn-minwidth-lg { padding: 15px 28px; font-size: 15px; } /* ============ FORMS ===================================================== */ .telecom-scope .form-control, .telecom-scope input[type="text"], .telecom-scope input[type="email"], .telecom-scope input[type="password"], .telecom-scope input[type="number"], .telecom-scope input[type="tel"], .telecom-scope input[type="search"], .telecom-scope input[type="url"], .telecom-scope textarea, .telecom-scope select, .telecom-scope .uk-input, .telecom-scope .uk-select, .telecom-scope .uk-textarea { background: var(--surface-low) !important; color: var(--on-surface) !important; border: 1px solid var(--outline) !important; border-radius: var(--r-md) !important; font-family: var(--font-body) !important; font-size: 15px; padding: 11px 14px; height: auto; transition: border-color .18s, box-shadow .18s; } .telecom-scope .form-control::placeholder, .telecom-scope input::placeholder, .telecom-scope textarea::placeholder { color: var(--on-surface-variant) !important; } .telecom-scope .form-control:focus, .telecom-scope input:focus, .telecom-scope textarea:focus, .telecom-scope select:focus, .telecom-scope .uk-input:focus, .telecom-scope .uk-select:focus, .telecom-scope .uk-textarea:focus { border-color: var(--primary) !important; background: var(--surface-low) !important; color: var(--on-surface) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent) !important; outline: none; } .telecom-scope input[type="checkbox"], .telecom-scope input[type="radio"] { accent-color: var(--primary); width: 16px; height: 16px; } .telecom-scope label, .telecom-scope .control-label, .telecom-scope .uk-form-label { font-size: 13px; font-weight: 600; color: var(--on-surface-variant) !important; margin-bottom: 6px; } .telecom-scope .input-group-text { background: var(--surface-cont) !important; color: var(--on-surface-variant) !important; border: 1px solid var(--outline) !important; border-radius: var(--r-md) !important; font-size: 14px; } .telecom-scope .help-block, .telecom-scope .help-block-error, .telecom-scope .invalid-feedback { font-size: 13px; color: var(--error) !important; } .telecom-scope .custom-control-label::before { border-radius: var(--r-sm) !important; } /* ============ NAV / BREADCRUMB / PAGINATION ============================= */ .telecom-scope .breadcrumb, .telecom-scope .breadcrumb-nav { background: transparent !important; border-bottom: 1px solid var(--outline-variant) !important; padding: var(--s-4) 0 !important; margin: 0 !important; } .telecom-scope .breadcrumb-item, .telecom-scope .breadcrumb li, .telecom-scope .breadcrumb a { font-size: 13px; color: var(--on-surface-variant) !important; } .telecom-scope .breadcrumb-item.active, .telecom-scope .breadcrumb li.active { color: var(--on-surface) !important; font-weight: 600; } .telecom-scope .breadcrumb a:hover { color: var(--primary) !important; } .telecom-scope .breadcrumb-item + .breadcrumb-item::before { color: var(--on-surface-variant); opacity: .5; } /* Pagination moderne - Design System ECE */ .telecom-scope .pagination { display: flex; justify-content: center; gap: 4px; margin: var(--s-8) 0; flex-wrap: wrap; } .telecom-scope .pagination .page-item { margin: 0; } .telecom-scope .pagination .page-link, .telecom-scope .uk-pagination li a { background: var(--surface) !important; border: 1px solid var(--outline-variant) !important; border-radius: var(--r-md) !important; color: var(--on-surface-variant) !important; font-weight: 600; font-size: 14px; padding: 10px 16px; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all .15s ease; position: relative; overflow: hidden; } /* Hover state avec micro-interaction */ .telecom-scope .pagination .page-link:hover { border-color: var(--primary) !important; color: var(--primary) !important; background: var(--primary-container) !important; transform: translateY(-1px); box-shadow: var(--el-1); } /* Active state - page courante */ .telecom-scope .pagination .page-item.active .page-link, .telecom-scope .pagination .active .page-link, .telecom-scope .pagination .active span, .telecom-scope .uk-pagination .uk-active span { background: var(--primary) !important; border-color: var(--primary) !important; color: var(--on-primary) !important; font-weight: 700; box-shadow: var(--el-2); z-index: 1; } /* Disabled state */ .telecom-scope .pagination .page-item.disabled .page-link { background: var(--surface-low) !important; border-color: var(--outline-variant) !important; color: var(--on-surface-variant) !important; opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* Focus state pour accessibilité */ .telecom-scope .pagination .page-link:focus { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--primary) !important; } /* First/Last buttons styles */ .telecom-scope .pagination .page-link[aria-label="First"], .telecom-scope .pagination .page-link[aria-label="Last"], .telecom-scope .pagination .page-link[rel="first"], .telecom-scope .pagination .page-link[rel="last"] { font-weight: 700; letter-spacing: 0.02em; } /* Mobile responsive */ @media (max-width: 767px) { .telecom-scope .pagination { gap: 2px; } .telecom-scope .pagination .page-link, .telecom-scope .uk-pagination li a { padding: 8px 12px; font-size: 13px; min-width: 40px; min-height: 40px; } .telecom-scope .pagination .page-item:first-child .page-link, .telecom-scope .pagination .page-item:last-child .page-link { display: none; } } .telecom-scope .nav-link, .telecom-scope .nav-pills .nav-link, .telecom-scope .nav-tabs .nav-link, .telecom-scope .uk-subnav a { border-radius: var(--r-md) !important; font-weight: 600; font-size: 14px; color: var(--on-surface-variant) !important; padding: 10px 18px; transition: background .15s, color .15s; } .telecom-scope .nav-link:hover, .telecom-scope .nav-pills .nav-link:hover, .telecom-scope .nav-tabs .nav-link:hover { color: var(--primary) !important; background: var(--surface-cont); } .telecom-scope .nav-pills .nav-link.active, .telecom-scope .nav-tabs .nav-link.active, .telecom-scope .uk-subnav .uk-active a { background: var(--primary) !important; color: var(--on-primary) !important; } .telecom-scope .nav-tabs { border-bottom: 1px solid var(--outline-variant) !important; } /* ============ TABLES ==================================================== */ .telecom-scope .table, .telecom-scope table { color: var(--on-surface) !important; border-collapse: separate; border-spacing: 0; } .telecom-scope .table thead th, .telecom-scope .table th { background: var(--surface-cont) !important; color: var(--on-surface-variant) !important; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; border: none !important; border-bottom: 1px solid var(--outline-variant) !important; padding: 14px 16px !important; } .telecom-scope .table td, .telecom-scope .table tbody td { background: transparent !important; color: var(--on-surface) !important; border-top: 1px solid var(--outline-variant) !important; padding: 14px 16px !important; } .telecom-scope .table-striped tbody tr:nth-of-type(odd), .telecom-scope .uk-table-striped tbody tr:nth-of-type(odd) { background: var(--surface-low) !important; } .telecom-scope .table-hover tbody tr:hover, .telecom-scope .uk-table-hover tbody tr:hover { background: var(--primary-container) !important; } .telecom-scope .table-responsive, .telecom-scope .table_desc { border: 1px solid var(--outline-variant) !important; border-radius: var(--r-lg) !important; overflow: hidden; } /* ============ CARDS / PANELS =========================================== */ .telecom-scope .card, .telecom-scope .panel, .telecom-scope .well, .telecom-scope .box, .telecom-scope .box.box-solid, .telecom-scope .uk-card, .telecom-scope .uk-card-default, .telecom-scope .card-bordered { background: var(--surface) !important; color: var(--on-surface) !important; border: 1px solid var(--outline-variant) !important; border-radius: var(--r-lg) !important; box-shadow: var(--el-1) !important; } .telecom-scope .card-header, .telecom-scope .card-title, .telecom-scope .box-header, .telecom-scope .panel-heading, .telecom-scope .uk-card-header { background: var(--surface-low) !important; color: var(--on-surface) !important; border-bottom: 1px solid var(--outline-variant) !important; border-radius: var(--r-lg) var(--r-lg) 0 0 !important; font-weight: 700; padding: var(--s-4) var(--s-5) !important; } .telecom-scope .card-body, .telecom-scope .box-body, .telecom-scope .uk-card-body { padding: var(--s-5) !important; } /* ============ PRODUCT CARDS (Porto .product / .product-7) ============== */ .telecom-scope .product, .telecom-scope .product.product-7 { background: var(--surface) !important; border: 1px solid var(--outline-variant) !important; border-radius: var(--r-lg) !important; box-shadow: var(--el-1); padding: var(--s-4); transition: transform .2s, box-shadow .2s, border-color .2s; } .telecom-scope .product:hover { transform: translateY(-4px); box-shadow: var(--el-3); border-color: color-mix(in srgb, var(--primary) 40%, var(--outline-variant)); } .telecom-scope .product-media { background: var(--surface-cont) !important; border-radius: var(--r-md) !important; border: 1px solid var(--outline-variant); } .telecom-scope .product-media img { transition: transform .3s; } .telecom-scope .product:hover .product-media img { transform: scale(1.04); } .telecom-scope .product-body { background: transparent; } .telecom-scope .product-title, .telecom-scope .product .product-title a { color: var(--on-surface) !important; font-family: var(--font-display) !important; font-weight: 600 !important; font-size: 16px !important; line-height: 1.3 !important; letter-spacing: -0.01em; } .telecom-scope .product-title a:hover { color: var(--primary) !important; } .telecom-scope .product-price, .telecom-scope .new-price, .telecom-scope .new_price, .telecom-scope .current_price { color: var(--primary) !important; font-family: var(--font-display); font-weight: 700; } .telecom-scope .old-price, .telecom-scope .old_price { color: var(--on-surface-variant) !important; text-decoration: line-through; } /* Product actions */ .telecom-scope .product-action-vertical .btn-product-icon, .telecom-scope .btn-product-icon, .telecom-scope .btn-wishlist, .telecom-scope .btn-quickview { background: var(--surface) !important; border: 1px solid var(--outline-variant) !important; border-radius: var(--r-full) !important; color: var(--on-surface-variant) !important; box-shadow: var(--el-1); } .telecom-scope .product-action-vertical .btn-product-icon:hover, .telecom-scope .btn-wishlist:hover, .telecom-scope .btn-quickview:hover { background: var(--primary-container) !important; border-color: var(--primary) !important; color: var(--primary) !important; } .telecom-scope .product-action .btn-product, .telecom-scope .btn-product { background: var(--primary) !important; border: 1px solid var(--primary) !important; color: var(--on-primary) !important; border-radius: var(--r-md) !important; font-weight: 600; font-size: 14px; } .telecom-scope .product-action .btn-product:hover, .telecom-scope .btn-product:hover { background: var(--primary-hover) !important; border-color: var(--primary-hover) !important; } .telecom-scope .ratings-container, .telecom-scope .ratings { color: var(--on-surface-variant); } .telecom-scope .ratings::before, .telecom-scope .ratings-container::before { color: var(--outline) !important; } .telecom-scope .ratings-val, .telecom-scope .rating, .telecom-scope .ratings-container .rating, .telecom-scope .star-rating, .telecom-scope .rating-stars { color: var(--star) !important; } /* Toolbox / sidebar */ .telecom-scope .toolbox { background: var(--surface) !important; border: 1px solid var(--outline-variant) !important; border-radius: var(--r-lg); color: var(--on-surface-variant) !important; } .telecom-scope .toolbox a, .telecom-scope .toolbox-left, .telecom-scope .toolbox-right { color: var(--on-surface-variant) !important; font-size: 14px; } .telecom-scope .sidebar, .telecom-scope .sidebar_widget, .telecom-scope .widget, .telecom-scope .widget-collapsible { background: transparent !important; } .telecom-scope .widget-title, .telecom-scope .widget .widget-title { color: var(--on-surface) !important; font-family: var(--font-display) !important; font-weight: 700; font-size: 16px; border-bottom: 1px solid var(--outline-variant) !important; padding-bottom: var(--s-2); } .telecom-scope .widget a, .telecom-scope .widget-list a { color: var(--on-surface-variant) !important; } .telecom-scope .widget a:hover, .telecom-scope .widget-list a:hover { color: var(--primary) !important; } /* ============ OWL CAROUSEL ============================================= */ .telecom-scope .owl-dots .owl-dot span { background: var(--outline) !important; border-radius: var(--r-full) !important; width: 10px; height: 10px; margin: 0 5px; } .telecom-scope .owl-dots .owl-dot.active span, .telecom-scope .owl-dots .owl-dot:hover span { background: var(--primary) !important; } .telecom-scope .owl-nav [class*='owl-'] { background: var(--surface) !important; color: var(--on-surface) !important; border: 1px solid var(--outline-variant) !important; border-radius: var(--r-full) !important; box-shadow: var(--el-1); } .telecom-scope .owl-nav [class*='owl-']:hover { background: var(--primary) !important; color: var(--on-primary) !important; border-color: var(--primary) !important; } /* ============ BANNERS / ICON-BOXES ===================================== */ .telecom-scope .banner, .telecom-scope .banner-overlay { background: var(--surface-low) !important; border-radius: var(--r-lg); overflow: hidden; } .telecom-scope .banner-overlay::before { background: linear-gradient(180deg, transparent, rgba(0,0,0,0.55)); opacity: .9; } .telecom-scope .banner-content { background: rgba(0,0,0,0.45) !important; } .telecom-scope .banner-title, .telecom-scope .banner-subtitle { color: #fff !important; text-shadow: 0 1px 8px rgba(0,0,0,0.4); } .telecom-scope .banner-link { color: #fff !important; } .telecom-scope .banner-link:hover, .telecom-scope .btn-outline-white-3 { border-color: #fff !important; color: #fff !important; background: rgba(0,0,0,0.35) !important; border-radius: var(--r-md); font-weight: 600; font-size: 13px; } .telecom-scope .icon-box, .telecom-scope .icon-box-side, .telecom-scope .feature-box { background: var(--surface) !important; border: 1px solid var(--outline-variant) !important; border-radius: var(--r-lg); } .telecom-scope .icon-box-icon, .telecom-scope .feature-box-icon { color: var(--primary) !important; } .telecom-scope .icon-box-title, .telecom-scope .feature-box-title { color: var(--on-surface) !important; } /* ============ PRODUCT DETAILS (zoom, gallery, tabs) ==================== */ .telecom-scope .product-details, .telecom-scope .product-details-top { color: var(--on-surface); } .telecom-scope .product-gallery, .telecom-scope .product-main-image, .telecom-scope .product-image-gallery { background: var(--surface-cont) !important; border: 1px solid var(--outline-variant) !important; border-radius: var(--r-xl) !important; } .telecom-scope .product-gallery-item { background: var(--surface-cont) !important; border: 1px solid var(--outline-variant) !important; border-radius: var(--r-md) !important; } .telecom-scope .product-gallery-item.active, .telecom-scope .product-gallery-item:hover { border-color: var(--primary) !important; } .telecom-scope .zoomWindowContainer .zoomWindow, .telecom-scope .zoomWindow { background: var(--surface-cont) !important; border: 1px solid var(--outline-variant) !important; box-shadow: var(--el-3) !important; } .telecom-scope .product-details-accordion, .telecom-scope .accordion .card-header, .telecom-scope .card-header a { background: var(--surface) !important; color: var(--on-surface) !important; border: 1px solid var(--outline-variant) !important; border-radius: var(--r-md) !important; font-weight: 700; } .telecom-scope .accordion .card { background: var(--surface) !important; border: none !important; border-radius: var(--r-md) !important; box-shadow: none !important; } .telecom-scope .card-body { color: var(--on-surface-variant); } .telecom-scope .sticky-bar { background: var(--surface) !important; border: 1px solid var(--outline-variant) !important; border-radius: var(--r-lg); box-shadow: var(--el-2); } .telecom-scope .product-desc-content, .telecom-scope .product-content p, .telecom-scope .product-short-desc { color: var(--on-surface-variant) !important; } .telecom-scope .input-spinner, .telecom-scope .product-quantity, .telecom-scope .product_quantity, .telecom-scope .product-details-quantity { background: var(--surface-low) !important; border: 1px solid var(--outline) !important; border-radius: var(--r-md); } .telecom-scope .input-spinner button { background: transparent !important; color: var(--on-surface) !important; } .telecom-scope .input-spinner button:hover { background: var(--surface-cont); } /* Review block */ .telecom-scope .review { border-bottom: 1px solid var(--outline-variant) !important; } .telecom-scope .review h4, .telecom-scope .review .review-content p, .telecom-scope .review .col h4 { color: var(--on-surface) !important; } .telecom-scope .review-date, .telecom-scope .review-action a { color: var(--on-surface-variant) !important; } /* ============ MAGNIFIC POPUP =========================================== */ .telecom-scope .mfp-bg { background: rgba(15,18,22,0.85) !important; } .telecom-scope .mfp-content, .telecom-scope .mfp-figure, .telecom-scope .mfp-inline-holder .mfp-content { background: var(--surface) !important; border-radius: var(--r-lg); border: 1px solid var(--outline-variant); } .telecom-scope .mfp-close, .telecom-scope .mfp-arrow { color: var(--on-surface) !important; background: var(--surface) !important; border-radius: var(--r-full); border: 1px solid var(--outline-variant); } .telecom-scope .mfp-close:hover { color: var(--primary) !important; } /* ============ MOBILE MENU ============================================== */ .telecom-scope .mobile-menu-overlay, .telecom-scope .mobile-menu-container, .telecom-scope .mobile-menu-wrapper { background: var(--surface) !important; border-left: 1px solid var(--outline-variant) !important; } .telecom-scope .mobile-nav, .telecom-scope .mobile-menu, .telecom-scope .mobile-menu li > a { background: transparent !important; color: var(--on-surface) !important; font-weight: 600; font-size: 15px; border-bottom: 1px solid var(--outline-variant); } .telecom-scope .mobile-menu li > a:hover, .telecom-scope .mobile-menu li.active > a { color: var(--primary) !important; background: var(--primary-container); } .telecom-scope .mobile-search input { background: var(--surface-low) !important; border: 1px solid var(--outline) !important; border-radius: var(--r-md); } /* ============ COOKIE CONSENT =========================================== */ .telecom-scope .cc-window, .telecom-scope .cc-banner, .telecom-scope .cc-window.cc-banner { background: var(--surface) !important; color: var(--on-surface) !important; border-top: 1px solid var(--outline-variant) !important; box-shadow: var(--el-3) !important; } .telecom-scope .cc-window a, .telecom-scope .cc-link { color: var(--primary) !important; } .telecom-scope .cc-btn, .telecom-scope .cc-dismiss { background: var(--primary) !important; color: var(--on-primary) !important; border-radius: var(--r-md); font-weight: 600; font-size: 14px; } /* ============ ALERTS / BADGES / TOASTS ================================= */ .telecom-scope .alert, .telecom-scope .uk-alert { border-radius: var(--r-md) !important; border: 1px solid var(--outline-variant) !important; background: var(--surface-low) !important; color: var(--on-surface) !important; padding: var(--s-3) var(--s-4); } .telecom-scope .alert-success { background: var(--success-container) !important; color: var(--success) !important; border-color: var(--success) !important; } .telecom-scope .alert-danger, .telecom-scope .alert-error { background: var(--error-container) !important; color: var(--error) !important; border-color: var(--error) !important; } .telecom-scope .alert-warning { background: var(--warning-container) !important; color: var(--warning) !important; border-color: var(--warning) !important; } .telecom-scope .alert-info { background: var(--surface-cont) !important; color: var(--info) !important; } .telecom-scope .badge { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-full) !important; background: var(--surface-cont); color: var(--on-surface-variant); } .telecom-scope .badge-primary, .telecom-scope .badge-danger { background: var(--primary) !important; color: var(--on-primary) !important; } .telecom-scope .badge-success { background: var(--success) !important; color: var(--on-success) !important; } .telecom-scope .badge-warning { background: var(--warning) !important; color: var(--on-warning) !important; } .telecom-scope #toast-container > .toast, .telecom-scope #toast-container > div { background: var(--on-surface) !important; color: var(--surface) !important; border-radius: var(--r-md) !important; box-shadow: var(--el-3) !important; opacity: 1; } .telecom-scope #toast-container > .toast-success { background: var(--success) !important; color: var(--on-success) !important; } .telecom-scope #toast-container > .toast-error { background: var(--error) !important; color: var(--on-error) !important; } .telecom-scope #toast-container > .toast-warning { background: var(--warning) !important; color: var(--on-warning) !important; } .telecom-scope #toast-container > .toast-info { background: var(--info) !important; color: #fff !important; } /* ============ MODAL ==================================================== */ .telecom-scope .modal-content { background: var(--surface) !important; color: var(--on-surface) !important; border: 1px solid var(--outline-variant) !important; border-radius: var(--r-lg) !important; box-shadow: var(--el-3) !important; } .telecom-scope .modal-header { background: var(--surface-low) !important; border-bottom: 1px solid var(--outline-variant) !important; border-radius: var(--r-lg) var(--r-lg) 0 0 !important; } .telecom-scope .modal-title, .telecom-scope .modal-header h5 { color: var(--on-surface) !important; font-weight: 700; } .telecom-scope .modal-footer { border-top: 1px solid var(--outline-variant) !important; border-radius: 0 0 var(--r-lg) var(--r-lg) !important; background: var(--surface-low); } .telecom-scope .modal .close, .telecom-scope .modal-header .close, .telecom-scope button.close { color: var(--on-surface-variant) !important; text-shadow: none; opacity: 1; } .telecom-scope .modal .close:hover { color: var(--primary) !important; } .telecom-scope .modal-backdrop.show { opacity: 0.6; background: #000; } /* ============ UIKIT ==================================================== */ .telecom-scope .uk-container { max-width: var(--container); } .telecom-scope .uk-section { background: var(--surface-dim); } .telecom-scope .uk-card { box-shadow: var(--el-1) !important; } .telecom-scope .uk-card-title, .telecom-scope .uk-card .uk-card-title { color: var(--on-surface) !important; font-family: var(--font-display); font-weight: 700; } .telecom-scope .uk-link, .telecom-scope a.uk-link { color: var(--primary); } .telecom-scope .uk-text-muted { color: var(--on-surface-variant) !important; } .telecom-scope .uk-text-success { color: var(--success) !important; } .telecom-scope .uk-text-danger { color: var(--error) !important; } .telecom-scope .uk-text-warning { color: var(--warning) !important; } .telecom-scope .uk-text-primary { color: var(--primary) !important; } .telecom-scope .uk-text-lead { color: var(--on-surface-variant) !important; } .telecom-scope .uk-heading-medium, .telecom-scope .uk-heading-large, .telecom-scope h1.uk-heading, .telecom-scope h2.uk-heading { color: var(--on-surface) !important; } .telecom-scope .uk-divider-icon { border-top-color: var(--outline-variant); } .telecom-scope .uk-accordion-title, .telecom-scope .uk-subnav a { color: var(--on-surface-variant); font-weight: 600; font-size: 15px; } .telecom-scope .uk-accordion-title:hover, .telecom-scope .uk-subnav a:hover { color: var(--primary); } .telecom-scope .uk-label { background: var(--surface-cont); color: var(--on-surface-variant); border-radius: var(--r-full); font-size: 11px; font-weight: 600; } .telecom-scope .uk-label-success { background: var(--success) !important; color: var(--on-success) !important; } .telecom-scope .uk-label-danger { background: var(--error) !important; color: var(--on-error) !important; } .telecom-scope .uk-modal-dialog, .telecom-scope .uk-modal-body { background: var(--surface) !important; color: var(--on-surface) !important; border-radius: var(--r-lg); } .telecom-scope .uk-offcanvas-bar { background: var(--surface) !important; color: var(--on-surface) !important; } .telecom-scope .uk-navbar-nav li a { color: var(--on-surface) !important; font-weight: 600; } .telecom-scope .uk-breadcrumb li a, .telecom-scope .uk-breadcrumb li span { color: var(--on-surface-variant) !important; font-size: 13px; } .telecom-scope .uk-form-stacked .uk-form-label { color: var(--on-surface-variant) !important; } .telecom-scope .uk-background-muted { background: var(--surface-low) !important; } .telecom-scope .uk-background-default { background: var(--surface) !important; } .telecom-scope .tm-product-card, .telecom-scope .tm-shine { background: var(--surface) !important; border: 1px solid var(--outline-variant) !important; border-radius: var(--r-lg); } .telecom-scope .tm-product-card-title, .telecom-scope .tm-product-card-title a { color: var(--on-surface) !important; font-family: var(--font-display); font-weight: 600; } .telecom-scope .tm-product-card-price, .telecom-scope .tm-product-price { color: var(--primary) !important; font-family: var(--font-display); font-weight: 700; } .telecom-scope .uk-lightbox { background: rgba(15,18,22,0.92); } /* ============ ADMINLTE ================================================= */ .telecom-scope .content-wrapper, .telecom-scope .content-header, .telecom-scope .content { background: var(--surface-dim) !important; color: var(--on-surface); } .telecom-scope .main-header { background: var(--surface) !important; border-bottom: 1px solid var(--outline-variant) !important; color: var(--on-surface) !important; } .telecom-scope .small-box { border-radius: var(--r-lg) !important; } .telecom-scope .box-title { color: var(--on-surface) !important; font-family: var(--font-display); font-weight: 700; } .telecom-scope .box-footer { border-top: 1px solid var(--outline-variant) !important; background: var(--surface-low) !important; } /* ============ TIMELINE (tracking) ====================================== */ .telecom-scope .timeline, .telecom-scope .timeline .entry { background: transparent; } .telecom-scope .timeline .entry .title, .telecom-scope .timeline .entry .body { color: var(--on-surface-variant) !important; border-color: var(--outline-variant) !important; } .telecom-scope .timeline .entry .title h3, .telecom-scope .timeline .entry .title .time { color: var(--on-surface) !important; font-weight: 700; } .telecom-scope .timeline::before { background: var(--outline) !important; } /* ============ SELECT2 / FILE INPUT / SUMMERNOTE ======================== */ .telecom-scope .select2-container--default .select2-selection--single, .telecom-scope .select2-container--default .select2-selection--multiple { background: var(--surface-low) !important; border: 1px solid var(--outline) !important; border-radius: var(--r-md) !important; color: var(--on-surface) !important; min-height: 42px; } .telecom-scope .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--on-surface) !important; line-height: 40px; } .telecom-scope .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--on-surface-variant) transparent transparent transparent !important; } .telecom-scope .select2-dropdown { background: var(--surface) !important; border: 1px solid var(--outline-variant) !important; border-radius: var(--r-md) !important; box-shadow: var(--el-2); } .telecom-scope .select2-results__option { color: var(--on-surface-variant) !important; } .telecom-scope .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--primary-container) !important; color: var(--primary) !important; } .telecom-scope .select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--surface-cont) !important; border: 1px solid var(--outline-variant) !important; color: var(--on-surface) !important; border-radius: var(--r-sm) !important; } .telecom-scope .file-caption, .telecom-scope .file-preview, .telecom-scope .input-group-file .btn-file { background: var(--surface-low) !important; border: 1px solid var(--outline-variant) !important; border-radius: var(--r-md) !important; color: var(--on-surface-variant) !important; } .telecom-scope .file-caption-name { color: var(--on-surface) !important; } .telecom-scope .file-drop-zone { border: 1px dashed var(--outline) !important; background: var(--surface-low) !important; border-radius: var(--r-md); } .telecom-scope .file-preview-frame, .telecom-scope .file-preview-frame:hover { background: var(--surface) !important; border: 1px solid var(--outline-variant) !important; border-radius: var(--r-md) !important; box-shadow: var(--el-1) !important; } .telecom-scope .note-editor.note-frame, .telecom-scope .note-editor .note-toolbar, .telecom-scope .note-editor .note-editing-area .note-editable { background: var(--surface-low) !important; color: var(--on-surface) !important; border-color: var(--outline-variant) !important; } /* ============ PORTO UTILITY COLOR REMAP ================================ */ .telecom-scope .bg-light, .telecom-scope .bg-light-2, .telecom-scope .bg-lighter, .telecom-scope .bg-gray, .telecom-scope .bg-white, .telecom-scope .bg-body, .telecom-scope .account_page_bg, .telecom-scope .checkout_page_bg, .telecom-scope .wishlist_page_bg, .telecom-scope .error_page_bg, .telecom-scope .product_page_bg, .telecom-scope .login-page, .telecom-scope .shop_area, .telecom-scope .featured { background: var(--surface-dim) !important; } .telecom-scope .text-dark, .telecom-scope .text-dark-2, .telecom-scope .text-body { color: var(--on-surface) !important; } .telecom-scope .text-white, .telecom-scope .text-light { color: #fff !important; } .telecom-scope .text-muted { color: var(--on-surface-variant) !important; } .telecom-scope .text-secondary { color: var(--on-surface-variant) !important; } .telecom-scope .text-primary { color: var(--primary) !important; } .telecom-scope .text-success { color: var(--success) !important; } .telecom-scope .text-danger { color: var(--error) !important; } .telecom-scope .text-warning { color: var(--warning) !important; } .telecom-scope .bg-primary { background: var(--primary) !important; } .telecom-scope .bg-dark, .telecom-scope .bg-secondary { background: var(--surface-high) !important; } .telecom-scope .border, .telecom-scope .border-top, .telecom-scope .border-bottom { border-color: var(--outline-variant) !important; } .telecom-scope .heading, .telecom-scope .heading-center { color: var(--on-surface) !important; } .telecom-scope .heading .title, .telecom-scope .title { color: var(--on-surface) !important; } .telecom-scope .heading .title::before, .telecom-scope .heading .title::after { background: var(--primary) !important; } .telecom-scope .main { background: var(--surface-dim); min-height: 60vh; } .telecom-scope .page-content, .telecom-scope .page-header { background: var(--surface-dim) !important; padding-top: var(--s-12); padding-bottom: var(--s-12); } .telecom-scope .page-header { position: relative; border-bottom: 1px solid var(--outline-variant) !important; } .telecom-scope .page-header::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.7)); pointer-events: none; } .telecom-scope .page-header > .container, .telecom-scope .page-header > * { position: relative; z-index: 1; } .telecom-scope .page-header h1, .telecom-scope .page-header .page-title { color: #fff !important; } .telecom-scope .contact-box, .telecom-scope .touch-container, .telecom-scope .about-text, .telecom-scope .count-container { color: var(--on-surface-variant) !important; } .telecom-scope .contact-box h3, .telecom-scope .about-text h3 { color: var(--on-surface) !important; } .telecom-scope .count-title { font-family: var(--font-display); color: var(--primary) !important; font-weight: 700; } .telecom-scope #map iframe { border: 1px solid var(--outline-variant); border-radius: var(--r-md); } /* Dashboard account sidebar */ .telecom-scope .dashboard, .telecom-scope .nav-dashboard, .telecom-scope .account .nav-dashboard { background: var(--surface) !important; border: 1px solid var(--outline-variant) !important; border-radius: var(--r-lg); } .telecom-scope .nav-dashboard .nav-link, .telecom-scope .dashboard .nav-link { color: var(--on-surface-variant) !important; border-bottom: 1px solid var(--outline-variant); font-weight: 600; font-size: 14px; } .telecom-scope .nav-dashboard .nav-link.active, .telecom-scope .nav-dashboard .nav-link:hover { color: var(--primary) !important; background: var(--primary-container) !important; } /* QR code readability */ .telecom-scope .sticky-bar img[src*="qr"] { background: #fff; padding: 4px; border-radius: var(--r-sm); } /* CTA / footer */ .telecom-scope .cta, .telecom-scope .cta-separator { background: var(--surface) !important; border: 1px solid var(--outline-variant) !important; border-radius: var(--r-lg); } .telecom-scope .cta .cta-text, .telecom-scope .cta p { color: var(--on-surface-variant) !important; } .telecom-scope .cta .cta-title { color: var(--on-surface) !important; } .telecom-scope .footer { background: var(--surface-dim) !important; border-top: 1px solid var(--outline-variant) !important; color: var(--on-surface-variant) !important; font-size: 15px; } .telecom-scope .footer .footer-logo { opacity: .9; } .telecom-scope .footer .service { border-bottom: 1px solid var(--outline-variant) !important; } .telecom-scope .footer .icon-box-icon { color: var(--primary) !important; } .telecom-scope .footer .icon-box-title, .telecom-scope .footer .widget-title { color: var(--on-surface) !important; font-family: var(--font-display) !important; font-weight: 700; } .telecom-scope .footer .widget-list a, .telecom-scope .footer a { color: var(--on-surface-variant) !important; } .telecom-scope .footer .widget-list a:hover, .telecom-scope .footer a:hover { color: var(--primary) !important; } .telecom-scope .footer .footer-bottom { border-top: 1px solid var(--outline-variant) !important; background: var(--surface-low) !important; } .telecom-scope .footer .footer-copyright { color: var(--on-surface-variant) !important; } .telecom-scope .footer .social-icon { border: 1px solid var(--outline-variant); color: var(--on-surface-variant) !important; border-radius: var(--r-full); transition: background .15s, color .15s; } .telecom-scope .footer .social-icon:hover { background: var(--primary); color: var(--on-primary) !important; } /* Scroll-top */ .telecom-scope #scroll-top { background: var(--primary) !important; color: var(--on-primary) !important; border-radius: var(--r-full) !important; box-shadow: var(--el-2) !important; } .telecom-scope #scroll-top:hover { background: var(--primary-hover) !important; } /* ============ FOOTER MODERNISÉ ============================================ */ /* Structure principale du footer */ .telecom-scope .telecom-footer { background: var(--surface-dim) !important; color: var(--on-surface-variant) !important; border-top: 1px solid var(--outline-variant) !important; } /* Services bar */ .telecom-scope .telecom-footer__services { background: var(--surface-low) !important; border-bottom: 1px solid var(--outline-variant) !important; padding: var(--s-8) 0; } .telecom-scope .telecom-service-card { display: flex; align-items: flex-start; gap: var(--s-4); padding: var(--s-4); border-radius: var(--r-md); transition: background .15s, transform .15s; } .telecom-scope .telecom-service-card:hover { background: var(--surface-cont) !important; transform: translateY(-2px); } .telecom-scope .telecom-service-card__icon { width: 48px; height: 48px; border-radius: var(--r-md); background: var(--primary-container) !important; color: var(--primary) !important; display: grid; place-items: center; font-size: 20px; flex-shrink: 0; } .telecom-scope .telecom-service-card__title { font-family: var(--font-display); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--on-surface) !important; margin: 0 0 4px; } .telecom-scope .telecom-service-card__text { font-size: 13px; color: var(--on-surface-variant) !important; line-height: 1.5; margin: 0; } /* Main footer */ .telecom-scope .telecom-footer__main { padding: var(--s-12) 0; background: var(--surface-dim) !important; } .telecom-scope .telecom-footer-widget { margin-bottom: var(--s-8); } .telecom-scope .telecom-footer-widget__logo { margin-bottom: var(--s-4); } .telecom-scope .telecom-footer-widget__logo img { max-width: 140px; height: auto; } .telecom-scope .telecom-footer-widget__text { font-size: 14px; line-height: 1.7; color: var(--on-surface-variant) !important; margin-bottom: var(--s-4); } .telecom-scope .telecom-footer-widget__title { font-family: var(--font-display); font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--on-surface) !important; margin-bottom: var(--s-3); padding-bottom: var(--s-2); border-bottom: 2px solid var(--primary); } .telecom-scope .telecom-footer-widget__links { list-style: none; padding: 0; margin: 0; } .telecom-scope .telecom-footer-widget__links li { margin-bottom: var(--s-2); } .telecom-scope .telecom-footer-widget__links a { font-size: 14px; color: var(--on-surface-variant) !important; text-decoration: none; transition: color .15s, transform .15s; display: inline-block; } .telecom-scope .telecom-footer-widget__links a:hover { color: var(--primary) !important; transform: translateX(4px); } /* Social links */ .telecom-scope .telecom-social-links { display: flex; gap: var(--s-2); flex-wrap: wrap; } .telecom-scope .telecom-social-links__item { width: 40px; height: 40px; border-radius: var(--r-full); background: var(--surface-cont); color: var(--on-surface-variant) !important; display: grid; place-items: center; font-size: 16px; border: 1px solid var(--outline-variant); transition: background .15s, color .15s, border-color .15s, transform .15s; } .telecom-scope .telecom-social-links__item:hover { background: var(--primary) !important; color: var(--on-primary) !important; border-color: var(--primary) !important; transform: translateY(-2px); } /* Newsletter */ .telecom-scope .telecom-footer-widget__newsletter { margin-top: var(--s-4); } .telecom-scope .telecom-footer-widget__newsletter .form-control { border-radius: var(--r-md) 0 0 var(--r-md); border-color: var(--outline-variant); background: var(--surface-low) !important; color: var(--on-surface) !important; font-size: 14px; } .telecom-scope .telecom-footer-widget__newsletter .form-control::placeholder { color: var(--on-surface-variant); } .telecom-scope .telecom-footer-widget__newsletter .btn { border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--primary) !important; border-color: var(--primary) !important; color: var(--on-primary) !important; } .telecom-scope .telecom-footer-widget__newsletter .btn:hover { background: var(--primary-hover) !important; border-color: var(--primary-hover) !important; } /* Bottom footer */ .telecom-scope .telecom-footer__bottom { background: var(--surface-high) !important; border-top: 1px solid var(--outline-variant) !important; padding: var(--s-6) 0; } .telecom-scope .telecom-footer__copyright { font-size: 13px; color: var(--on-surface-variant) !important; margin: 0; display: flex; align-items: center; gap: var(--s-2); } .telecom-scope .telecom-footer__payments { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-4); flex-wrap: wrap; } .telecom-scope .telecom-footer__payments-text { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--on-surface-variant); } .telecom-scope .telecom-footer__payment-icons { display: flex; gap: var(--s-3); font-size: 24px; color: var(--on-surface-variant); } .telecom-scope .telecom-footer__payment-icons i { transition: color .15s; } .telecom-scope .telecom-footer__payment-icons i:hover { color: var(--primary); } /* Mobile responsive */ @media (max-width: 767px) { .telecom-scope .telecom-footer__services { padding: var(--s-6) 0; } .telecom-scope .telecom-service-card { margin-bottom: var(--s-4); } .telecom-scope .telecom-footer__main { padding: var(--s-8) 0; } .telecom-scope .telecom-footer-widget { margin-bottom: var(--s-6); } .telecom-scope .telecom-footer__bottom { padding: var(--s-4) 0; } .telecom-scope .telecom-footer__copyright, .telecom-scope .telecom-footer__payments { text-align: center; justify-content: center; } } /* ============ THEME TOGGLE BUTTON ====================================== */ .telecom-theme-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-full); border: 1px solid var(--outline-variant); background: var(--surface); color: var(--on-surface); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .telecom-theme-toggle:hover { background: var(--primary-container); color: var(--primary); border-color: var(--primary); } .telecom-theme-toggle i { font-size: 14px; } /* ============ TOP BANNER (ece-style marketing bar) ===================== */ .telecom-scope .top-banner { background: linear-gradient(135deg, var(--primary), var(--primary-hover)); color: var(--on-primary); padding: 8px 0; font-size: 13px; font-weight: 500; } .telecom-scope .top-banner__inner { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); flex-wrap: wrap; } .telecom-scope .top-banner__left, .telecom-scope .top-banner__right { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; } .telecom-scope .top-banner a { color: var(--on-primary) !important; opacity: .92; transition: opacity .15s; } .telecom-scope .top-banner a:hover { opacity: 1; } .telecom-scope .top-banner i { margin-right: 5px; } .telecom-scope .telecom-theme-toggle--banner { background: rgba(255,255,255,0.16); color: var(--on-primary) !important; border: 1px solid rgba(255,255,255,0.28); padding: 4px 12px; font-size: 12px; } .telecom-scope .telecom-theme-toggle--banner:hover { background: rgba(255,255,255,0.28); color: var(--on-primary) !important; border-color: rgba(255,255,255,0.4); } @media (max-width: 767px){ .telecom-scope .top-banner__hide { display: none; } .telecom-scope .top-banner__left, .telecom-scope .top-banner__right { gap: var(--s-3); } } /* ============ TWO-LEVEL HEADER (ECE Design System) ==================== */ /* Header principal avec design system ECE - Variables et tokens respectés */ /* Header container */ .telecom-scope .th-header { position: sticky; top: 0; z-index: 1000; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); border-bottom: 1px solid var(--outline-variant); box-shadow: var(--el-1); } /* --- Niveau 1 : barre principale --- */ .telecom-scope .th-header__bar { background: var(--surface); border-bottom: 1px solid var(--outline-variant); } .telecom-scope .th-header__bar-inner { display: flex; align-items: center; gap: var(--s-2); /* 12px → 8px : encore plus compact */ padding: var(--s-1) var(--s-2) 0; /* 8px → 4px top/bottom, 8px sides */ } /* Burger menu mobile */ .telecom-scope .th-header__burger { display: none; width: 32px; /* 36px → 32px : ultra-compact */ height: 32px; border-radius: var(--r-md); place-items: center; color: var(--on-surface); font-size: 16px; /* 18px → 16px */ background: transparent; border: 1px solid var(--outline-variant); cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .telecom-scope .th-header__burger:hover { background: var(--surface-cont); color: var(--primary); border-color: var(--primary); } /* Logo */ .telecom-scope .th-header__logo { flex-shrink: 0; display: inline-flex; align-items: center; transition: opacity .15s; } .telecom-scope .th-header__logo:hover { opacity: 0.85; } .telecom-scope .th-header__logo img { height: 24px; /* 28px → 24px : ultra-compact */ width: auto; max-width: 100px; /* 120px → 100px */ } /* Recherche */ .telecom-scope .th-header__search { flex: 1 1 auto; max-width: 560px; } /* Override header-search-extended pour compacter les marges */ .telecom-scope .header-search-extended { margin-right: 19rem; width: 100%; max-width: 570px; margin-top: 1rem !important; margin-bottom: 1rem !important; } /* Actions container */ .telecom-scope .th-header__actions { display: flex; align-items: center; gap: var(--s-1); margin-left: auto; } /* --- Boutons icônes (langue, thème, contact, about, wishlist, compte, panier) --- */ .telecom-scope .th-ico { position: relative; } .telecom-scope .th-ico__btn { width: 30px; /* 32px → 30px : ultra-compact */ height: 30px; border-radius: var(--r-md); display: inline-grid; place-items: center; color: var(--on-surface-variant); font-size: 15px; /* 16px → 15px */ background: transparent; border: 1px solid transparent; cursor: pointer; position: relative; transition: background .15s, color .15s, border-color .15s; } .telecom-scope .th-ico__btn:hover { background: var(--surface-cont); color: var(--primary); border-color: var(--outline-variant); } .telecom-scope .th-ico__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--primary); } /* Drapeaux dans boutons */ .telecom-scope .th-ico__btn .flag-icon { width: 18px; /* 20px → 18px */ height: 13px; /* 14px → 13px */ border-radius: var(--r-sm); display: inline-block; box-shadow: var(--el-1); } /* Badge panier/wishlist */ .telecom-scope .th-ico__btn .cart-count { position: absolute; top: 2px; /* 3px → 2px */ right: 2px; /* 3px → 2px */ min-width: 14px; /* 16px → 14px */ height: 14px; /* 16px → 14px */ padding: 0 2px; /* 0 3px → 0 2px */ border-radius: var(--r-full); background: var(--primary); color: var(--on-primary); font-size: 9px; /* 10px → 9px */ font-weight: 700; display: grid; place-items: center; line-height: 1; box-shadow: var(--el-1); border: 2px solid var(--surface); } /* --- Dropdowns niveau 1 (langue, compte) --- */ .telecom-scope .th-ico .th-dropdown { position: absolute; right: 0; top: calc(100% + 6px); /* 8px → 6px */ min-width: 200px; /* 210px → 200px */ background: var(--surface); border: 1px solid var(--outline-variant); border-radius: var(--r-lg); box-shadow: var(--el-3); padding: var(--s-2); /* 8px → 8px (gardé compact mais utilisable) */ opacity: 0; visibility: hidden; transform: translateY(-6px); /* -8px → -6px */ transition: opacity .18s, transform .18s, visibility .18s; z-index: 1100; } .telecom-scope .th-ico:hover .th-dropdown, .telecom-scope .th-ico:focus-within .th-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .telecom-scope .th-dropdown ul { list-style: none; padding: 0; margin: 0; } .telecom-scope .th-dropdown li { margin-bottom: 1px; /* 2px → 1px */ } .telecom-scope .th-dropdown li:last-child { margin-bottom: 0; } .telecom-scope .th-dropdown li a { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-2); /* 8px 12px → 4px 8px */ color: var(--on-surface-variant) !important; border-radius: var(--r-sm); font-size: 13px; /* 14px → 13px */ font-weight: 500; text-decoration: none; transition: background .15s, color .15s; } .telecom-scope .th-dropdown li a:hover { background: var(--primary-container); color: var(--primary) !important; } .telecom-scope .th-dropdown .flag-icon { width: 18px; /* 20px → 18px */ height: 13px; /* 14px → 13px */ border-radius: var(--r-sm); } /* --- Mini-cart dropdown --- */ .telecom-scope .th-ico--cart .dropdown-menu { min-width: 320px; /* 340px → 320px */ padding: var(--s-3); /* 16px → 12px */ background: var(--surface); border: 1px solid var(--outline-variant); border-radius: var(--r-lg); box-shadow: var(--el-3); } .telecom-scope .th-ico--cart .product { border-bottom: 1px solid var(--outline-variant); padding-bottom: var(--s-2); /* 12px → 8px */ margin-bottom: var(--s-2); /* 12px → 8px */ } .telecom-scope .th-ico--cart .product:last-child { border-bottom: none; margin-bottom: 0; } .telecom-scope .th-ico--cart .product-title a { color: var(--on-surface) !important; font-weight: 600; font-family: var(--font-display); font-size: 14px; /* Ajouté pour cohérence */ } .telecom-scope .th-ico--cart .cart-product-info { color: var(--on-surface-variant) !important; font-size: 12px; /* 13px → 12px */ } .telecom-scope .th-ico--cart .dropdown-cart-total { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; padding: var(--s-2) var(--s-2); /* 12px 8px → 8px 8px */ color: var(--on-surface) !important; border-top: 1px solid var(--outline-variant); margin-top: var(--s-2); /* 8px → 8px */ } .telecom-scope .th-ico--cart .cart-total-price { color: var(--primary) !important; font-family: var(--font-display); font-size: 16px; /* 18px → 16px */ } .telecom-scope .th-ico--cart .dropdown-cart-action { margin-top: var(--s-2); /* 12px → 8px */ } .telecom-scope .th-ico--cart .dropdown-cart-action .btn { width: 100%; font-weight: 600; padding: var(--s-2) var(--s-3); /* Ajouté pour compactage */ } /* --- Niveau 2 : nav catégories (scrollable + dropdown chacun) --- */ .telecom-scope .th-catnav { background: var(--surface-low); border-top: 1px solid var(--outline-variant); box-shadow: inset 0 1px 0 var(--outline-variant); } .telecom-scope .th-catnav__scroll { display: flex; align-items: center; gap: 2px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: var(--outline) transparent; padding: var(--s-2) 0; /* 4px → 8px : légèrement plus haut */ white-space: nowrap; } .telecom-scope .th-catnav__scroll::-webkit-scrollbar { height: 4px; /* 6px → 4px */ } .telecom-scope .th-catnav__scroll::-webkit-scrollbar-thumb { background: var(--outline); border-radius: var(--r-full); } .telecom-scope .th-catnav__link { display: inline-flex; align-items: center; gap: 4px; /* 6px → 4px */ padding: var(--s-1) var(--s-2); /* 9px 14px → 4px 8px */ border-radius: var(--r-md); font-size: 13px; /* 14px → 13px */ font-weight: 600; font-family: var(--font-body); color: var(--on-surface-variant); white-space: nowrap; text-decoration: none; transition: background .15s, color .15s; } .telecom-scope .th-catnav__link:hover, .telecom-scope .th-catnav__item:hover > .th-catnav__link, .telecom-scope .th-catnav__item:focus-within > .th-catnav__link { background: var(--primary-container); color: var(--primary) !important; } .telecom-scope .th-catnav__link--home { color: var(--primary); } .telecom-scope .th-catnav__caret { font-size: 9px; /* 10px → 9px */ margin-left: 2px; } /* --- Dropdown de catégorie — multi-colonnes, scrollable vertical --- */ .telecom-scope .th-catnav__item { position: relative; } .telecom-scope .th-catnav__dropdown { position: absolute; left: 0; top: calc(100% + 4px); /* 6px → 4px */ display: none; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--s-5); /* 24px → 20px */ max-width: 760px; width: max-content; max-height: 70vh; overflow-y: auto; overflow-x: hidden; background: var(--surface); border: 1px solid var(--outline-variant); border-radius: var(--r-lg); box-shadow: var(--el-3); padding: var(--s-4); /* 20px → 16px */ z-index: 9999; } .telecom-scope .th-catnav__item:hover > .th-catnav__dropdown, .telecom-scope .th-catnav__item:focus-within > .th-catnav__dropdown, .telecom-scope .th-catnav__item.th-catnav__item--open > .th-catnav__dropdown { display: grid; } .telecom-scope .th-catnav__col h4 { font-family: var(--font-display); font-size: 12px; /* 13px → 12px */ font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--on-surface); margin: 0 0 var(--s-2); padding-bottom: var(--s-1); /* 6px → 4px */ border-bottom: 2px solid var(--primary); } .telecom-scope .th-catnav__col ul { list-style: none; padding: 0; margin: 0; } .telecom-scope .th-catnav__col li { margin-bottom: 1px; /* 2px → 1px */ } .telecom-scope .th-catnav__col li a { display: block; padding: var(--s-1) 0; font-size: 13px; /* 14px → 13px */ font-family: var(--font-body); color: var(--on-surface-variant) !important; text-decoration: none; transition: color .15s; } .telecom-scope .th-catnav__col li a:hover { color: var(--primary) !important; } /* --- Mobile responsive --- */ @media (max-width: 991px) { .telecom-scope .th-header__burger { display: inline-grid; } .telecom-scope .th-header__search { display: none; } .telecom-scope .th-catnav { display: none; } .telecom-scope .th-header__logo { margin-right: auto; } .telecom-scope .th-header__actions { gap: 0; } } /* ============ PCARD tweaks (B2B UX) ==================================== */ /* Keep quick-actions (wishlist / quickview) always visible instead of hover-only */ .telecom-scope .pcard .qa { opacity: 1 !important; transform: none !important; } .telecom-scope .pcard .qa button { width: 36px; height: 36px; border-radius: var(--r-full); } .telecom-scope .pcard .ttl { display: block; } /* Limiter le titre du produit à 2 lignes avec tooltip */ .telecom-scope .pcard-title-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; max-height: 2.8em; font-size: 14px; font-weight: 600; color: var(--on-surface) !important; text-decoration: none; transition: color .15s; } .telecom-scope .pcard-title-clamp:hover { color: var(--primary) !important; } /* Add-to-cart button full width inside card */ .telecom-scope .pcard-body .btn { width: 100%; margin-top: var(--s-2); padding: 11px 18px; font-size: 14px; } /* ============================================================================ SIGNATURE COMPONENTS (ece-styled) Redefined here so the reworked pages (home, productbox, product, login) keep their structure with the ece look. Light/dark switch automatically. ========================================================================== */ /* Micro-typography labels */ .telecom-scope .index-tag { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--on-surface-variant); } .telecom-scope .index-tag b { color: var(--primary); } .telecom-scope .section-label { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--primary); margin-bottom: var(--s-2); } .telecom-scope .section-label::before { content: ''; width: 22px; height: 2px; background: var(--primary); border-radius: var(--r-full); } /* Readout strip (home hero stats) */ .telecom-scope .readout { display: flex; flex-wrap: wrap; gap: var(--s-8); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--on-surface-variant); } .telecom-scope .readout b { display: block; font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; color: var(--on-surface); letter-spacing: -0.01em; margin-bottom: 2px; } .telecom-scope .readout b.is-ok { color: var(--success); } .telecom-scope .readout b.is-accent, .telecom-scope .is-accent { color: var(--primary); } .telecom-scope .stat-num { font-family: var(--font-display); font-weight: 700; color: var(--on-surface); letter-spacing: -0.02em; } /* ASCII tags */ .telecom-scope .ascii-tag { display: inline-block; font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--on-surface-variant); padding: 4px 12px; border-radius: var(--r-full); background: var(--surface-cont); } .telecom-scope .ascii-tag--accent { background: var(--primary); color: var(--on-primary); } .telecom-scope .ascii-tag--ok { background: var(--success-container); color: var(--success); } /* ============ TELECOM HERO (home) ====================================== */ .telecom-scope .telecom-hero { background: linear-gradient(135deg, var(--surface-low), var(--surface-cont)); border-bottom: 1px solid var(--outline-variant); padding: var(--s-16) 0 var(--s-12); position: relative; overflow: hidden; } .telecom-scope .telecom-hero .container { position: relative; z-index: 1; } .telecom-scope .telecom-hero__inner { max-width: 980px; } .telecom-scope .telecom-hero__title { font-family: var(--font-display); font-weight: 700; text-transform: none; letter-spacing: -0.03em; line-height: 1.02; color: var(--on-surface); font-size: clamp(2.4rem, 7vw, 4.6rem); margin: var(--s-3) 0 var(--s-5); } .telecom-scope .telecom-hero__title .is-accent { color: var(--primary); } .telecom-scope .telecom-hero__lead { color: var(--on-surface-variant); font-size: 18px; line-height: 1.6; max-width: 60ch; margin-bottom: var(--s-6); } .telecom-scope .telecom-hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); } .telecom-scope .telecom-hero__readout { margin-top: var(--s-12); padding-top: var(--s-6); border-top: 1px solid var(--outline-variant); } .telecom-scope .telecom-hero-strip { padding: var(--s-5) var(--s-4); } .telecom-scope .telecom-hero-strip .row > [class*='col-'] { padding: 6px; } .telecom-scope .telecom-hero-strip .banner, .telecom-scope .telecom-hero-strip .telecom-carousel { height: 100%; min-height: 340px; } .telecom-scope .telecom-carousel { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--outline-variant); } .telecom-scope .telecom-carousel .carousel-inner, .telecom-scope .telecom-carousel .carousel-item { height: 100%; } .telecom-scope .telecom-hero-strip .carousel-caption { background: linear-gradient(0deg, rgba(0,0,0,0.7), transparent); left: 0; right: 0; bottom: 0; padding: var(--s-5); text-align: left; } .telecom-scope .telecom-hero-strip .carousel-caption h5 { color: #fff; font-family: var(--font-display); font-weight: 700; letter-spacing: 0; text-transform: none; font-size: 18px; } /* ============ TELECOM PRODUCT CARD (productbox / solutionbox / productbox1) */ .telecom-scope .telecom-card { background: var(--surface) !important; border: 1px solid var(--outline-variant) !important; border-radius: var(--r-lg) !important; box-shadow: var(--el-1); padding: 0 !important; height: 100%; display: flex; flex-direction: column; overflow: hidden; transition: transform .2s, box-shadow .2s, border-color .2s; } .telecom-scope .telecom-card:hover { transform: translateY(-4px); box-shadow: var(--el-3); border-color: color-mix(in srgb, var(--primary) 40%, var(--outline-variant)) !important; } .telecom-scope .telecom-card__media { background: var(--surface-cont) !important; border-bottom: 1px solid var(--outline-variant) !important; margin: 0 !important; border-radius: 0 !important; } .telecom-scope .telecom-card__image-wrap { width: 100%; height: 220px; overflow: hidden; background: var(--surface-cont); display: flex; align-items: center; justify-content: center; } .telecom-scope .telecom-card__image-wrap .product-image, .telecom-scope .telecom-card__image-wrap .product-image-hover { width: 100%; max-height: 220px; object-fit: contain; padding: var(--s-4); transition: transform .3s; filter: none; } .telecom-scope .telecom-card:hover .telecom-card__image-wrap .product-image { transform: scale(1.04); } .telecom-scope .telecom-card__body { padding: var(--s-4) !important; flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--s-2); } .telecom-scope .telecom-card__meta { border-bottom: 1px solid var(--outline-variant); padding-bottom: var(--s-2); } .telecom-scope .telecom-card__meta .ratings-text { font-size: 12px; color: var(--on-surface-variant); font-weight: 600; } .telecom-scope .telecom-card .product-action { border-top: 1px solid var(--outline-variant); padding: var(--s-2) var(--s-3) var(--s-3); background: var(--surface-low); } /* ============ PRODUCT SPECS (data-grid) ================================ */ .telecom-scope .telecom-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--outline-variant); border: 1px solid var(--outline-variant); border-radius: var(--r-md); overflow: hidden; margin: var(--s-5) 0; } .telecom-scope .telecom-spec { padding: var(--s-4); display: flex; flex-direction: column; gap: 6px; background: var(--surface); } .telecom-scope .telecom-spec .data-label { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--on-surface-variant); } .telecom-scope .telecom-spec .data-value { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--on-surface); letter-spacing: -0.01em; } .telecom-scope .telecom-spec .data-value small { font-size: 11px; color: var(--on-surface-variant); font-weight: 600; } /* ============ AUTH / LOGIN PANEL ======================================= */ .telecom-scope .telecom-auth { padding: var(--s-16) 0; position: relative; } .telecom-scope .telecom-auth__panel { max-width: 540px; margin: 0 auto; background: var(--surface); border: 1px solid var(--outline-variant); border-radius: var(--r-xl); box-shadow: var(--el-2); overflow: hidden; } .telecom-scope .telecom-auth__head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-3) var(--s-5); background: var(--surface-low); border-bottom: 1px solid var(--outline-variant); } .telecom-scope .telecom-auth__head .index-tag b { color: var(--primary); } .telecom-scope .telecom-auth .form-box { background: transparent; } .telecom-scope .telecom-auth .form-tab { padding: var(--s-6); } .telecom-scope .telecom-auth .account_form.login { padding: 0; } .telecom-scope .telecom-auth .forgot-link { color: var(--primary) !important; font-weight: 600; font-size: 14px; }