/* ============================================================ MAJORS — LIGHT REFRESH Surcharge typo + palette cohérente avec la plaquette/brochure. Pilote chargé uniquement par index.html. Toutes les nuances jaune/pêche/bleu froid du template sont neutralisées au profit d'une palette violet/lavande. ============================================================ */ /* ----- Manrope (sans-serif moderne pour h1 et h2) ----- */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap'); :root, :root[data-bs-theme="light"] { /* Encres */ --majors-ink: #0d1023; --majors-ink-soft: rgba(13, 16, 35, 0.72); --majors-muted: rgba(13, 16, 35, 0.50); /* Fonds (3 tiers pour rythme visuel) */ --majors-bg: #fbfbfd; /* off-white, fond général */ --majors-bg-card: #ffffff; /* cartes, mockups, CTA wrapper */ --majors-bg-soft: #f7f8fc; /* wash gris très neutre, tier 2 */ --majors-bg-wash: #f4f0ff; /* wash lavande, tier 3 / accent */ /* Lignes */ --majors-line: rgba(13, 16, 35, 0.10); --majors-line-soft: rgba(13, 16, 35, 0.06); /* Violets — communs aux deux thèmes */ --majors-violet: #7A4DFF; --majors-violet-soft: #5b3fbc; --majors-violet-deep: #381B89; --majors-violet-pink: #9c3dba; --majors-magenta: #B95FA9; /* Dégradés — communs aux deux thèmes (identité Majors) */ --majors-grad: linear-gradient(135deg, #7A4DFF 0%, #C775B5 100%); --majors-grad-deep: linear-gradient(135deg, #6E3FE0 0%, #9c3dba 100%); --majors-grad-anim: linear-gradient(-75deg, #6E3FE0, #381B89, #9c3dba, #7A4DFF); /* Ombres */ --majors-shadow-soft: 0 1px 3px rgba(13, 16, 35, 0.04), 0 4px 14px rgba(13, 16, 35, 0.06); --majors-shadow-violet: 0 20px 50px -22px rgba(122, 77, 255, 0.28), 0 4px 14px rgba(13, 16, 35, 0.06); } /* ============================================================ PALETTE DARK — bascule automatique des tokens. Toutes les sections, ombres, encres adaptent leurs valeurs sans toucher aux règles existantes (qui consomment les tokens). Identité violet/rose conservée à l'identique sur les boutons. ============================================================ */ [data-bs-theme="dark"] { --majors-ink: #ffffff; --majors-ink-soft: rgba(255, 255, 255, 0.78); --majors-muted: rgba(255, 255, 255, 0.55); --majors-bg: #0D1023; /* navy profond, fond général */ --majors-bg-card: #161b37; /* navy légèrement plus clair, cartes */ --majors-bg-soft: #141c44; /* navy bleuté, tier 2 */ --majors-bg-wash: #1a1f4a; /* navy à teinte violette, tier 3 */ --majors-line: rgba(255, 255, 255, 0.10); --majors-line-soft: rgba(255, 255, 255, 0.06); --majors-shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.30), 0 4px 14px rgba(0, 0, 0, 0.40); --majors-shadow-violet: 0 20px 50px -22px rgba(122, 77, 255, 0.40), 0 4px 14px rgba(0, 0, 0, 0.30); } /* ============================================================ 1. FOND DE PAGE & TEXTES PAR DÉFAUT ============================================================ */ #page { background: var(--majors-bg) !important; } body { color: var(--majors-ink); } /* La vague qui sépare le hero du body : alignée au wash lavande en light, navy violet en dark — bascule auto via le token. */ .wave-shape-bottom svg path, [data-bs-theme="light"] .wave-shape-bottom svg path, [data-bs-theme="dark"] .wave-shape-bottom svg path, [data-bs-theme="light"] .wave-shape-bottom path, [data-bs-theme="dark"] .wave-shape-bottom path { fill: var(--majors-bg-wash) !important; } /* ============================================================ 2. SECTIONS — RYTHME 3 TIERS, ZÉRO BLEU/PÊCHE On force les fonds light même quand [data-bs-theme="dark"] est actif sur le , pour que le pilote light reste cohérent quel que soit l'état du thème switcher. ============================================================ */ /* Section #tabs-2 (wrapper englobant les tabs) : wash lavande */ #tabs-2.tabs-section, [data-bs-theme="light"] #tabs-2, [data-bs-theme="dark"] #tabs-2 { background: var(--majors-bg-wash) !important; } /* Section #methodo (contenu tab 1) : off-white pour contraster avec le wash lavande de #tabs-2 et créer du rythme */ #methodo, [data-bs-theme="light"] #methodo, [data-bs-theme="dark"] #methodo { background: var(--majors-bg) !important; color: var(--majors-ink) !important; border-bottom: 1px solid var(--majors-line); } /* Réinitialiser les textes en blanc forcés par dark mode dans #methodo */ [data-bs-theme="dark"] #methodo, [data-bs-theme="dark"] #methodo h1, [data-bs-theme="dark"] #methodo h2, [data-bs-theme="dark"] #methodo h3, [data-bs-theme="dark"] #methodo h4, [data-bs-theme="dark"] #methodo h5, [data-bs-theme="dark"] #methodo h6, [data-bs-theme="dark"] #methodo p, [data-bs-theme="dark"] #methodo li { color: var(--majors-ink) !important; } /* Section #sur-mesure (tab 2 content) : wash lavande accentué */ #sur-mesure, [data-bs-theme="light"] #sur-mesure, [data-bs-theme="dark"] #sur-mesure { background: var(--majors-bg-wash) !important; color: var(--majors-ink) !important; } /* Section #groupement (offre Groupement) : off-white comme #methodo */ #groupement, [data-bs-theme="light"] #groupement, [data-bs-theme="dark"] #groupement { background: var(--majors-bg) !important; color: var(--majors-ink) !important; } [data-bs-theme="dark"] #groupement h1, [data-bs-theme="dark"] #groupement h2, [data-bs-theme="dark"] #groupement h3, [data-bs-theme="dark"] #groupement h4, [data-bs-theme="dark"] #groupement h5, [data-bs-theme="dark"] #groupement h6, [data-bs-theme="dark"] #groupement p, [data-bs-theme="dark"] #groupement li { color: var(--majors-ink) !important; } /* Footer : on aligne sur le fond général au lieu du bleu-gris froid */ .footer, [data-bs-theme="dark"] .footer { background: var(--majors-bg) !important; border-top: 1px solid var(--majors-line); color: var(--majors-ink) !important; } /* Halo lavande très discret sur la grande section #tabs-2 */ #tabs-2.tabs-section { position: relative; } #tabs-2.tabs-section::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 12% 18%, rgba(122, 77, 255, 0.05) 0%, transparent 45%), radial-gradient(circle at 92% 78%, rgba(199, 117, 181, 0.04) 0%, transparent 50%); pointer-events: none; z-index: 0; } #tabs-2.tabs-section>* { position: relative; z-index: 1; } /* ============================================================ 3. TYPOGRAPHIE — MANROPE SUR LES TITRES ============================================================ */ h1, h2, h1.h1-xs, h1.h1-md, h1.h1-lg, h2.h2-xs, h2.h2-sm, h2.h2-md, h2.h2-lg, h2.h2-xl, h2.h2-title-xs, h2.h2-title-sm, h2.h2-title-md, h2.h2-title-lg, h2.h2-title-xl, .section-title h2, .title-01 h2 { font-family: 'Manrope', 'Public Sans', 'Inter', sans-serif; font-weight: 700; letter-spacing: -0.022em; line-height: 1.12; } h1 b, h2 b { font-weight: 800; } /* Taille XL pour le H1 du hero (cran en-dessous du précédent) */ h1.h1-xl, .h1-xl { font-size: clamp(2rem, 4.1vw, 3.3rem) !important; line-height: 1.08 !important; letter-spacing: -0.022em !important; margin-bottom: 26px !important; } @media (max-width: 767px) { h1.h1-xl, .h1-xl { font-size: 1.95rem !important; line-height: 1.1 !important; } } h3, h4, h5, h6 { color: var(--majors-ink); } /* Eyebrow type "La Suite Majors®" — violet sourd, tracking */ .section-title .p-sm.txt-upcase, .title-01 .p-sm.txt-upcase { color: var(--majors-violet-soft) !important; letter-spacing: 0.22em !important; font-weight: 600; } /* ============================================================ 4. ACCENTS VIOLET — .highlighted-title et dans titres On TUE le pseudo ::before jaune du template qui passait derrière le texte et le rendait pâle. ============================================================ */ .highlighted-title, h1 em, h2 em, .section-title h2 em, .title-01 h2 em { background: var(--majors-grad-deep); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; font-style: normal; font-weight: 700; } /* Le halo jaune/pêche derrière .highlighted-title : neutralisé */ .highlighted-title::before { display: none !important; background: transparent !important; } /* Dans le hero (texte blanc sur bg sombre), on garde un violet franc mais lumineux, pas pastel */ .hero-section h1 em, .hero-section h2 em, .home-txt h1 em, .home-txt h2 em { background: linear-gradient(135deg, #a585ff 0%, #d96bb8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; font-weight: 700; } /* ============================================================ 5. CARTES & BLOCS — pas de fond blanc forcé ============================================================ */ .txt-block, .img-block.right-column { background: transparent; } .cta-4-wrapper.bg-white { background: var(--majors-bg-card); } /* En dark mode, .bg-white du template (#fff !important Bootstrap) resterait blanc et casserait la lisibilité (texte blanc sur blanc). On le repasse sur le token de carte dark. */ [data-bs-theme="dark"] .bg-white, [data-bs-theme="dark"] .cta-4-wrapper.bg-white { background-color: var(--majors-bg-card) !important; background: var(--majors-bg-card) !important; color: var(--majors-ink) !important; } /* Texte / titres inside .bg-white : forcer ink dark/clair selon le thème */ [data-bs-theme="dark"] .bg-white h1, [data-bs-theme="dark"] .bg-white h2, [data-bs-theme="dark"] .bg-white h3, [data-bs-theme="dark"] .bg-white h4, [data-bs-theme="dark"] .bg-white h5, [data-bs-theme="dark"] .bg-white h6, [data-bs-theme="dark"] .bg-white p, [data-bs-theme="dark"] .bg-white li, [data-bs-theme="dark"] .bg-white span:not([style*="color"]) { color: var(--majors-ink) !important; } /* En light, on garde la carte blanche, on force juste le texte en ink dark */ [data-bs-theme="light"] .bg-white, [data-bs-theme="light"] .cta-4-wrapper.bg-white { background-color: var(--majors-bg-card) !important; color: var(--majors-ink) !important; } [data-bs-theme="light"] .bg-white h1, [data-bs-theme="light"] .bg-white h2, [data-bs-theme="light"] .bg-white h3, [data-bs-theme="light"] .bg-white h4, [data-bs-theme="light"] .bg-white h5, [data-bs-theme="light"] .bg-white h6, [data-bs-theme="light"] .bg-white p, [data-bs-theme="light"] .bg-white li { color: var(--majors-ink) !important; } /* Filet de sécurité plus large pour toutes les surfaces blanches du template qui resteraient en blanc forcé en dark mode et créeraient du blanc sur blanc avec --majors-ink désormais clair */ [data-bs-theme="dark"] .fbox-4, [data-bs-theme="dark"] .card, [data-bs-theme="dark"] .pricing-table, [data-bs-theme="dark"] .accordion, [data-bs-theme="dark"] .accordion-item, [data-bs-theme="dark"] .testimonial-box { background-color: var(--majors-bg-card) !important; color: var(--majors-ink) !important; border-color: var(--majors-line) !important; } [data-bs-theme="dark"] .feature-item { color: var(--majors-ink) !important; border-color: var(--majors-line) !important; } [data-bs-theme="dark"] .fbox-4 h1, [data-bs-theme="dark"] .fbox-4 h2, [data-bs-theme="dark"] .fbox-4 h3, [data-bs-theme="dark"] .fbox-4 h4, [data-bs-theme="dark"] .fbox-4 h5, [data-bs-theme="dark"] .fbox-4 h6, [data-bs-theme="dark"] .fbox-4 p, [data-bs-theme="dark"] .feature-item h1, [data-bs-theme="dark"] .feature-item h2, [data-bs-theme="dark"] .feature-item h3, [data-bs-theme="dark"] .feature-item h4, [data-bs-theme="dark"] .feature-item h5, [data-bs-theme="dark"] .feature-item h6, [data-bs-theme="dark"] .feature-item p, [data-bs-theme="dark"] .card h1, [data-bs-theme="dark"] .card h2, [data-bs-theme="dark"] .card h3, [data-bs-theme="dark"] .card h4, [data-bs-theme="dark"] .card h5, [data-bs-theme="dark"] .card h6, [data-bs-theme="dark"] .card p, [data-bs-theme="dark"] .testimonial-box h1, [data-bs-theme="dark"] .testimonial-box h2, [data-bs-theme="dark"] .testimonial-box h3, [data-bs-theme="dark"] .testimonial-box h4, [data-bs-theme="dark"] .testimonial-box h5, [data-bs-theme="dark"] .testimonial-box h6, [data-bs-theme="dark"] .testimonial-box p { color: var(--majors-ink) !important; } /* Inverse côté light : si une carte avait du texte blanc inline, on rétablit */ [data-bs-theme="light"] .fbox-4 p:not([style*="color"]), [data-bs-theme="light"] .feature-item p:not([style*="color"]), [data-bs-theme="light"] .card p:not([style*="color"]), [data-bs-theme="light"] .testimonial-box p:not([style*="color"]) { color: var(--majors-ink) !important; } /* Section #technologie : a un style="background:#fff" inline qui reste blanc en dark mode → texte blanc sur blanc invisible. On surclasse l'inline via !important dans les deux thèmes. */ #technologie, [data-bs-theme="dark"] #technologie, [data-bs-theme="light"] #technologie { background: var(--majors-bg-card) !important; background-color: var(--majors-bg-card) !important; color: var(--majors-ink) !important; } #technologie h1, #technologie h2, #technologie h3, #technologie h4, #technologie h5, #technologie h6, #technologie p, #technologie li, #technologie .team-member2, #technologie .team-member-data { color: var(--majors-ink) !important; } [data-bs-theme="dark"] #technologie h1, [data-bs-theme="dark"] #technologie h2, [data-bs-theme="dark"] #technologie h3, [data-bs-theme="dark"] #technologie h4, [data-bs-theme="dark"] #technologie h5, [data-bs-theme="dark"] #technologie h6, [data-bs-theme="dark"] #technologie p, [data-bs-theme="dark"] #technologie li, [data-bs-theme="dark"] #technologie strong, [data-bs-theme="dark"] #technologie em, [data-bs-theme="dark"] #technologie .team-member-data * { color: var(--majors-ink) !important; } /* Icônes Lucide : pictogramme seul, sans cercle ni halo */ #technologie .tech-icon-wrap { width: 96px; height: 96px; margin: 0 auto 24px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; box-shadow: none; } #technologie .tech-icon { width: 56px; height: 56px; stroke-width: 1.6; color: #000000; } #technologie .tech-icon svg { width: 100%; height: 100%; display: block; stroke: currentColor; } /* Light : icône noire sur fond clair */ [data-bs-theme="light"] #technologie .tech-icon, [data-bs-theme="light"] #technologie .tech-icon svg { color: #000000 !important; stroke: #000000 !important; } /* Dark : icône blanche sur fond navy */ [data-bs-theme="dark"] #technologie .tech-icon, [data-bs-theme="dark"] #technologie .tech-icon svg { color: #ffffff !important; stroke: #ffffff !important; } /* Halo violet façon plaquette autour de la vidéo de démo */ .video-preview.glow-orbit { box-shadow: var(--majors-shadow-violet); border-radius: 14px; } /* Bascule de la preview vidéo selon le thème : light affichée par défaut, dark swappée via content: url() (pattern existant) */ [data-bs-theme="dark"] img.bg-video-majors-img { content: url("../images/bg-video-majors.png"); } /* Mobile header : on force un fond clair en dark pour que le logo violet (wordmark sombre) reste lisible. Cohérent avec l'identité du logo unique purple.png affiché dans les deux modes. */ @media (max-width: 767px) { html[data-bs-theme="dark"] .tra-menu .wsmobileheader, html[data-bs-theme="dark"] .white-menu .wsmobileheader, html[data-bs-theme="dark"] .wsmobileheader { background-color: #ffffff !important; } } /* ============================================================ Theme switcher : remplace l'orange #D98D42 du template par un violet brand cohérent en mode light. Le mode dark reste sur navy (#0D1023). Lune/soleil conservés. ============================================================ */ #theme-mode.form-check-input, .theme-mode.form-check-input, .mode-switch .form-check-input:not(:checked) { background-color: var(--majors-violet) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; box-shadow: 0 2px 8px -2px rgba(122, 77, 255, 0.45); } #theme-mode.form-check-input:checked, .theme-mode.form-check-input:checked, .mode-switch .form-check-input:checked { background-color: var(--majors-violet-deep) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; box-shadow: 0 2px 8px -2px rgba(56, 27, 137, 0.55); } /* Globe canvas du hero : fade des bords gauche et bas pour éliminer la coupure verticale nette du halo violet sur le bg clair. La largeur fixe du canvas créait une ligne droite visible. */ #interactive-globe-canvas { -webkit-mask-image: linear-gradient( to right, transparent 0%, rgba(0, 0, 0, 0.4) 8%, #000 22%, #000 100% ); mask-image: linear-gradient( to right, transparent 0%, rgba(0, 0, 0, 0.4) 8%, #000 22%, #000 100% ); } /* Bouton popup plaquette : remplace le bg-red du template par un dégradé violet animé qui pulse pour inviter au clic */ .video-btn.bg-red, a.video-btn.bg-red, .video-preview .video-btn.bg-red { background-color: transparent !important; background: var(--majors-grad) !important; background-image: var(--majors-grad) !important; border-radius: 18px !important; box-shadow: 0 14px 40px -6px rgba(122, 77, 255, 0.70), 0 0 0 0 rgba(122, 77, 255, 0.70); animation: video-btn-pulse 1.8s ease-out infinite; transition: box-shadow 0.25s ease, filter 0.25s ease; } .video-btn.bg-red:hover, a.video-btn.bg-red:hover { box-shadow: 0 22px 56px -6px rgba(122, 77, 255, 0.90), 0 0 0 22px rgba(122, 77, 255, 0.16); filter: brightness(1.08); animation-play-state: paused; } @keyframes video-btn-pulse { 0% { box-shadow: 0 14px 40px -6px rgba(122, 77, 255, 0.70), 0 0 0 0 rgba(122, 77, 255, 0.75); } 70% { box-shadow: 0 14px 40px -6px rgba(122, 77, 255, 0.70), 0 0 0 28px rgba(122, 77, 255, 0); } 100% { box-shadow: 0 14px 40px -6px rgba(122, 77, 255, 0.70), 0 0 0 0 rgba(122, 77, 255, 0); } } /* Respect des préférences accessibilité : pas d'animation si l'utilisateur a activé "réduire les animations" */ @media (prefers-reduced-motion: reduce) { .video-btn.bg-red, a.video-btn.bg-red { animation: none !important; } } /* ============================================================ 6. HALOS .glow-orbit — du jaune/orange → violet/magenta ============================================================ */ [data-bs-theme="light"] .glow-orbit::before, .glow-orbit::before { background: radial-gradient(circle, rgba(122, 77, 255, 0.20) 0%, transparent 22%) !important; } [data-bs-theme="light"] .glow-orbit::after, .glow-orbit::after { background: radial-gradient(circle, rgba(199, 117, 181, 0.20) 0%, transparent 28%) !important; } /* ============================================================ 7. BOUTONS — COMPORTEMENT IDENTIQUE LIGHT ET DARK On préfixe avec html[data-bs-theme] pour atteindre une spécificité (0,0,4,1) qui bat toutes les règles concurrentes du template (notamment dans .white-color et data-bs-theme=dark). Default : dégradé violet+rose, texte blanc, ombre violette Hover : même dégradé, lift + ombre élargie (jamais de blanc) ============================================================ */ /* DEFAULT STATE */ html[data-bs-theme] .btn-green, html[data-bs-theme] .scroll .btn-green, html[data-bs-theme] .white-color .btn-green, html[data-bs-theme] .btn-yellow, html[data-bs-theme] .scroll .btn-yellow, html[data-bs-theme] .white-color .btn-yellow, html[data-bs-theme] .btn-violet, html[data-bs-theme] .btn.btn-violet, html .btn-green, html .btn-yellow, html .white-color .btn-green, html .white-color .btn-yellow { color: #fff !important; background: var(--majors-grad) !important; background-image: var(--majors-grad) !important; background-color: transparent !important; border: 1px solid transparent !important; box-shadow: 0 8px 24px -8px rgba(122, 77, 255, 0.45) !important; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important; } /* HOVER STATE — toutes les variantes :hover du template (.btn-green:hover, .green-hover:hover, .yellow-hover:hover, .tra-white-hover:hover) doivent donner LE MÊME résultat : violet+rose, texte blanc, lift, jamais de blanc */ html[data-bs-theme] .btn-green:hover, html[data-bs-theme] .scroll .btn-green:hover, html[data-bs-theme] .white-color .btn-green:hover, html[data-bs-theme] .green-hover:hover, html[data-bs-theme] .scroll .green-hover:hover, html[data-bs-theme] .white-color .green-hover:hover, html[data-bs-theme] .btn-yellow:hover, html[data-bs-theme] .scroll .btn-yellow:hover, html[data-bs-theme] .white-color .btn-yellow:hover, html[data-bs-theme] .yellow-hover:hover, html[data-bs-theme] .scroll .yellow-hover:hover, html[data-bs-theme] .white-color .yellow-hover:hover, html[data-bs-theme] .tra-white-hover:hover, html[data-bs-theme] .scroll .tra-white-hover:hover, html[data-bs-theme] .white-color .tra-white-hover:hover, html[data-bs-theme] .dark-menu .scroll .tra-white-hover:hover, html[data-bs-theme] .btn-violet:hover, html[data-bs-theme] .btn.btn-violet:hover { color: #fff !important; background: var(--majors-grad) !important; background-image: var(--majors-grad) !important; background-color: transparent !important; background-size: 100% 100% !important; background-position: 0% 0% !important; border: 1px solid transparent !important; border-color: transparent !important; transform: translateY(-1px); box-shadow: 0 16px 32px -8px rgba(122, 77, 255, 0.55) !important; animation: none !important; animation-name: none !important; animation-duration: 0s !important; } /* ============================================================ FILET ULTIME — boutons du hero (#home) : spécificité ID pour battre toutes les règles concurrentes, dans les 2 thèmes et quel que soit l'état du data-bs-theme attribute. ============================================================ */ #home .btn.btn-green, #home .btn-green, #home .tra-white-hover, #home a.btn-green, #home .home-txt .btn-green, #home .btns-group .btn-green { color: #fff !important; background: linear-gradient(135deg, #7A4DFF 0%, #C775B5 100%) !important; background-image: linear-gradient(135deg, #7A4DFF 0%, #C775B5 100%) !important; background-color: transparent !important; border: 1px solid transparent !important; box-shadow: 0 8px 24px -8px rgba(122, 77, 255, 0.45) !important; animation: none !important; } #home .btn.btn-green:hover, #home .btn-green:hover, #home .tra-white-hover:hover, #home a.btn-green:hover, #home .home-txt .btn-green:hover, #home .btns-group .btn-green:hover, #home .btns-group .btn:hover { color: #fff !important; background: linear-gradient(135deg, #7A4DFF 0%, #C775B5 100%) !important; background-image: linear-gradient(135deg, #7A4DFF 0%, #C775B5 100%) !important; background-color: transparent !important; background-size: 100% 100% !important; background-position: 0% 0% !important; border: 1px solid transparent !important; border-color: transparent !important; transform: translateY(-1px); box-shadow: 0 16px 32px -8px rgba(122, 77, 255, 0.55) !important; animation: none !important; animation-name: none !important; animation-duration: 0s !important; } /* Variantes outline */ .btn-tra-green, .scroll .btn-tra-green, .white-color .btn-tra-green, .btn-tra-yellow, .scroll .btn-tra-yellow, .white-color .btn-tra-yellow, .tra-green-hover:hover, .tra-yellow-hover:hover, .scroll .tra-green-hover:hover, .scroll .tra-yellow-hover:hover, .white-color .tra-green-hover:hover, .white-color .tra-yellow-hover:hover { color: var(--majors-violet-soft) !important; background: transparent !important; border-color: var(--majors-violet) !important; } .btn-tra-green:hover, .btn-tra-yellow:hover { color: #fff !important; background: var(--majors-grad) !important; border-color: transparent !important; } /* (Le hover .tra-white-hover est désormais traité dans le bloc principal ci-dessus avec html[data-bs-theme] pour spécificité maximale.) */ /* Override des styles inline du