/** * ═══════════════════════════════════════════════ * MTM — Light Theme Override v3.5 * Charger EN DERNIER dans le * Cible les sélecteurs exacts de papeterieMobilier.css + global.css * ═══════════════════════════════════════════════ */ :root { --lt-bg: #f4f7fa; --lt-hover: #e8f4fb; --lt-accent: #00a2d8; --lt-accent2: #0073a6; --lt-text: #3a5068; --lt-text-lt: #7a8fa0; --lt-border: #dde3ea; --lt-sidebar: #2e4a62; --lt-badge: #e74c3c; } /* ══════════════════════════════════════════ 1. NAVBAR — fond clair (écrase .bg-mtm !important) ══════════════════════════════════════════ */ nav.navbar.navbar-expand-lg.bg-mtm { background: var(--lt-bg) !important; border-bottom: 2px solid var(--lt-accent); } /* bg-mtm-dark sections → transparent dans la navbar */ #navbarNav .bg-mtm-dark, #navbarNav > ul.bg-mtm-dark, #navbarNav > .navbar-nav.bg-mtm-dark, .navbar-nav.header-height.bg-mtm-dark, .navbar-nav.header-height.mr-auto.bg-mtm-dark { background-color: transparent !important; background: transparent !important; } /* ══════════════════════════════════════════ 2. FAMILLES — fond clair (écrase .fondiconeMTMmenu) ══════════════════════════════════════════ */ ul.navbar-nav.header-height.fondiconeMTMmenu, .fondiconeMTMmenu { background: rgba(0, 0, 0, .03) !important; border-right: 1px solid var(--lt-border); } /* ══════════════════════════════════════════ 3. NAV LINKS — texte sombre (écrase #navbarNav) ══════════════════════════════════════════ */ #navbarNav .nav-link { color: var(--lt-text) !important; } #navbarNav > ul > li > a { color: var(--lt-text) !important; } #navbarNav > ul > li > a span { color: var(--lt-text) !important; } #navbarNav > ul > li > a p { color: var(--lt-text) !important; } #navbarNav > ul > li:not(:hover) { color: var(--lt-text) !important; } #navbarNav > ul > li:not(:hover) p { color: var(--lt-text) !important; } /* Hover — garder le fond bleu clair existant, juste adapter le texte */ #navbarNav > ul.bg-mtm-dark > li:hover, #navbarNav > ul:not(.bg-mtm-dark) > li:hover { background-color: var(--lt-hover) !important; color: var(--lt-accent) !important; } #navbarNav > ul.bg-mtm-dark > li:hover .nav-link, #navbarNav > ul:not(.bg-mtm-dark) > li:hover .nav-link { background-color: var(--lt-hover) !important; color: var(--lt-accent) !important; } /* Bordure active en bas au hover */ #navbarNav > ul > li { border-bottom: 2.5px solid transparent; margin-bottom: -2px; transition: border-color .15s; } #navbarNav > ul > li:hover { border-bottom-color: var(--lt-accent); } /* ══════════════════════════════════════════ 4. ICÔNES — sombres au lieu de blanches ══════════════════════════════════════════ */ /* SVG fill */ #navbarNav > ul > li > a svg { fill: var(--lt-text) !important; } #navbarNav > ul > li:hover > a svg { fill: var(--lt-accent) !important; } /* FontAwesome icons */ #navbarNav .svg-inline--fa, #navbarNav .fas, #navbarNav .fa, #navbarNav .fa-solid, #navbarNav i[class*="fa-"] { color: var(--lt-text) !important; } #navbarNav > ul > li:hover .svg-inline--fa, #navbarNav > ul > li:hover .fas, #navbarNav > ul > li:hover .fa, #navbarNav > ul > li:hover i[class*="fa-"] { color: var(--lt-accent) !important; } /* ══════════════════════════════════════════ 5. SVG FAMILLES — couleurs thématiques ══════════════════════════════════════════ */ #navbarNav > ul > li > a svg #cercle-MTM { fill: #fde8e8 !important; stroke: none !important; } #navbarNav > ul > li > a:hover svg #cercle-MTM { fill: #e0e0e0 !important; } #navbarNav > ul > li > a svg #symbole-MTM { fill: #e20613 !important; } .fondiconeMTMmenu li:nth-child(2) > a svg #cercle-MTM { fill: #fef9e7 !important; } #navbarNav > ul > li > a svg #symbole-PROD-MTM { fill: #f9b21e !important; } .fondiconeMTMmenu li:nth-child(3) > a svg #cercle-MTM { fill: #e8f8ef !important; } #navbarNav > ul > li > a svg #symbole-SCOLAIRE { fill: #00d885 !important; } /* ══════════════════════════════════════════ 6. FOURNITURES — texte cyan ══════════════════════════════════════════ */ #navbarNav .fournitures, #navbarNav a.nav-link.fournitures, #navbarNav a.nav-link.fournitures span { color: #00b8b8 !important; } #navbarNav a.nav-link.fournitures:hover, #navbarNav a.nav-link.fournitures:hover span { color: var(--lt-accent) !important; } /* ══════════════════════════════════════════ 7. BADGES ══════════════════════════════════════════ */ .badge-nav.badge-danger { background: var(--lt-badge) !important; box-shadow: 0 1px 3px rgba(231, 76, 60, .3); } /* ══════════════════════════════════════════ 8. DROPDOWNS (mega menus) ══════════════════════════════════════════ */ #navbarNav .dropdown-menu { background-color: #fff !important; border-top: 2px solid var(--lt-accent) !important; box-shadow: 0 8px 30px rgba(0, 0, 0, .10) !important; border-radius: 0 0 8px 8px !important; } #navbarNav ul > li > div, #navbarNav ul > li > div > div { background-color: #fff !important; } #promotionDropdown, #promotionDropdown .furnitures { background-color: #fff !important; } .dropdown-title { color: var(--lt-accent) !important; border-bottom: 1px solid var(--lt-border); } /* ══════════════════════════════════════════ 9. SIDEBAR (col gauche des mega-menus) ══════════════════════════════════════════ */ .bg-papeterie-mobilier-dark { background: var(--lt-sidebar) !important; } #menutr .bg-mtm-dark, #menutr ul.bg-mtm-dark, .dropdown-menu .col-lg-3 .bg-mtm-dark { background-color: var(--lt-sidebar) !important; background: var(--lt-sidebar) !important; } #menutr .bg-mtm-dark a, #menutr ul.text-white a { color: rgba(255, 255, 255, .85) !important; } #menutr .bg-mtm-dark a:hover { color: #fff !important; } .bg-var-1 { background-color: rgba(0, 162, 216, .1) !important; border-left: 2px solid var(--lt-accent) !important; } .bg-var-1:hover { background-color: rgba(0, 162, 216, .18) !important; } .bg-var-2 { background-color: rgba(0, 162, 216, .06) !important; } .bg-menu { border-color: rgba(255, 255, 255, .1) !important; } #menutr ul ul { background: var(--lt-sidebar) !important; border-left: 2px solid var(--lt-accent); } .toggle-menu li:hover { background: rgba(0, 162, 216, .12) !important; } .furnitures ul.text-white li:hover { background-color: var(--lt-hover) !important; } .full-size { background: #fff !important; } #menu.container, #menu.furnitures.container, .dropdown-menu .container, .dropdown-menu .furnitures.container { background: #fff !important; } .menu-mtm { background: #f0f8fc !important; } /* ══════════════════════════════════════════ 10. RACCOURCIS (#customItems) ══════════════════════════════════════════ */ #customItems { border-left: 1px solid var(--lt-border) !important; } #customItems > li.nav-item { position: relative !important; } #customItems > li.nav-item > a.nav-link { position: relative !important; } #navbarNav #customItems .nav-link small, #customItems .nav-link small { position: absolute !important; top: 4px !important; right: 2px !important; margin: 0 !important; line-height: 1 !important; z-index: 5; } #navbarNav #customItems .nav-link small a, #navbarNav #customItems .nav-link small a[data-target="#shortcuts"], #customItems .nav-link small a[data-target="#shortcuts"] { display: flex !important; align-items: center !important; justify-content: center !important; width: 18px !important; height: 18px !important; border-radius: 50% !important; background: rgba(0, 162, 216, .12) !important; color: transparent !important; font-size: 0 !important; text-decoration: none !important; transition: all .15s !important; overflow: hidden !important; padding: 0 !important; } #navbarNav #customItems .nav-link small a::before, #customItems .nav-link small a[data-target="#shortcuts"]::before { content: '' !important; display: block !important; width: 11px !important; height: 11px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2300a2d8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M17 3a2.83 2.83 0 114 4L7.5 20.5 2 22l1.5-5.5L17 3z'/%3E%3C/svg%3E") !important; background-size: contain !important; background-repeat: no-repeat !important; } #navbarNav #customItems .nav-link small a:hover, #customItems .nav-link small a[data-target="#shortcuts"]:hover { background: rgba(0, 162, 216, .25) !important; transform: scale(1.15); } #customItems .nav-link > small:empty { display: none !important; } #navbarNav small a[data-target="#shortcuts"] { color: var(--lt-accent) !important; } #navbarNav > ul:not(.bg-mtm-dark) > li:hover small a[data-target="#shortcuts"] { color: var(--lt-accent2) !important; } /* ══════════════════════════════════════════ 11. PANIER — icône accent ══════════════════════════════════════════ */ #navbarNav i#cart, #navbarNav .fas.fa-cart, #navbarNav .fas.fa-order-edit { color: var(--lt-accent) !important; } /* ══════════════════════════════════════════ 12. PANIER RAPIDE ══════════════════════════════════════════ */ #quickElement { background-color: #fff !important; border: 1px solid var(--lt-border) !important; border-radius: 8px !important; box-shadow: 0 8px 24px rgba(0, 0, 0, .08) !important; } /* ══════════════════════════════════════════ 13. MARQUES ══════════════════════════════════════════ */ .brand_letters a { color: var(--lt-text) !important; } .brand_letters a:hover { color: var(--lt-accent) !important; } #seach_brands.form-control { background: #fff !important; border: 1px solid var(--lt-border) !important; border-radius: 8px !important; } #seach_brands.form-control:focus { border-color: var(--lt-accent) !important; box-shadow: 0 0 0 3px rgba(0, 162, 216, .12) !important; } /* ══════════════════════════════════════════ 14. PROMO / COVID ══════════════════════════════════════════ */ li.covid { background-color: rgba(255, 129, 0, .08) !important; border-left: 2px solid #FF8100 !important; } .red { color: var(--lt-badge) !important; text-shadow: none !important; } /* ══════════════════════════════════════════ 15. SHORTCUTS MODAL — fond clair ══════════════════════════════════════════ */ .modal#shortcuts .shortcut { background-color: var(--lt-hover) !important; color: var(--lt-text) !important; border: 1px solid var(--lt-border); border-radius: 8px !important; } .modal#shortcuts .shortcut:hover { background-color: var(--lt-accent) !important; color: #fff !important; border-color: var(--lt-accent); } .modal#shortcuts .shortcut svg { fill: var(--lt-accent); } .modal#shortcuts .shortcut:hover svg { fill: #fff; } /* ══════════════════════════════════════════ 16. MODALS — coins arrondis ══════════════════════════════════════════ */ .modal-content { border-radius: 8px !important; overflow: hidden; } /* ══════════════════════════════════════════ 18. NAVBAR HEIGHT ══════════════════════════════════════════ */ .header-height { height: 80px !important; } /* ══════════════════════════════════════════ 19. FILL-WHITE — on remplace dans la nav ══════════════════════════════════════════ */ #navbarNav .fill-white { fill: var(--lt-text) !important; } /* ══════════════════════════════════════════ 20. SVG ICONS CUSTOM ══════════════════════════════════════════ */ .nav-svg-icon { display: block; margin: 0 auto 2px; color: var(--lt-text); transition: color .15s; } #navbarNav > ul > li:hover .nav-svg-icon, #navbarNav > ul > li:hover > a .nav-svg-icon { color: var(--lt-accent) !important; } #navbarNav .nav-svg-icon#cart { color: var(--lt-accent); } #customItems .nav-svg-icon { width: 20px; height: 20px; } /* ══════════════════════════════════════════ 21. CAROUSEL HOME — Card repositionnée (v3.5) ══════════════════════════════════════════ */ #menu-carousel { position: relative; overflow: hidden; } #menu-carousel .carousel-inner { height: auto; } /* Image banner — pas d'assombrissement sur fond clair */ #menu-carousel .carousel-item img { opacity: 1 !important; filter: none !important; } /* ── Caption : côté DROIT, laisser la gauche libre ── */ #menu-carousel .carousel-caption { top: 50% !important; bottom: unset !important; transform: translateY(-50%); z-index: 1; padding: 0; left: auto !important; right: 5% !important; width: 34% !important; } /* ── Card : fond marine contrasté sur banner clair ── */ #menu-carousel .box { background: rgba(26, 43, 60, 0.93) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(0, 162, 216, 0.3) !important; border-top: 3px solid #00a2d8 !important; border-radius: 14px !important; box-shadow: 0 12px 40px rgba(0, 0, 0, .18) !important; padding: 1.5rem 1.5rem 3.5rem !important; max-height: 420px; overflow-y: auto; position: relative; } /* ── Titre de la card ── */ #menu-carousel .box h5.text-family, #menu-carousel .box .text-family { font-size: 1.35rem !important; font-weight: 300 !important; color: #00a2d8 !important; letter-spacing: -.01em; margin-bottom: .4rem; line-height: 1.3 !important; } /* ── Sous-titre ── */ #menu-carousel .box .p-bureautique { font-size: .95rem !important; font-weight: 400 !important; color: rgba(255, 255, 255, .85) !important; margin-bottom: .4rem; line-height: 1.4 !important; } /* ── Bouton "En savoir plus" ── */ #menu-carousel .savoir { position: absolute !important; bottom: 14px !important; right: 14px !important; background: #00a2d8 !important; color: #fff !important; padding: 7px 16px !important; border-radius: 8px !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .03em; transition: all .2s ease; box-shadow: 0 2px 8px rgba(0, 162, 216, .4); cursor: pointer; text-transform: uppercase; } #menu-carousel .savoir:hover { background: #0090c2 !important; box-shadow: 0 4px 14px rgba(0, 162, 216, .5) !important; transform: translateY(-1px); } /* ── Texte SEO déplié ── */ #menu-carousel .justifyText { text-align: left; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid rgba(0, 162, 216, .2); } #menu-carousel .justifyText p { font-size: 12px !important; line-height: 1.65 !important; color: rgba(255, 255, 255, .7) !important; } /* ── Animation ouverture (agrandissement) ── */ #menu-carousel .agrandissement { top: 4% !important; transform: translateY(0) !important; transition: all .6s cubic-bezier(.25, .46, .45, .94); } #menu-carousel .agrandissement .box { max-height: 80vh; } #menu-carousel .reduction { top: 50% !important; transform: translateY(-50%) !important; transition: all .6s cubic-bezier(.25, .46, .45, .94); } /* ── Flèches navigation ── */ #menu-carousel .carousel-control-prev-icon, #menu-carousel .carousel-control-next-icon { width: 40px; height: 40px; background-color: rgba(26, 43, 60, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 50%; background-size: 40%; background-position: center; border: 1px solid rgba(0, 162, 216, 0.3); transition: all .2s; } #menu-carousel .carousel-control-prev:hover .carousel-control-prev-icon, #menu-carousel .carousel-control-next:hover .carousel-control-next-icon { background-color: rgba(0, 162, 216, 0.8); box-shadow: 0 4px 12px rgba(0, 162, 216, .3); } #menu-carousel .carousel-control-prev, #menu-carousel .carousel-control-next { opacity: .8 !important; width: 56px; } #menu-carousel .carousel-control-prev:hover, #menu-carousel .carousel-control-next:hover { opacity: 1 !important; } /* ── Indicateurs ── */ #menu-carousel .carousel-indicators { z-index: 2; margin-bottom: 10px; } #menu-carousel .carousel-indicators li { width: 10px !important; height: 10px !important; border-radius: 50% !important; background-color: rgba(26, 43, 60, 0.3) !important; border: 2px solid rgba(0, 162, 216, .5) !important; margin: 0 5px !important; transition: all .2s; } #menu-carousel .carousel-indicators li.active { background-color: #00a2d8 !important; border-color: #00a2d8 !important; transform: scale(1.2); } @media (max-width: 1200px) { #menu-carousel .carousel-caption { width: 38% !important; right: 2% !important; } } @media (max-width: 992px) { #menu-carousel .carousel-caption { left: 5% !important; right: 5% !important; width: 90% !important; top: 50% !important; } #menu-carousel .box h5.text-family { font-size: 1.2rem !important; } } @media (max-width: 576px) { #menu-carousel .carousel-caption { left: 3% !important; right: 3% !important; width: 94% !important; top: 50% !important; } #menu-carousel .box { padding: 1.1rem 1.1rem 3rem !important; } #menu-carousel .box h5.text-family { font-size: 1.1rem !important; } #menu-carousel .box .p-bureautique { font-size: .88rem !important; } #menu-carousel .carousel-control-prev, #menu-carousel .carousel-control-next { display: none; } } small a[data-target="#shortcuts"] { display: flex !important; align-items: center !important; justify-content: center !important; width: 20px !important; height: 20px !important; border-radius: 50% !important; background: rgba(0,162,216,.12) !important; color: transparent !important; font-size: 0 !important; text-decoration: none !important; padding: 0 !important; overflow: hidden !important; transition: all .15s !important; position: relative !important; } small a[data-target="#shortcuts"]::before { content: '' !important; display: block !important; width: 12px !important; height: 12px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2300a2d8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M17 3a2.83 2.83 0 114 4L7.5 20.5 2 22l1.5-5.5L17 3z'/%3E%3C/svg%3E") !important; background-size: contain !important; background-repeat: no-repeat !important; } small a[data-target="#shortcuts"]:hover { background: rgba(0,162,216,.25) !important; transform: scale(1.2); } #customItems > li.nav-item { position: relative !important; } #customItems > li.nav-item > small { position: absolute !important; top: 5px !important; right: 3px !important; z-index: 5 !important; line-height: 1 !important; } /* ══════════════════════════════════════════ RESPONSIVE MOBILE (< 992px) ══════════════════════════════════════════ */ .mobile-search-form { display: none; } .mobile-cart-icon { display: none; } @media (max-width: 991.98px) { /* ── Header : logo compact ── */ #header { text-align: center; } #header .container { height: 56px !important; display: flex !important; align-items: center !important; justify-content: center !important; } #header .row { min-height: 56px !important; width: 100%; } #header .col-7, #header .animated-logo { width: 200px !important; float: none !important; margin: 0 auto; height: 56px !important; } #logoMTM { background-size: contain !important; top: 0 !important; max-height: 56px !important; height: 56px !important; } #logoClient { max-height: 56px !important; height: 56px !important; margin-top: 0 !important; } #header .col-5 { display: none !important; } /* ── Navbar ── */ nav.navbar.bg-mtm, nav.navbar.navbar-expand-lg.bg-mtm { min-height: auto !important; padding: 8px 12px !important; } .header-height { height: auto !important; min-height: auto !important; max-height: none !important; } /* ── Recherche mobile visible ── */ .mobile-search-form { display: flex !important; align-items: center; flex: 1; min-width: 0; background: #fff; border: 1px solid #cdd6de; border-radius: 8px; height: 38px; padding: 0 4px 0 12px; } .mobile-search-form input[name="search"] { border: none !important; background: transparent !important; outline: none !important; flex: 1; font-size: 13px; color: #2a3a4a; min-width: 0; padding: 0; height: 100%; } .mobile-search-form input[name="search"]::placeholder { color: #9aabb8; font-size: 12px; } .mobile-search-form button { background: none; border: none; color: #00a2d8; cursor: pointer; padding: 4px; flex-shrink: 0; } .mobile-cart-icon { display: flex !important; color: #00a2d8; flex-shrink: 0; } /* ── Cacher la recherche desktop ── */ #searchEngine.search-bar-v2 .search-input-group { display: none !important; } /* ── 3 boutons sur UNE ligne à 33% ── */ #searchEngine.search-bar-v2 { padding: 6px 0 !important; } #searchEngine.search-bar-v2 .search-row { flex-wrap: nowrap !important; gap: 6px !important; } #searchEngine.search-bar-v2 .search-action-btn { flex: 1 1 0 !important; font-size: 10px !important; padding: 0 6px !important; height: 34px !important; justify-content: center !important; gap: 4px !important; min-width: 0 !important; } #searchEngine.search-bar-v2 .search-action-btn svg { width: 14px !important; height: 14px !important; } #searchEngine.search-bar-v2 .search-action-btn .btn-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #searchEngine.search-bar-v2 input[type="hidden"]#selectSearch { display: none; } /* ── Toggler ── */ nav.navbar .navbar-toggler { background: rgba(0,0,0,.03) !important; border-radius: 8px !important; padding: 6px !important; flex-shrink: 0; } nav.navbar .navbar-toggler:focus { outline: none !important; box-shadow: 0 0 0 3px rgba(0,162,216,.15) !important; } /* ── Menu déroulé vertical ── */ #navbarNav { background: #fff !important; border-top: 1px solid #e0e6ec !important; margin-top: 8px; border-radius: 0 0 12px 12px; box-shadow: 0 8px 24px rgba(0,0,0,.08); max-height: 75vh; overflow-y: auto; padding: 8px 0 !important; } #navbarNav .navbar-nav { flex-direction: column !important; width: 100% !important; height: auto !important; min-height: auto !important; max-height: none !important; background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; } #navbarNav .navbar-nav .nav-item { width: 100% !important; border-bottom: none !important; margin-bottom: 0 !important; } #navbarNav .navbar-nav .nav-link { flex-direction: row !important; align-items: center !important; gap: 12px !important; padding: 10px 16px !important; font-size: 13px !important; border-bottom: none !important; margin-bottom: 0 !important; border-left: 3px solid transparent; } #navbarNav .navbar-nav .nav-link:hover, #navbarNav > ul > li:hover { border-bottom-color: transparent !important; } #navbarNav .navbar-nav .nav-link:hover { border-left-color: #00a2d8 !important; } #navbarNav .navbar-nav .nav-link span, #navbarNav .navbar-nav .nav-link p { white-space: normal !important; font-size: 13px !important; margin: 0 !important; } #navbarNav .svg-inline--fa, #navbarNav .nav-link svg { width: 20px !important; height: 20px !important; font-size: 1.2rem !important; flex-shrink: 0; } ul.navbar-nav.header-height.fondiconeMTMmenu, .fondiconeMTMmenu { border-right: none !important; border-bottom: 1px solid #e8ecf0 !important; padding: 0 0 4px 0 !important; margin: 0 0 4px 0 !important; } #navbarNav > .navbar-nav + .navbar-nav { border-top: 1px solid #e8ecf0; padding-top: 4px; margin-top: 4px; } #customItems { border-left: none !important; border-top: 1px solid #e8ecf0 !important; padding-left: 0 !important; margin-left: 0 !important; padding-top: 4px !important; margin-top: 4px !important; } #customItems > li.nav-item > small { display: none !important; } /* ── Dropdowns mobile ── */ #navbarNav .dropdown-menu { display: none; position: static !important; float: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border: none !important; border-top: none !important; box-shadow: none !important; border-radius: 0 !important; background: #f4f7fa !important; max-height: 60vh; overflow-y: auto; } #navbarNav .dropdown-menu.mobile-open { display: block !important; border-left: 3px solid #00a2d8 !important; margin-left: 16px !important; padding: 8px 0 8px 8px !important; } #navbarNav .dropdown-menu.mobile-open a { padding: 8px 12px !important; font-size: 13px !important; display: block !important; color: var(--lt-text) !important; } #navbarNav .dropdown-menu.mobile-open a:hover { color: #00a2d8 !important; background: #e8f4fb !important; } #navbarNav .dropdown-menu.mobile-open .col-lg-3, #navbarNav .dropdown-menu.mobile-open .bg-papeterie-mobilier-dark { width: 100% !important; max-width: 100% !important; flex: none !important; } #navbarNav .dropdown-menu.mobile-open .bg-mtm-dark, #navbarNav .dropdown-menu.mobile-open #menutr .bg-mtm-dark { background: #f0f4f8 !important; } #navbarNav .dropdown-menu.mobile-open .bg-mtm-dark a, #navbarNav .dropdown-menu.mobile-open #menutr a { color: var(--lt-text) !important; } #navbarNav .dropdown-menu.mobile-open .bg-mtm-dark a:hover, #navbarNav .dropdown-menu.mobile-open #menutr a:hover { color: #00a2d8 !important; } #navbarNav .dropdown-menu.mobile-open #menutr ul ul { position: static !important; display: none; background: #eaf0f6 !important; border-left: 2px solid #00a2d8 !important; margin-left: 12px !important; } #navbarNav .dropdown-menu.mobile-open #menutr li:hover > ul, #navbarNav .dropdown-menu.mobile-open #menutr li.mobile-sub-open > ul { display: block !important; } #navbarNav .dropdown-menu.mobile-open #menutr li a:not([href])::after { content: '▸' !important; position: static !important; margin-left: 6px; background: none !important; } #navbarNav .dropdown-menu[style*="transparent"] { display: none !important; } #navbarNav .nav-item.has-mobile-dropdown > .nav-link::after { content: ''; display: inline-block; width: 12px; height: 12px; margin-left: auto; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%237a8fa0' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; transition: transform .2s; flex-shrink: 0; } #navbarNav .nav-item.has-mobile-dropdown.mobile-dropdown-open > .nav-link::after { transform: rotate(180deg); } #navbarNav .nav-item:hover > .dropdown-menu:not(.mobile-open) { display: none !important; } #navbarNav > ul > li, #navbarNav > ul:not(last-child) > li { min-width: auto !important; max-width: none !important; } /* ── Carousel mobile ── */ #menu-carousel { min-height: 55vh !important; position: relative; } #menu-carousel .carousel-inner, #menu-carousel .carousel-item { min-height: 55vh !important; } #menu-carousel .carousel-item picture, #menu-carousel .carousel-item img { width: 100% !important; height: 55vh !important; object-fit: cover !important; } #menu-carousel .carousel-caption { left: 4% !important; right: 4% !important; width: 92% !important; top: 50% !important; transform: translateY(-50%) !important; bottom: unset !important; } #menu-carousel .box { padding: 1.25rem 1.25rem 3rem !important; max-height: 45vh !important; overflow-y: auto !important; } #menu-carousel .box h5.text-family { font-size: 1.2rem !important; } #menu-carousel .box .p-bureautique { font-size: .95rem !important; } #menu-carousel .carousel-control-prev, #menu-carousel .carousel-control-next { display: none !important; } #menu-carousel .carousel-indicators { margin-bottom: 8px !important; } /* ── Footer compact ── */ .footer-v2 { padding: 1.25rem 0 .75rem !important; } .footer-v2 .container .row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 16px !important; } .footer-v2 .container .row > div { margin-bottom: .75rem !important; } .footer-v2 .footer-title { font-size: 11px !important; margin-bottom: .35rem !important; padding-bottom: .25rem !important; text-align: left !important; display: inline-block !important; } .footer-v2 ul { text-align: left !important; } .footer-v2 ul li { margin-bottom: .15rem !important; } .footer-v2 ul li a { font-size: 11px !important; } .footer-bottom-v2 { padding: .4rem 0 !important; } .footer-bottom-v2 .container { flex-direction: column !important; align-items: center !important; gap: .4rem !important; } .footer-bottom-v2 .copyright { font-size: 10px !important; } .footer-bottom-v2 .social-links a { width: 28px !important; height: 28px !important; } .footer-bottom-v2 .social-links a img { width: 14px !important; height: 14px !important; } footer > button.btn-family[data-target="#helpModal"] { font-size: 10px !important; height: 36px !important; padding: 0 .75rem !important; margin-right: .5rem !important; } header { box-shadow: 0 2px 8px rgba(0,0,0,.1) !important; } .login-cards { grid-template-columns: 1fr !important; } .login-actus .actus-inner { flex-direction: column !important; text-align: center; } .login-actus .actus-img { width: 100px !important; height: 100px !important; margin: 0 auto; } /* ══════════════════════════════════════════ CORRECTIONS v3.3 ══════════════════════════════════════════ */ /* ── 1. Breadcrumb : 1 ligne forcée, ellipsis ── */ .breadcrumb { flex-wrap: nowrap !important; overflow: hidden !important; white-space: nowrap !important; font-size: 11px !important; } .breadcrumb-item { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 1; min-width: 0; } .breadcrumb-item:first-child { flex-shrink: 0; } .breadcrumb-item + .breadcrumb-item::before { flex-shrink: 0; } /* ── 2. Layout catégories : colonne unique sur mobile ── */ .container.backgroundScolaire > .row { flex-direction: column !important; } .container.backgroundScolaire > .row > .col-2, .container.backgroundScolaire > .row > .col-8, .container.backgroundScolaire > .row > .col-1 { flex: none !important; max-width: 100% !important; width: 100% !important; padding: 0 8px !important; } .container.backgroundScolaire > .row > .col-1 { display: none !important; } .col-lg-6.article, .col-lg-12.article { max-width: 100% !important; flex: 0 0 100% !important; } h1.title { text-align: center !important; font-size: 1.2rem !important; } .container.backgroundScolaire .col-2[style*="float: right"] { float: none !important; width: 100% !important; max-width: 100% !important; flex: none !important; } /* ── 3. Facette collapsed : icône + compact ── */ .container.backgroundScolaire > .row > .col-2.facette { margin: 0 0 8px !important; max-height: 40px !important; overflow: hidden !important; position: relative !important; transition: max-height .4s ease !important; padding: 0 !important; border-radius: 10px !important; cursor: pointer !important; background: #fff !important; border: 1.5px solid #d0dce8 !important; box-shadow: 0 1px 4px rgba(0,0,0,.06) !important; min-height: 40px !important; } /* Icône filtre */ .container.backgroundScolaire > .row > .col-2.facette::before { content: ''; display: block; width: 16px; height: 16px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2300a2d8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cline x1='4' y1='6' x2='20' y2='6'/%3E%3Cline x1='8' y1='12' x2='20' y2='12'/%3E%3Cline x1='12' y1='18' x2='20' y2='18'/%3E%3Ccircle cx='4' cy='12' r='1.5' fill='%2300a2d8' stroke='none'/%3E%3Ccircle cx='8' cy='6' r='1.5' fill='%2300a2d8' stroke='none'/%3E%3Ccircle cx='12' cy='18' r='1.5' fill='%2300a2d8' stroke='none'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; position: absolute; top: 50%; transform: translateY(-50%); left: 14px; z-index: 2; } /* Label "Filtres ▾" */ .container.backgroundScolaire > .row > .col-2.facette::after { content: 'Filtres ▾'; position: absolute; top: 50%; transform: translateY(-50%); left: 36px; font-size: 13px; font-weight: 600; color: #1a2b3c; z-index: 2; white-space: nowrap; } /* Cacher le titre h1 dans la barre */ .container.backgroundScolaire > .row > .col-2.facette h1.title.recherche { opacity: 0 !important; height: 0 !important; margin: 0 !important; overflow: hidden !important; padding: 0 !important; } /* Contenu masqué quand collapsed */ .container.backgroundScolaire > .row > .col-2.facette:not(.facette-open) .titreFacette, .container.backgroundScolaire > .row > .col-2.facette:not(.facette-open) .titreFacetteselect, .container.backgroundScolaire > .row > .col-2.facette:not(.facette-open) .divCriteresFacette { display: none !important; } /* Facette ouverte */ .container.backgroundScolaire > .row > .col-2.facette.facette-open { max-height: 3000px !important; padding: 44px 14px 14px !important; cursor: default !important; border-color: #00a2d8 !important; } .container.backgroundScolaire > .row > .col-2.facette.facette-open::after { content: 'Filtres ▴'; } .container.backgroundScolaire > .row > .col-2.facette.facette-open .titreFacette, .container.backgroundScolaire > .row > .col-2.facette.facette-open .titreFacetteselect, .container.backgroundScolaire > .row > .col-2.facette.facette-open .divCriteresFacette { display: block !important; } /* ── 4. Filtres du bas : ligne horizontale scrollable ── */ #filters label, #filters .col-form-label { display: none !important; } /* Conteneur parent bg-mtm-dark → clip strict */ .container.backgroundScolaire .bg-mtm-dark, .container.backgroundScolaire .row.bg-mtm-dark, .container.backgroundScolaire div.row.bg-mtm-dark { max-width: 100% !important; overflow: hidden !important; margin-left: 0 !important; margin-right: 0 !important; } #filters { padding: 6px 8px !important; max-width: 100% !important; overflow: hidden !important; box-sizing: border-box !important; } #filters .row.d-flex { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; gap: 5px !important; padding: 2px 0 6px !important; align-items: center !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; max-width: 100% !important; } #filters .row.d-flex::-webkit-scrollbar { display: none !important; } /* Chaque select / input-group → taille fixe compacte */ #filters .w-auto, #filters .input-group { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; margin: 0 !important; } #filters select, #filters .custom-select { height: 32px !important; font-size: 11px !important; padding: 0 20px 0 7px !important; min-width: 90px !important; max-width: 115px !important; width: 115px !important; margin: 0 !important; border-radius: 8px !important; -webkit-appearance: auto; text-overflow: ellipsis !important; overflow: hidden !important; white-space: nowrap !important; display: block !important; } /* Champ recherche texte */ #filters .row.w-100 { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; margin: 0 !important; } #filters .form-control, #filters input.form-control { height: 32px !important; font-size: 11px !important; width: 120px !important; min-width: 0 !important; border-radius: 8px 0 0 8px !important; } /* ── Cards produit mobile ── */ .article .p-2 { padding: 10px !important; } .article .p-2 > .row.m-0, .article .p-2 > .row.px-3, .article .p-2 .row.m-0 { flex-direction: column !important; } .article .col-lg-4:first-child, .article .row.m-0 > .col-lg-4:first-child { max-width: 100% !important; flex: none !important; text-align: center !important; margin-bottom: 10px; } .article .col-lg-4:first-child img { max-height: 140px !important; width: auto !important; } .article .col-lg-4:nth-child(2) { max-width: 100% !important; flex: none !important; } .article .col-lg-4:nth-child(3) { max-width: 100% !important; flex: none !important; margin-top: 8px; } .article .col-lg-4:nth-child(3) .list-btn { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .article .font-size-large b { font-size: 1.3rem !important; } .article .btn.btn-family.add-to-cart { width: 100% !important; padding: 10px !important; font-size: 13px !important; } .article .btn-group.quantity { width: 100% !important; justify-content: center; } .article .btn-group.quantity input { width: 50px !important; } .article .row.mx-0.justify-content-between { flex-wrap: wrap !important; } .article .row.mx-0 .nopadding { flex: 0 0 48% !important; max-width: 48% !important; margin-bottom: 4px !important; } .article .row.mx-0 .nopadding .btn, .article .row.mx-0 .nopadding a.btn { font-size: 9px !important; padding: 4px 2px !important; } .article .button-catalog, .article .button-list-type, .article .button-red { font-size: 10px !important; width: 100% !important; } .article li:has(input[name="reference"]) { text-align: center; margin-top: 6px; } .article .input-group .form-control[name="alias"] { width: 100% !important; } .article .offset-lg-1 { margin-left: 0 !important; } .article .row.px-3 .offset-lg-1.col-11 { flex: 0 0 100% !important; max-width: 100% !important; } .article .svg-icon.svg-white { width: 28px !important; height: 28px !important; padding: 5px !important; } .article .my-2 img, .article .pictoMTM { width: 22px !important; height: 22px !important; } } /* ── Petit mobile (< 576px) ── */ @media (max-width: 575.98px) { #header .container { height: 46px !important; } #header .row { min-height: 46px !important; } #header .col-7, #header .animated-logo { width: 160px !important; height: 46px !important; } #logoMTM { max-height: 46px !important; height: 46px !important; } #searchEngine.search-bar-v2 .search-action-btn { font-size: 9px !important; padding: 0 4px !important; height: 30px !important; } #searchEngine.search-bar-v2 .search-action-btn svg { display: none !important; } .footer-v2 .footer-title { font-size: 10px !important; } .footer-v2 ul li a { font-size: 10px !important; } .login-page { padding: 1rem .5rem !important; } .login-card { padding: 1.25rem !important; } .article { border-radius: 10px !important; margin-bottom: 10px !important; } .article .p-2 { padding: 8px !important; } .article .article-title a { font-size: .85rem !important; } .article .col-lg-4:first-child img { max-height: 120px !important; } .article .row.mx-0 .nopadding { flex: 0 0 100% !important; max-width: 100% !important; } .article .row.mx-0 .nopadding .btn { font-size: 10px !important; padding: 5px 4px !important; } #filters .row.d-flex { grid-template-columns: 1fr !important; } } /* ══════════════════════════════════════════ PAGES CATÉGORIES — Version moderne ══════════════════════════════════════════ */ .backgroundScolaire, .container.backgroundScolaire { background-image: none !important; background: #f8fafb !important; } h1.title { font-size: 1.5rem !important; font-weight: 300 !important; color: #1a2b3c !important; text-align: left !important; margin: 1.5rem 0 .5rem !important; letter-spacing: -.02em; } .container.backgroundScolaire > .row > .col-8 > p { font-size: 13px; color: #5a7086; line-height: 1.6; } .breadcrumb { background: transparent !important; padding: .5rem 0 !important; font-size: 12px !important; margin-bottom: .5rem !important; } .breadcrumb-item a { color: #00a2d8 !important; } .breadcrumb-item.active { color: #7a8fa0 !important; } .breadcrumb-item + .breadcrumb-item::before { color: #bcc8d4 !important; } /* ══════════════════════════════════════════ SIDEBAR FILTRES ══════════════════════════════════════════ */ .facette { background: #fff !important; border: 1px solid #e8ecf0 !important; border-radius: 12px !important; padding: 20px 16px !important; margin-right: 12px !important; box-shadow: 0 1px 3px rgba(0,0,0,.03); } h1.title.recherche { font-size: .95rem !important; font-weight: 600 !important; color: #1a2b3c !important; text-align: left !important; margin: 0 0 1rem !important; letter-spacing: 0; } .titreFacette { background: none !important; color: #1a2b3c !important; font-weight: 600 !important; font-size: 12px !important; text-transform: uppercase !important; letter-spacing: .04em !important; text-shadow: none !important; padding: 10px 0 6px !important; border-bottom: 2px solid #00a2d8 !important; margin-bottom: 6px; } .titreFacetteselect { font-weight: 600 !important; font-size: 12px !important; color: #1a2b3c !important; text-transform: uppercase !important; letter-spacing: .04em !important; padding: 8px 0 6px !important; text-shadow: none !important; } .divCriteresFacette { padding: 8px 0 !important; font-size: 13px !important; } .checker .checkmark { border-radius: 4px !important; background-color: #f0f4f8 !important; border: 1.5px solid #cdd6de !important; height: 18px !important; width: 18px !important; } .checker:hover input ~ .checkmark { background-color: #e4ecf2 !important; } .checker input:checked ~ .checkmark { background-color: #00a2d8 !important; border-color: #00a2d8 !important; } .titreCritere { font-size: 12px !important; color: #3a5068; } /* ══════════════════════════════════════════ BARRE DE FILTRES ══════════════════════════════════════════ */ .container.backgroundScolaire .bg-mtm-dark, .container.backgroundScolaire .row.bg-mtm-dark, .container.backgroundScolaire div.row.bg-mtm-dark { background: #fff !important; background-color: #fff !important; border-radius: 12px !important; border: 1px solid #e8ecf0 !important; box-shadow: 0 1px 3px rgba(0,0,0,.03) !important; margin-top: 12px !important; } .container.backgroundScolaire .bg-mtm-dark .text-white, .container.backgroundScolaire .bg-mtm-dark form.text-white, #filters.text-white { color: #3a5068 !important; } #filters label, #filters .col-form-label { font-size: 12px !important; font-weight: 600 !important; color: #5a7086 !important; text-transform: uppercase !important; letter-spacing: .03em !important; } #filters select, #filters .custom-select, #filters select.custom-select { border: 1.5px solid #dde3ea !important; border-radius: 8px !important; font-size: 13px !important; background-color: #f8fafb !important; color: #3a5068 !important; transition: all .15s; } #filters select:focus, #filters .custom-select:focus { border-color: #00a2d8 !important; box-shadow: 0 0 0 3px rgba(0,162,216,.08) !important; background-color: #fff !important; } #filters .form-control, #filters input.form-control { border: 1.5px solid #dde3ea !important; border-radius: 8px !important; font-size: 13px !important; background-color: #fff !important; color: #3a5068 !important; } #filters .form-control:focus { border-color: #00a2d8 !important; box-shadow: 0 0 0 3px rgba(0,162,216,.08) !important; } #filters .fa-search, #filters .text-family-dark { color: #00a2d8 !important; } #filters .input-group-text { background: #fff !important; border: none !important; } #filters .selectpicker, #filters .bootstrap-select .btn { border: 1.5px solid #dde3ea !important; border-radius: 8px !important; background: #f8fafb !important; color: #3a5068 !important; font-size: 13px !important; } .container.backgroundScolaire .article, .col-lg-6.article, .col-lg-12.article, .col-lg-6.p-0.article, .col-lg-12.p-0.article { border: 1px solid #eaeff4 !important; border-top: 1px solid #eaeff4 !important; border-left: 1px solid #eaeff4 !important; border-right: 1px solid #eaeff4 !important; border-bottom: 1px solid #eaeff4 !important; } .bg-mtm-light { background: #fff !important; border-radius: 12px !important; border: 1px solid #e8ecf0 !important; padding: 14px 20px !important; box-shadow: 0 1px 3px rgba(0,0,0,.03) !important; margin-bottom: 12px !important; } /* ══════════════════════════════════════════ PAGINATION ══════════════════════════════════════════ */ .page-link { border: 1px solid #e0e6ec !important; border-radius: 8px !important; margin: 0 3px !important; font-size: 13px !important; color: #3a5068 !important; padding: 6px 12px !important; transition: all .15s; } .page-link:hover { background: #e8f4fb !important; border-color: #00a2d8 !important; color: #00a2d8 !important; } .page-item.active .page-link { background: #00a2d8 !important; color: #fff !important; border-color: #00a2d8 !important; } /* ══════════════════════════════════════════ CARDS PRODUIT ══════════════════════════════════════════ */ .article { background: #fff !important; border: 1px solid #eaeff4 !important; border-radius: 14px !important; box-shadow: 0 1px 4px rgba(0,0,0,.03) !important; transition: all .25s ease !important; overflow: visible !important; margin-bottom: 16px !important; max-height: none !important; min-height: auto !important; } .article:hover { box-shadow: 0 6px 24px rgba(0,0,0,.07) !important; border-color: #d4e0ea !important; transform: translateY(-2px); } .article .p-2 { padding: 16px !important; } .article .article-title, .article .article-title a, .article h3.article-title a { font-size: .9rem !important; font-weight: 600 !important; color: #1a2b3c !important; line-height: 1.45 !important; letter-spacing: -.01em; } .article .article-title a:hover { color: #00a2d8 !important; text-decoration: none !important; } .article ul.list-unstyled li, .article .font-size-14, .article .font-size-14 li { font-size: 12px !important; line-height: 1.65 !important; color: #5a7086 !important; } .article ul.list-unstyled li b, .article .text-success { font-weight: 600 !important; } .article .font-size-large b, .article .text-secondary b, .article .list-btn .font-size-large b { color: #1a2b3c !important; font-size: 1.25rem !important; font-weight: 700 !important; letter-spacing: -.02em; } .article .promo { background: linear-gradient(90deg, #fff 40%, #fff8f8 100%) !important; border-left: 3px solid #dc3545 !important; border-radius: 14px !important; } .article .btn.btn-family.add-to-cart, .article button.btn.btn-family.add-to-cart { border-radius: 10px !important; font-size: 12px !important; padding: 8px 16px !important; font-weight: 600 !important; letter-spacing: .01em; box-shadow: 0 2px 6px rgba(0,162,216,.2); transition: all .2s ease; } .article .btn.btn-family.add-to-cart:hover { box-shadow: 0 4px 12px rgba(0,162,216,.3) !important; transform: translateY(-1px); } .article .coupdemain { border-radius: 10px !important; font-size: 11px !important; font-weight: 600 !important; padding: 6px 12px !important; background: rgb(0,166,158) !important; border: none !important; box-shadow: 0 2px 6px rgba(0,166,158,.2); } .article .btn-group.quantity, .article .btn-group.quantity-sm { border-radius: 8px !important; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.06); } .article .btn-group.quantity button, .article .btn-group.quantity-sm button { border-radius: 0 !important; font-weight: 600 !important; font-size: 14px !important; } .article .btn-group.quantity input, .article .btn-group.quantity-sm input { border-radius: 0 !important; text-align: center; font-weight: 600 !important; font-size: 13px !important; } .article .btn-outline-family, .article .button-catalog, .article .button-list-type, .article .button-red { border-radius: 8px !important; font-size: 11px !important; font-weight: 500 !important; border-width: 1.5px !important; padding: 5px 8px !important; transition: all .15s; margin-top: 3px !important; } .article .btn-outline-family:hover { background: #00a2d8 !important; color: #fff !important; border-color: #00a2d8 !important; } .article .row.mx-0.justify-content-between { padding: 6px 0 2px !important; margin-top: 4px !important; border-top: 1px solid #f0f3f6 !important; gap: 0 !important; flex-wrap: nowrap !important; } .article .row.mx-0 .nopadding { padding: 0 2px !important; flex: 1 !important; max-width: 25% !important; } .article .row.mx-0 .nopadding .btn, .article .row.mx-0 .nopadding a.btn { font-size: 10px !important; padding: 3px 4px !important; line-height: 1.2 !important; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; } .article .input-group .form-control[name="alias"] { border-radius: 8px 0 0 8px !important; font-size: 11px !important; height: 32px !important; border: 1.5px solid #d0d8e0 !important; background: #f8fafb !important; } .article .input-group .form-control[name="alias"]:focus { border-color: #00a2d8 !important; background: #fff !important; } .article .input-group .btn.btn-family-dark.rounded-right { border-radius: 0 8px 8px 0 !important; height: 32px !important; } .article .svg-icon.svg-white { background: rgba(0,162,216,.06) !important; border-radius: 0 0 10px 0 !important; padding: 8px !important; opacity: .7; transition: opacity .2s; } .article:hover .svg-icon.svg-white { opacity: 1; } .article img[src*="promoCategorie"] { width: 12% !important; border-radius: 0 0 8px 0; } .article img[src*="madeinfrance"] { width: 26px !important; border-radius: 0 14px 0 8px; } .article img[src*="marques/"] { opacity: .6; transition: opacity .2s; max-width: 70px !important; } .article img[src*="marques/"]:hover { opacity: 1; } .article .text-danger.font-weight-bold { font-size: 1rem !important; opacity: .8; } .article input[type="checkbox"][name="reference"] { accent-color: #00a2d8; width: 16px; height: 16px; } .card-flip { border-radius: 14px !important; overflow: hidden; } .article-replaced { background-color: rgba(0,0,0,.45) !important; border-radius: 14px; } .article-replaced .btn.blue { border-radius: 10px !important; font-size: 14px !important; box-shadow: 0 3px 12px rgba(0,0,0,.2) !important; } .article .btn.rouge { background: #dc3545 !important; border-color: #dc3545 !important; border-radius: 8px !important; } .inrealstockpaper { border-radius: 6px !important; } .pictoMTM { border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* ══════════════════════════════════════════ SIDEBAR PRODUITS ══════════════════════════════════════════ */ .fa-circle-xmark { transition: transform .15s; } .fa-circle-xmark:hover { transform: scale(1.15); } /* ══════════════════════════════════════════ MODAL PRODUITS ASSOCIÉS ══════════════════════════════════════════ */ #associes_popup .modal-content { border-radius: 14px !important; overflow: hidden; } #associes_popup .modal-header.bg-mtm { background: linear-gradient(135deg, #2e4a62, #3a6080) !important; } #associes_popup .bottom { background: #f8fafb !important; border-radius: 0 0 10px 10px; min-height: auto !important; max-height: none !important; padding: 12px !important; } #associes_popup .content { border: 1px solid #eaeff4; border-radius: 12px; overflow: hidden; transition: all .2s; background: #fff; } #associes_popup .content:hover { box-shadow: 0 4px 16px rgba(0,0,0,.06); transform: translateY(-1px); } .promocommejaime { border-radius: 10px !important; font-size: 12px !important; box-shadow: 0 2px 8px rgba(0,162,216,.15) !important; }