/** * ═══════════════════════════════════════════════ * MTM — IMPRESSION SOLUTIONS — Light Theme v1.1 * Charger EN DERNIER dans le , après colors.css * Palette (colors.sass / impressionSolutions.css) : * primaryColor: #e2001a — primaryColorDark: #a80000 * * IMPORTANT : cette version est recalée sur la structure RÉELLE * de Navbar/default.php et Navbar/home.php (site vitrine B2B, * pas d'e-commerce). Contrairement à PapeterieMobilier, il n'y a ici * ni #customItems, ni #quickElement, ni mega-menu #menutr à sidebar. * Les groupes de liens utilisent .bg-family-dark et .bg-mtmpost * (pas .bg-mtm-dark). Les icônes sont des * FontAwesome, sauf les 2 logos de familles (papeterie-mobilier / * prod-com) qui restent en SVG avec les IDs cercle-MTM / symbole-MTM / * symbole-PROD-MTM. * ═══════════════════════════════════════════════ */ :root { --lt-bg: #ffffff; --lt-hover: #fdeceb; --lt-accent: #e2001a; --lt-accent2: #a80000; --lt-text: #3a3a3a; --lt-text-lt: #8a8a8a; --lt-border: #e5e5e5; } /* ══════════════════════════════════════════ 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); box-shadow: 0 2px 10px rgba(0, 0, 0, .04); padding-top: 0 !important; padding-bottom: 0 !important; } .header-height { height: 80px !important; overflow: hidden !important; } /* Le nouveau SVG du logo a un ratio différent de l'ancien : on le contraint explicitement en desktop (l'ancienne CSS ne fixait cette taille qu'en mobile, en supposant que le ratio d'origine tenait déjà dans #header). */ #logoMTM { max-height: 78px !important; height: auto !important; width: auto !important; max-width: 100% !important; top: 0 !important; position: relative !important; } /* ══════════════════════════════════════════ 2. GROUPES DE LIENS — fond clair (écrase .bg-family-dark et .bg-mtmpost, les 2 seules classes de fond utilisées dans ce layout — PAS .bg-mtm-dark) ══════════════════════════════════════════ */ #navbarNav ul.bg-family-dark, #navbarNav ul.bg-mtmpost { background-color: transparent !important; background: transparent !important; } /* ══════════════════════════════════════════ 3. FAMILLES — sélecteur de marque (papeterie-mobilier / prod-com) ══════════════════════════════════════════ */ ul.navbar-nav.header-height.fondiconeMTMmenu, .fondiconeMTMmenu { background: rgba(0, 0, 0, .03) !important; border-right: 1px solid var(--lt-border); } /* ══════════════════════════════════════════ 4. NAV LINKS — texte sombre Le template force la classe Bootstrap .text-white sur chaque , directement en dur dans le PHP (pas seulement hérité du thème sombre). On la neutralise ici avec un sélecteur plus spécifique (#navbarNav + ID). Les / internes héritent naturellement (pas de couleur propre). ══════════════════════════════════════════ */ #navbarNav a.nav-link, #navbarNav a.text-white { color: var(--lt-text) !important; transition: color .15s; } #navbarNav > ul > li { border-bottom: 2.5px solid transparent; margin-bottom: -2px; transition: border-color .15s, background-color .15s; } #navbarNav > ul > li:hover { background-color: var(--lt-hover) !important; border-bottom-color: var(--lt-accent); } #navbarNav > ul > li:hover a.nav-link, #navbarNav > ul > li:hover a.text-white { color: var(--lt-accent) !important; } /* ══════════════════════════════════════════ 5. ICÔNES — remplacement visuel FontAwesome → trait fin (façon Tabler) Comme sur /papeterie-mobilier ("icônes Tabler remplaçant FontAwesome"). IMPORTANT : le script fontawsome-mtm-solid.min chargé dans default.php est un kit JS qui remplace chaque par un au chargement de la page — la balise n'existe donc plus dans le DOM final. Les sélecteurs ci-dessous ciblent uniquement la CLASSE (fa-xxx), sans restriction de balise, pour fonctionner que le rendu final soit un ou un . L'icône de remplacement est injectée sur le parent (stable, jamais touché par ce script) via :has(), pas sur l'élément fa-xxx lui-même — un pseudo-élément ::before ne peut pas s'afficher sur un élément mis en display:none. ══════════════════════════════════════════ */ /* Masque l'icône d'origine, quelle que soit sa balise finale (i ou svg) */ #navbarNav > ul > li > a > span:first-child > [class*="fa-"] { display: none !important; } #navbarNav > ul > li > a > span:first-child::before { content: ''; display: none; width: 20px; height: 20px; background-size: contain; background-repeat: no-repeat; background-position: center; transition: background-image .1s; } /* MTM Post — enveloppe */ #navbarNav > ul > li > a > span:first-child:has(.fa-mail)::before { display: block; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%233a3a3a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); } #navbarNav > ul > li:hover > a > span:first-child:has(.fa-mail)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23e2001a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); } /* Administration parc — presse-papier avec check */ #navbarNav > ul > li > a > span:first-child:has(.fa-task)::before { display: block; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%233a3a3a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='5' y='4' width='14' height='16' rx='2'/%3E%3Cpath d='M9 4V3a1 1 0 011-1h4a1 1 0 011 1v1'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); } #navbarNav > ul > li:hover > a > span:first-child:has(.fa-task)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23e2001a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='5' y='4' width='14' height='16' rx='2'/%3E%3Cpath d='M9 4V3a1 1 0 011-1h4a1 1 0 011 1v1'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); } /* Commande de toner — goutte d'encre */ #navbarNav > ul > li > a > span:first-child:has(.fa-ink)::before { display: block; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%233a3a3a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M12 3s6 6.5 6 10.5A6 6 0 0112 20a6 6 0 01-6-6.5C6 9.5 12 3 12 3z'/%3E%3C/svg%3E"); } #navbarNav > ul > li:hover > a > span:first-child:has(.fa-ink)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23e2001a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M12 3s6 6.5 6 10.5A6 6 0 0112 20a6 6 0 01-6-6.5C6 9.5 12 3 12 3z'/%3E%3C/svg%3E"); } /* Appel technique — téléphone */ #navbarNav > ul > li > a > span:first-child:has(.fa-phone)::before { display: block; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%233a3a3a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 005 5L15 13l5 2v4a2 2 0 01-2 2A16 16 0 013 6a2 2 0 012-2z'/%3E%3C/svg%3E"); } #navbarNav > ul > li:hover > a > span:first-child:has(.fa-phone)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23e2001a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 005 5L15 13l5 2v4a2 2 0 01-2 2A16 16 0 013 6a2 2 0 012-2z'/%3E%3C/svg%3E"); } /* Assistance à distance — casque */ #navbarNav > ul > li > a > span:first-child:has(.fa-headset)::before { display: block; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%233a3a3a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M4 13a8 8 0 0116 0'/%3E%3Crect x='2' y='13' width='4' height='7' rx='2'/%3E%3Crect x='18' y='13' width='4' height='7' rx='2'/%3E%3Cpath d='M20 19v1a3 3 0 01-3 3h-4'/%3E%3C/svg%3E"); } #navbarNav > ul > li:hover > a > span:first-child:has(.fa-headset)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23e2001a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M4 13a8 8 0 0116 0'/%3E%3Crect x='2' y='13' width='4' height='7' rx='2'/%3E%3Crect x='18' y='13' width='4' height='7' rx='2'/%3E%3Cpath d='M20 19v1a3 3 0 01-3 3h-4'/%3E%3C/svg%3E"); } /* Photocopieurs / Imprimantes / Constructeurs — imprimante */ #navbarNav > ul > li > a > span:first-child:has(.fa-toshiba-printer)::before { display: block; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%233a3a3a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M6 9V3h12v6'/%3E%3Crect x='4' y='9' width='16' height='8' rx='1'/%3E%3Cpath d='M6 17v4h12v-4'/%3E%3C/svg%3E"); } #navbarNav > ul > li:hover > a > span:first-child:has(.fa-toshiba-printer)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23e2001a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M6 9V3h12v6'/%3E%3Crect x='4' y='9' width='16' height='8' rx='1'/%3E%3Cpath d='M6 17v4h12v-4'/%3E%3C/svg%3E"); } /* Solutions informatiques — écran d'ordinateur */ #navbarNav > ul > li > a > span:first-child:has(.fa-computer)::before { display: block; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%233a3a3a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='12' rx='1'/%3E%3Cpath d='M8 20h8M12 16v4'/%3E%3C/svg%3E"); } #navbarNav > ul > li:hover > a > span:first-child:has(.fa-computer)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23e2001a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='12' rx='1'/%3E%3Cpath d='M8 20h8M12 16v4'/%3E%3C/svg%3E"); } /* Livraison / Dépannage — clé à outils */ #navbarNav > ul > li > a > span:first-child:has(.fa-wrench)::before { display: block; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%233a3a3a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.3-3.3a5 5 0 01-6.7 6.7l-6.6 6.6a2 2 0 01-2.8-2.8l6.6-6.6a5 5 0 016.7-6.7l-3.3 3.3z'/%3E%3C/svg%3E"); } #navbarNav > ul > li:hover > a > span:first-child:has(.fa-wrench)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23e2001a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.3-3.3a5 5 0 01-6.7 6.7l-6.6 6.6a2 2 0 01-2.8-2.8l6.6-6.6a5 5 0 016.7-6.7l-3.3 3.3z'/%3E%3C/svg%3E"); } /* Assurance — bouclier avec check */ #navbarNav > ul > li > a > span:first-child:has(.fa-axa)::before { display: block; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%233a3a3a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l7 3v6c0 5-3 8-7 9-4-1-7-4-7-9V6l7-3z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); } #navbarNav > ul > li:hover > a > span:first-child:has(.fa-axa)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23e2001a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l7 3v6c0 5-3 8-7 9-4-1-7-4-7-9V6l7-3z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); } /* Copie Service — documents empilés */ #navbarNav > ul > li > a > span:first-child:has(.fa-papers)::before { display: block; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%233a3a3a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='6' y='6' width='12' height='14' rx='2'/%3E%3Cpath d='M9 3h9a2 2 0 012 2v11'/%3E%3C/svg%3E"); } #navbarNav > ul > li:hover > a > span:first-child:has(.fa-papers)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23e2001a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='6' y='6' width='12' height='14' rx='2'/%3E%3Cpath d='M9 3h9a2 2 0 012 2v11'/%3E%3C/svg%3E"); } /* Appel d'offres — trophée */ #navbarNav > ul > li > a > span:first-child:has(.fa-trophy)::before { display: block; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%233a3a3a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M8 4h8v4a4 4 0 01-8 0V4z'/%3E%3Cpath d='M8 4H5a2 2 0 002 4M16 4h3a2 2 0 01-2 4'/%3E%3Cpath d='M10 12v4M14 12v4'/%3E%3Cpath d='M8 20h8'/%3E%3C/svg%3E"); } #navbarNav > ul > li:hover > a > span:first-child:has(.fa-trophy)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23e2001a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M8 4h8v4a4 4 0 01-8 0V4z'/%3E%3Cpath d='M8 4H5a2 2 0 002 4M16 4h3a2 2 0 01-2 4'/%3E%3Cpath d='M10 12v4M14 12v4'/%3E%3Cpath d='M8 20h8'/%3E%3C/svg%3E"); } /* Carte (home.php) — épingle de localisation */ #navbarNav > ul > li > a > span:first-child:has(.fa-france)::before { display: block; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%233a3a3a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M12 21c-4-4-7-7.686-7-11a7 7 0 0114 0c0 3.314-3 7-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); } #navbarNav > ul > li:hover > a > span:first-child:has(.fa-france)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23e2001a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M12 21c-4-4-7-7.686-7-11a7 7 0 0114 0c0 3.314-3 7-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); } /* ══════════════════════════════════════════ 5bis. BADGES CIRCULAIRES AUTOUR DES ICÔNES Même traitement que /papeterie-mobilier (section "ICÔNES TABLER NAVBAR") : le premier de chaque lien (celui qui contient l'icône, FontAwesome ou SVG famille) devient un badge arrondi, avec fond teinté + léger soulèvement au survol. ══════════════════════════════════════════ */ #navbarNav .nav-link { padding-top: 4px !important; padding-bottom: 4px !important; } #navbarNav > ul > li > a > span:first-child { display: flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; border-radius: 10px !important; margin: 0 auto 2px !important; background: transparent !important; transition: background .18s, transform .18s !important; } #navbarNav > ul > li:hover > a > span:first-child { background: rgba(226, 0, 26, .10) !important; transform: translateY(-2px) !important; } #navbarNav .fondiconeMTMmenu > li > a > span:first-child { width: 32px !important; height: 32px !important; border-radius: 10px !important; } /* Les logos SVG de famille ont une taille fixée en dur dans le PHP (width/height="26.000000pt") : on l'uniformise à la taille des autres badges pour un alignement visuel cohérent. */ #navbarNav .fondiconeMTMmenu svg { width: 22px !important; height: 22px !important; } #navbarNav > ul > li > a span:not(:first-child) { font-size: 11.5px !important; line-height: 1.15 !important; margin: 0 !important; color: var(--lt-text) !important; } #navbarNav > ul > li:hover > a span:not(:first-child) { color: var(--lt-accent) !important; } /* ══════════════════════════════════════════ 6. SVG FAMILLES (logos papeterie-mobilier / prod-com) Fill de base sombre (le thème sombre d'origine laissait ces tracés blancs/transparents) + on conserve EXACTEMENT les teintes de survol déjà documentées côté client dans impressionSolutions.css — ne pas réinventer ces couleurs, elles distinguent volontairement chaque picto de famille. ══════════════════════════════════════════ */ #navbarNav .fondiconeMTMmenu svg #cercle-MTM, #navbarNav .fondiconeMTMmenu svg #symbole-MTM, #navbarNav .fondiconeMTMmenu svg #symbole-PROD-MTM { fill: var(--lt-text) !important; } #navbarNav > ul > li > a:hover svg #cercle-MTM { fill: #858585 !important; } #navbarNav > ul > li > a svg #symbole-MTM { filter: drop-shadow(0px 0px 0px transparent) !important; } #navbarNav > ul > li > a:hover svg #symbole-MTM { fill: #00a2d8 !important; } #navbarNav > ul > li > a svg #symbole-PROD-MTM { filter: drop-shadow(0px 0px 0px transparent) !important; } #navbarNav > ul > li > a:hover svg #symbole-PROD-MTM { fill: #f9b21e !important; filter: drop-shadow(0px 0px 0px transparent) !important; } /* ══════════════════════════════════════════ 7. MEGA-MENU "Carte" (home.php uniquement) Le fond est déjà fixé en dur dans le PHP (style="background-color: #fdeceb"), on ajoute seulement l'habillage carte (ombre, coin arrondi, accent haut). ══════════════════════════════════════════ */ #navbarNav .dropdown-menu { border: none !important; border-top: 3px solid var(--lt-accent) !important; border-radius: 0 0 12px 12px !important; box-shadow: 0 16px 40px rgba(43, 16, 16, .14) !important; padding: 0 !important; animation: dropdownFadeIn .18s ease forwards; } @keyframes dropdownFadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } #navbarNav .dropdown-menu #menu.container { padding: 1.75rem 2rem; } #navbarNav .dropdown-menu #menu.container p.text-black { font-size: 13.5px; line-height: 1.7; color: var(--lt-text) !important; margin-bottom: 1.25rem; } #navbarNav .dropdown-menu #menu.container p.text-black b { color: #2b1010; font-size: 14px; } /* Puce colorée (.dot) devant chaque paragraphe — fallback de base au cas où aucune règle globale ne la stylerait déjà ailleurs. Les couleurs elles-mêmes restent en style inline (ne pas y toucher). */ #navbarNav .dropdown-menu .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } /* ══════════════════════════════════════════ 8. CAROUSEL HOME (#menu-carousel) — ciblé par les ancres onclick des liens du menu (Constructeurs / Dépannage / Solutions / Copie Service / MTM Post Présentation) ══════════════════════════════════════════ */ #menu-carousel { position: relative; overflow: hidden; } #menu-carousel .carousel-inner { height: auto; } #menu-carousel .carousel-item img { opacity: 1 !important; filter: none !important; } #menu-carousel .carousel-caption { top: 50% !important; bottom: unset !important; transform: translateY(-50%); z-index: 1; padding: 0; left: auto !important; right: 3% !important; width: 34% !important; } #menu-carousel .box { background: #ffffff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid #e5e5e5 !important; border-top: 3px solid #e2001a !important; border-radius: 14px !important; box-shadow: 0 12px 40px rgba(0, 0, 0, .16) !important; padding: 1.5rem 1.5rem 3.5rem !important; max-height: 420px; overflow-y: auto; position: relative; } #menu-carousel .box h5.text-family, #menu-carousel .box .text-family { font-size: 1.35rem !important; font-weight: 300 !important; color: #e2001a !important; letter-spacing: -.01em; margin-bottom: .4rem; line-height: 1.3 !important; } #menu-carousel .box .p-bureautique { font-size: .95rem !important; font-weight: 400 !important; color: #3a3a3a !important; margin-bottom: .4rem; line-height: 1.4 !important; } #menu-carousel .savoir { position: absolute !important; bottom: 14px !important; right: 14px !important; background: #e2001a !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(226, 0, 26, .4); cursor: pointer; text-transform: uppercase; } #menu-carousel .savoir:hover { background: #a80000 !important; box-shadow: 0 4px 14px rgba(226, 0, 26, .5) !important; transform: translateY(-1px); } #menu-carousel .justifyText { text-align: left; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid #eee; } #menu-carousel .justifyText p { font-size: 12px !important; line-height: 1.65 !important; color: #6a6a6a !important; } #menu-carousel .carousel-control-prev-icon, #menu-carousel .carousel-control-next-icon { width: 40px; height: 40px; background-color: rgba(60, 15, 20, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 50%; background-size: 40%; background-position: center; border: 1px solid rgba(226, 0, 26, 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(226, 0, 26, 0.8); box-shadow: 0 4px 12px rgba(226, 0, 26, .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; } #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(60, 15, 20, 0.3) !important; border: 2px solid rgba(226, 0, 26, .5) !important; margin: 0 5px !important; transition: all .2s; } #menu-carousel .carousel-indicators li.active { background-color: #e2001a !important; border-color: #e2001a !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; } } /* ══════════════════════════════════════════ 9. MODALS — helpModal (Assistance en ligne) + hiddenElementModal ══════════════════════════════════════════ */ .modal-backdrop { background-color: #2b1010 !important; } .modal-backdrop.show { opacity: .55 !important; } .modal-content { border: none !important; border-radius: 16px !important; overflow: hidden !important; box-shadow: 0 20px 60px rgba(0, 0, 0, .18) !important; } .modal-header { background: #fff !important; border-bottom: 1px solid #eee0e0 !important; padding: 1.1rem 1.5rem !important; align-items: center !important; position: relative; } .modal-header .modal-title, .modal-title { font-family: 'Segoe UI', Arial, sans-serif !important; font-size: 1.05rem !important; font-weight: 600 !important; color: #2b1010 !important; letter-spacing: -.01em !important; } .modal-header::after { content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #e2001a, #ff4d4d); border-radius: 16px 16px 0 0; } .modal-header .close { color: #8a8a8a !important; opacity: 1 !important; font-size: 1.4rem !important; font-weight: 300 !important; padding: .5rem !important; margin: -.5rem -.5rem -.5rem auto !important; transition: color .15s, transform .15s !important; background: none !important; border: none !important; line-height: 1 !important; } .modal-header .close:hover { color: #e2001a !important; transform: rotate(90deg) !important; } .modal-body { background: #fff !important; padding: 1.5rem !important; font-size: 14px !important; line-height: 1.75 !important; color: #4a3a3a !important; } .modal-body p { margin-bottom: .75rem !important; font-size: 14px !important; color: #4a3a3a !important; line-height: 1.75 !important; } .modal-body strong, .modal-body b { color: #2b1010 !important; } .modal-footer { background: #faf4f4 !important; border-top: 1px solid #eee0e0 !important; padding: .85rem 1.5rem !important; gap: .5rem; } .modal-footer .btn { border-radius: 8px !important; font-size: 13px !important; font-weight: 500 !important; padding: 7px 20px !important; transition: all .18s !important; } .modal-footer .btn-outline-family:hover { background: #fdeceb !important; border-color: #e2001a !important; color: #e2001a !important; } .modal.fade .modal-dialog { transform: translateY(-16px) scale(.98) !important; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1) !important; } .modal.show .modal-dialog { transform: translateY(0) scale(1) !important; } /* Tableau de contacts "Assistance en ligne" (table.help-me) */ table.help-me { width: 100%; margin: 0 auto; } table.help-me tr { border: none !important; } table.help-me td { padding: .5rem 1rem !important; font-size: 13px !important; color: var(--lt-text) !important; border: none !important; } table.help-me td:first-child { font-weight: 600; color: #2b1010 !important; } /* ══════════════════════════════════════════ 10. BANNIÈRE COOKIES (cookieconsent) Palette alignée sur celle déjà configurée dans le