/* Kheweul UA — light.css Overrides mode clair. Activés uniquement via [data-theme="light"] sur . Ce fichier est toujours chargé — les sélecteurs ne s'appliquent que lorsque theme.js positionne data-theme="light" sur . ================================================================ */ /* ── 1. VARIABLES GLOBALES ───────────────────────────────────── */ [data-theme="light"] { --elite-bg: #e8eaf2; --elite-surface: #edeff6; --elite-surface2: #e2e4ef; --elite-text: #1a1f2e; --elite-muted: #3d4a63; --elite-subtle: #6b7a99; --elite-border: rgba(0, 0, 0, 0.08); --elite-border2: rgba(0, 0, 0, 0.04); --gradient-dark: linear-gradient(180deg, #e2e4ef 0%, #e8eaf2 100%); } [data-theme="light"] body { background-color: var(--elite-bg); color: var(--elite-text); } /* ── 1b. TEXTES — override global des couleurs hardcodées ────── */ [data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3, [data-theme="light"] h4, [data-theme="light"] h5, [data-theme="light"] h6 { color: #1a1f2e !important; } [data-theme="light"] p, [data-theme="light"] li, [data-theme="light"] span:not(.text-accent):not(.countdown-number):not(.marquee-item--accent):not(.section-num):not(.fp-big-num), [data-theme="light"] .section-title, [data-theme="light"] .section-subtitle, [data-theme="light"] .ultra-title, [data-theme="light"] .eyebrow, [data-theme="light"] .overline-label, [data-theme="light"] .editorial-header, [data-theme="light"] .idn-step-text, [data-theme="light"] .bento-card p, [data-theme="light"] .bento-card span, [data-theme="light"] .agenda-card p, [data-theme="light"] .agenda-card span, [data-theme="light"] .lang-name, [data-theme="light"] .countdown-label { color: var(--elite-text) !important; } /* Éléments avec color:#fff inline — override via strong et classes ciblées */ [data-theme="light"] strong { color: #1a1f2e !important; } /* Exceptions : accent orange reste orange */ [data-theme="light"] .text-accent, [data-theme="light"] strong.text-accent, [data-theme="light"] [style*="var(--elite-accent)"], [data-theme="light"] strong[style*="elite-accent"], [data-theme="light"] h4[style*="elite-accent"] { color: var(--elite-accent) !important; } /* Numéro décoratif — reste transparent, contour adapté au fond clair */ [data-theme="light"] .section-num, [data-theme="light"] span.section-num { color: transparent !important; -webkit-text-fill-color: transparent !important; -webkit-text-stroke: 1px rgba(0, 0, 0, 0.06) !important; } /* Countdown chiffres restent accent */ [data-theme="light"] .countdown-number { color: var(--elite-accent) !important; } /* Big numbers stats */ [data-theme="light"] .fp-big-num, [data-theme="light"] .fp-stat-num { color: var(--elite-accent) !important; } /* ── 2. TOGGLE THÈME — pill segmentée moderne ───────────────── */ .theme-toggle { background: none; border: none; padding: 0; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; } /* Track = pill contenant les deux segments + le thumb glissant */ .tt-track { position: relative; display: flex; align-items: center; width: 66px; height: 32px; border-radius: 9999px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); padding: 3px; gap: 0; transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; overflow: hidden; } .theme-toggle:hover .tt-track { border-color: rgba(245, 166, 35, 0.4); box-shadow: 0 0 14px rgba(245, 166, 35, 0.14); } /* Chaque segment (lune / soleil) */ .tt-seg { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; flex-shrink: 0; transition: color 0.3s ease, opacity 0.3s ease; color: rgba(255, 255, 255, 0.5); } .tt-seg svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } /* Thumb : cercle doré glissant sous les icônes */ .tt-thumb { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: var(--gradient-accent); box-shadow: 0 2px 8px rgba(245, 166, 35, 0.45); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 0; } /* Positions du thumb selon le thème actif */ /* Mode sombre → thumb sous la lune (gauche) */ [data-theme="dark"] .tt-thumb { transform: translateX(0); } /* Mode clair → thumb sous le soleil (droite) */ [data-theme="light"] .tt-thumb { transform: translateX(34px); } /* Icône active = noire (sous le thumb doré), inactive = blanche atténuée */ [data-theme="dark"] .tt-seg--dark { color: #000; } [data-theme="dark"] .tt-seg--light { color: rgba(255, 255, 255, 0.38); } [data-theme="light"] .tt-seg--light { color: #000; } [data-theme="light"] .tt-seg--dark { color: rgba(0, 0, 0, 0.35); } /* Track mode clair */ [data-theme="light"] .tt-track { background: rgba(0, 0, 0, 0.07); border-color: rgba(0, 0, 0, 0.14); } [data-theme="light"] .theme-toggle:hover .tt-track { border-color: rgba(245, 166, 35, 0.45); box-shadow: 0 0 14px rgba(245, 166, 35, 0.14); } /* ── 3. NAVIGATION ───────────────────────────────────────────── */ [data-theme="light"] .glass-nav-unified { background: rgba(255, 255, 255, 0.90) !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08) !important; } [data-theme="light"] .nav-link { color: #1e293b !important; } [data-theme="light"] .nav-link:hover, [data-theme="light"] .nav-link.active { color: var(--elite-accent) !important; } /* Lang switcher v2 — mode clair */ [data-theme="light"] .lang-trigger { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.14); color: #334155; } [data-theme="light"] .lang-trigger:hover { background: rgba(0, 0, 0, 0.09); border-color: rgba(0, 0, 0, 0.22); color: #0f172a; } [data-theme="light"] .lang-dropdown { background: #ffffff; border-color: rgba(0, 0, 0, 0.10); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.07); } [data-theme="light"] .lang-option { color: #475569; } [data-theme="light"] .lang-option:hover { background: rgba(0, 0, 0, 0.04); color: #0f172a; } [data-theme="light"] .lang-option.active { background: rgba(245, 166, 35, 0.10); color: #92400e; } [data-theme="light"] .lang-code-badge { background: rgba(0, 0, 0, 0.06); color: #64748b; } [data-theme="light"] .lang-option.active .lang-code-badge { background: rgba(245, 166, 35, 0.18); color: #92400e; } [data-theme="light"] .lang-badge-mobile { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.12); color: #92400e; } [data-theme="light"] .nav-toggle span { background: #1e293b; } /* ── 4. HERO ─────────────────────────────────────────────────── */ [data-theme="light"] .fp-hero { background: linear-gradient(135deg, #f0f4ff 0%, #f8f9fc 100%); } [data-theme="light"] .hero-orbs { opacity: 0.25; } [data-theme="light"] .hero-arabic-bg { opacity: 0.04; color: #000; } [data-theme="light"] .hero-grid { opacity: 0.3; filter: invert(1); } [data-theme="light"] .overline-label { color: var(--elite-subtle); border-color: rgba(0, 0, 0, 0.12); background: rgba(0, 0, 0, 0.04); } /* ── 5. BOUTONS ──────────────────────────────────────────────── */ [data-theme="light"] .btn-glass { background: #ffffff; border: 1.5px solid #1e293b !important; color: #1e293b !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); } [data-theme="light"] .btn-glass:hover { background: #1e293b; color: #ffffff !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18); transform: translateY(-1px); } /* ── 6. COUNTDOWN ────────────────────────────────────────────── */ [data-theme="light"] .countdown-unit { background: #edf0f7; border-color: rgba(0, 0, 0, 0.10); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); } [data-theme="light"] .countdown-label { color: var(--elite-subtle); } /* ── 7. MARQUEE ──────────────────────────────────────────────── */ [data-theme="light"] .marquee-wrapper { background: rgba(0, 0, 0, 0.04); border-top: 1px solid rgba(0, 0, 0, 0.06); border-bottom: 1px solid rgba(0, 0, 0, 0.06); } [data-theme="light"] .marquee-item { color: #334155; } [data-theme="light"] .marquee-divider { background: rgba(0, 0, 0, 0.15); } /* ── 8. STATS STRIP ──────────────────────────────────────────── */ [data-theme="light"] .fp-stats-strip { background: linear-gradient(135deg, #1a2234 0%, #0f172a 100%); border-top: 1px solid rgba(255, 255, 255, 0.06); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } [data-theme="light"] .fp-stats-strip::before { background-image: repeating-linear-gradient( 90deg, transparent 0px, transparent 63px, rgba(255,255,255,0.03) 63px, rgba(255,255,255,0.03) 64px ); } [data-theme="light"] .fp-stat::after { background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.08), transparent); } [data-theme="light"] .fp-stat-num { background: var(--gradient-accent) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } [data-theme="light"] .fp-stat-label { color: rgba(255, 255, 255, 0.60) !important; } /* ── 9. BENTO GRID ───────────────────────────────────────────── */ [data-theme="light"] .bento-card { background: #edf0f7; border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06); } [data-theme="light"] .bento-card:hover { border-color: rgba(245, 166, 35, 0.4); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10); } /* ── 10. SECTIONS ────────────────────────────────────────────── */ [data-theme="light"] .section-title { color: #0f172a; } [data-theme="light"] .section-subtitle { color: #334155; } [data-theme="light"] .eyebrow { color: var(--elite-subtle); } [data-theme="light"] .editorial-header { background: transparent; } /* ── 11. VALIDATEUR EAI ──────────────────────────────────────── */ [data-theme="light"] .fp-validator { background: #edf0f7; border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); } [data-theme="light"] .zenith-input { background: #e5e8f2; border-color: rgba(0, 0, 0, 0.12); color: #0f172a; } [data-theme="light"] .zenith-input::placeholder { color: #94a3b8; } [data-theme="light"] .zenith-input:focus { border-color: var(--elite-accent); background: #edf0f7; } /* ── 12. EAI CHIPS ───────────────────────────────────────────── */ [data-theme="light"] .eai-chip { background: #e5e8f2; border-color: rgba(0, 0, 0, 0.08); color: #1e293b; } /* ── 13. AGENDA ──────────────────────────────────────────────── */ [data-theme="light"] .agenda-card { background: #edf0f7; border-color: rgba(0, 0, 0, 0.08); } [data-theme="light"] .agenda-time { color: var(--elite-subtle); } [data-theme="light"] .agenda-title { color: #0f172a; } [data-theme="light"] .agenda-desc { color: #334155; } /* ── 14. NAVIGATION MOBILE ───────────────────────────────────── */ [data-theme="light"] #mobile-nav { background: rgba(255, 255, 255, 0.98); border-top: 1px solid rgba(0, 0, 0, 0.08); } [data-theme="light"] #mobile-nav a { color: #1e293b; } [data-theme="light"] #mobile-nav a:hover { color: var(--elite-accent); } /* ── 15. SCROLL PROGRESS ─────────────────────────────────────── */ [data-theme="light"] #scroll-progress { background: var(--gradient-accent); } /* ── 16. BACK TO TOP ─────────────────────────────────────────── */ [data-theme="light"] .back-to-top { background: rgba(0, 0, 0, 0.08); color: #1e293b; border-color: rgba(0, 0, 0, 0.12); } [data-theme="light"] .back-to-top:hover { background: var(--elite-accent); color: #000; } /* ── 17. FOOTER (reste sombre même en mode clair) ───────────── */ [data-theme="light"] footer { background: #1a2234 !important; /* override inline background-color: #000 */ color: #cbd5e1; border-top-color: rgba(255, 255, 255, 0.07) !important; /* Réinitialise les variables CSS pour garder le footer en ton sombre */ --elite-muted: #94a3b8; --elite-subtle: #64748b; --elite-border: rgba(255, 255, 255, 0.07); --elite-text: #e2e8f0; } /* Textes dans le footer — fond sombre, on restaure les tons clairs */ [data-theme="light"] footer p, [data-theme="light"] footer span:not(.marquee-item--accent):not(.text-accent) { color: #94a3b8 !important; } [data-theme="light"] footer h4 { color: #e2e8f0 !important; } [data-theme="light"] footer a[href^="tel"] { color: #e2e8f0 !important; } /* Bento-card dans le footer : reste sombre (override la règle globale #ffffff) */ [data-theme="light"] footer .bento-card { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.10) !important; } [data-theme="light"] footer .bento-card h4 { color: #ffffff !important; } [data-theme="light"] footer .bento-card p { color: rgba(255, 255, 255, 0.65) !important; } [data-theme="light"] footer .bento-card p[style*="elite-accent"] { color: var(--elite-accent) !important; } [data-theme="light"] .footer-link { color: #94a3b8; } [data-theme="light"] .footer-link:hover { color: var(--elite-accent); } /* ── 18. BANDE PARTENAIRES ───────────────────────────────────── */ [data-theme="light"] .partners-band { background: #e2e4ef !important; border-top-color: rgba(0, 0, 0, 0.07) !important; border-bottom-color: rgba(0, 0, 0, 0.07) !important; } [data-theme="light"] .partners-label { color: rgba(0, 0, 0, 0.40) !important; } [data-theme="light"] .partner-item { opacity: 0.70; } [data-theme="light"] .partner-item:hover { opacity: 1; } /* ── 19. CARTES & ÉLÉMENTS À FOND SOMBRE ────────────────────── */ /* Carte avec gradient #0f172a → #000 */ [data-theme="light"] .fp-card--dark { background: #e2e4ef !important; } /* Carte générique */ [data-theme="light"] .fp-card { background: #edf0f7; border-color: rgba(0, 0, 0, 0.08); } [data-theme="light"] .fp-card:hover { border-color: rgba(245, 166, 35, 0.35); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10); } /* Carte glass (rgba blanc très transparent — invisible sur fond clair) */ [data-theme="light"] .fp-card--glass { background: rgba(255, 255, 255, 0.55) !important; border-color: rgba(0, 0, 0, 0.08); } /* Piliers */ [data-theme="light"] .fp-pillar { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.08); } [data-theme="light"] .fp-pillar:hover { background: rgba(245, 166, 35, 0.07); border-color: rgba(245, 166, 35, 0.30); } /* Étapes IDN */ [data-theme="light"] .idn-step { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.08); } [data-theme="light"] .idn-step:hover { background: rgba(245, 166, 35, 0.06); border-color: rgba(245, 166, 35, 0.28); } /* Hero visual card */ [data-theme="light"] .hero-visual { background: linear-gradient(135deg, rgba(245, 166, 35, 0.08) 0%, rgba(245, 166, 35, 0.03) 100%); border-color: rgba(245, 166, 35, 0.20); } /* About hero */ [data-theme="light"] .about-hero { background: linear-gradient(180deg, #dde0ed 0%, #e8eaf2 100%); } /* ── 20. ÉLÉMENTS DIVERS ─────────────────────────────────────── */ /* Chips de langue */ [data-theme="light"] .lang-chip { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.08); } [data-theme="light"] .lang-chip:hover { background: rgba(245, 166, 35, 0.08); border-color: rgba(245, 166, 35, 0.25); } [data-theme="light"] .lang-name { color: var(--elite-text) !important; } /* Agenda card break (pause café, déjeuner) */ [data-theme="light"] .agenda-card--break { background: rgba(245, 166, 35, 0.06) !important; border-color: rgba(245, 166, 35, 0.20) !important; } /* Modérateurs agenda */ [data-theme="light"] .agenda-moderators { color: var(--elite-accent) !important; } [data-theme="light"] .agenda-speaker { color: var(--elite-subtle) !important; } /* Petites cellules stat (rgba(255,255,255,0.03) → fond adapté) */ [data-theme="light"] .fp-card [style*="rgba(255,255,255,0.03)"] { background: rgba(0, 0, 0, 0.04) !important; } /* Overline labels */ [data-theme="light"] .overline-label { color: var(--elite-subtle) !important; border-color: rgba(0, 0, 0, 0.12) !important; background: rgba(0, 0, 0, 0.04) !important; } /* ============================================================ Section 21 — CTA Box (fp-cta-box) Fond sombre conservé. Textes forcés en blanc (spécificité maximale). ============================================================ */ html[data-theme="light"] body .fp-cta-box h1, html[data-theme="light"] body .fp-cta-box h2, html[data-theme="light"] body .fp-cta-box h3, html[data-theme="light"] body .fp-cta-box .ultra-title { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html[data-theme="light"] body .fp-cta-box p, html[data-theme="light"] body .fp-cta-box .section-subtitle, html[data-theme="light"] body .fp-cta-box li, html[data-theme="light"] body .fp-cta-box span:not(.text-outline) { color: rgba(255, 255, 255, 0.82) !important; } html[data-theme="light"] body .fp-cta-box strong { color: #ffffff !important; } html[data-theme="light"] body .fp-cta-box .overline-label { color: rgba(255, 255, 255, 0.55) !important; border-color: rgba(255, 255, 255, 0.15) !important; background: rgba(255, 255, 255, 0.06) !important; } html[data-theme="light"] body .fp-cta-box .btn-glass { color: #ffffff !important; border-color: rgba(255, 255, 255, 0.30) !important; } /* ============================================================ Section 22 — PAGE CONTACT Tous les éléments avec color:#fff inline + inputs CF7 ============================================================ */ /* Hero contact */ [data-theme="light"] .contact-hero { background: linear-gradient(180deg, #dde0ed 0%, #e8eaf2 100%); } /* Cartes infos contact */ [data-theme="light"] .contact-card-unified { background: #ffffff; border-color: rgba(0, 0, 0, 0.07); border-left-color: var(--elite-accent); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07); } /* Textes blancs inline dans les cartes → sombres */ html[data-theme="light"] .contact-card-unified [style*="color: #fff"], html[data-theme="light"] .contact-card-unified [style*="color:#fff"] { color: #1e293b !important; } html[data-theme="light"] .contact-card-unified a[style*="color: #fff"], html[data-theme="light"] .contact-card-unified a[style*="color:#fff"] { color: #1e293b !important; } html[data-theme="light"] .contact-card-unified a[style*="color: #fff"]:hover, html[data-theme="light"] .contact-card-unified a[style*="color:#fff"]:hover { color: var(--elite-accent) !important; } html[data-theme="light"] .contact-card-unified span[style*="color: #fff"], html[data-theme="light"] .contact-card-unified span[style*="color:#fff"] { color: #1e293b !important; } /* Séparateur interne */ [data-theme="light"] .contact-card-unified [style*="border-top"] { border-top-color: rgba(0, 0, 0, 0.08) !important; } /* Bloc kheweul.cash (fond doré semi-transparent) */ [data-theme="light"] .contact-card-unified [style*="rgba(243,156,18"] a { color: #92400e !important; } /* Formulaire container */ [data-theme="light"] .form-container-unified { background: #ffffff; border-color: rgba(0, 0, 0, 0.07); box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08); } /* ── Contact Form 7 — Inputs en mode clair ── */ [data-theme="light"] .wpcf7 input[type="text"], [data-theme="light"] .wpcf7 input[type="email"], [data-theme="light"] .wpcf7 input[type="tel"], [data-theme="light"] .wpcf7 input[type="url"], [data-theme="light"] .wpcf7 input[type="number"], [data-theme="light"] .wpcf7 select, [data-theme="light"] .wpcf7 textarea { background: #f4f6fa !important; border: 1.5px solid rgba(0, 0, 0, 0.15) !important; color: #0f172a !important; border-radius: 6px !important; } [data-theme="light"] .wpcf7 input[type="text"]:focus, [data-theme="light"] .wpcf7 input[type="email"]:focus, [data-theme="light"] .wpcf7 input[type="tel"]:focus, [data-theme="light"] .wpcf7 textarea:focus { border-color: var(--elite-accent) !important; background: #ffffff !important; outline: none !important; box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.15) !important; } [data-theme="light"] .wpcf7 input::placeholder, [data-theme="light"] .wpcf7 textarea::placeholder { color: #94a3b8 !important; } /* Labels CF7 */ [data-theme="light"] .wpcf7 label, [data-theme="light"] .wpcf7 .wpcf7-list-item-label { color: #334155 !important; } /* Bouton submit CF7 */ [data-theme="light"] .wpcf7 input[type="submit"] { background: var(--gradient-accent) !important; color: #000 !important; border: none !important; font-weight: 700 !important; cursor: pointer !important; } [data-theme="light"] .wpcf7 input[type="submit"]:hover { opacity: 0.88 !important; transform: translateY(-1px) !important; } /* Messages de validation CF7 */ [data-theme="light"] .wpcf7-not-valid-tip { color: #dc2626 !important; } [data-theme="light"] .wpcf7-response-output { border-color: rgba(0, 0, 0, 0.12) !important; color: #334155 !important; background: #f4f6fa !important; }