/* ============================================================ MON FEU DE CAMP NUMÉRIQUE — THÈME CLAIR « PHARE ALLUMÉ » ------------------------------------------------------------ Quand un membre allume son Phare, le reçoit la classe `phare-light` (ajoutée dans includes/header.php). Tout le site public bascule alors du thème sombre « night-cyan » vers ce thème CLAIR : fond blanc bleuté, écritures quasi-noires, accent teal foncé (#0e7490) lisible sur blanc, rouge feu conservé. ⚠️ TOUTES les règles de couleur sont préfixées `body.phare-light` pour n'affecter QUE le mode phare allumé. Ce fichier est chargé EN DERNIER dans le → il prime sur night-cyan / public-v802 / admin-v802 / premium. Beaucoup de règles d'origine utilisent `!important` (fond du body, inputs) → on les bat avec `!important`. Palette claire imposée : fond principal #f5f8fc panneaux/cartes #ffffff fond subtil #eaf1f8 bordures rgba(20,40,70,.14) texte fort #121821 texte doux #3a4757 texte discret #6b7889 accent (cyan→) #0e7490 rouge feu texte #c4461a rouge feu fond #ff6b35 ============================================================ */ /* ── Transition douce (NON gated) : joli fondu allumage/extinction ── */ body.pub-body { transition: background-color .45s ease, color .45s ease; } /* ============================================================ 1) VARIABLES CSS — redéfinies sur body.phare-light Bat night-cyan.css (:root) et public-v802.css (:root) grâce à la spécificité de body.phare-light (0,1,1 > 0,1,0 de :root). ============================================================ */ body.phare-light { /* Chrome public V80.2 */ --pub-night-0: #ffffff; --pub-night-1: #f5f8fc; --pub-night-2: #eaf1f8; /* Encre / texte */ --ink: #121821; --ink-soft: #3a4757; --ink-dim: #6b7889; /* Accent : le cyan vif devient un teal foncé lisible sur blanc */ --cyan: #0e7490; --cyan-neon: #0e7490; --cyan-soft: #0e7490; --cyan-pale: #0b5566; --cyan-deep: #0b5566; --cyan-glow: rgba(14,116,144,0.18); --cyan-glow-strong: rgba(14,116,144,0.30); --cyan-2: #0e7490; --cyan-3: #0b5566; --cyan-glow2: rgba(14,116,144,0.30); /* Aplats nuit → aplats clairs (utilisés par night-cyan & admin) */ --night-deep: #ffffff; --night-mid: #f5f8fc; --night-soft: #eaf1f8; --night-card: #ffffff; --night-edge: rgba(20,40,70,.14); /* Mappings hérités (night-cyan recolore style.css via ces vars) */ --black: #121821; --ivory: #121821; --ivory-soft: #3a4757; --ivory-dim: #6b7889; --text: #121821; --text-soft: #3a4757; --line: rgba(20,40,70,.14); --line-soft: rgba(20,40,70,.08); /* admin-v802 :root (classes .adm-* partagées parfois en public) */ --edge: rgba(20,40,70,.14); --edge-soft: rgba(20,40,70,.08); /* Gardien : garde une chaleur sobre côté clair */ --gardien-halo: rgba(14,116,144,0.22); color-scheme: light; } /* ============================================================ 2) FOND DU BODY — bat `body.pub-body { background:… !important }` ============================================================ */ html:has(body.phare-light) { background: #f5f8fc; } body.pub-body.phare-light { background: radial-gradient(1100px 600px at 12% -5%, rgba(14,116,144,0.05), transparent 60%), radial-gradient(900px 500px at 100% 0%, rgba(14,116,144,0.04), transparent 55%), #f5f8fc !important; color: #121821 !important; } /* Texte global / titres / liens */ body.phare-light, body.phare-light h1, body.phare-light h2, body.phare-light h3, body.phare-light h4, body.phare-light h5, body.phare-light h6, body.phare-light p, body.phare-light li, body.phare-light span, body.phare-light label, body.phare-light dt, body.phare-light dd { color: #121821; } body.phare-light .page-title, body.phare-light .display-serif, body.phare-light .section-title { color: #121821; } body.phare-light a { color: #0e7490; } body.phare-light a:hover { color: #0b5566; text-shadow: none; } body.phare-light .text-muted, body.phare-light .muted, body.phare-light small { color: #6b7889; } body.phare-light .text-cyan { color: #0e7490; } body.phare-light .text-glow { text-shadow: none; } /* ============================================================ 3) CHROME COMMUN (public-v802.css) ============================================================ */ /* — Rail gauche — */ body.phare-light .pub-rail { background: linear-gradient(180deg, #ffffff 0%, #eaf1f8 100%); border-right: 1px solid rgba(20,40,70,.14); } body.phare-light .pub-rail-brand { background: radial-gradient(circle at 50% 38%, rgba(14,116,144,0.14), rgba(255,255,255,0.85)); box-shadow: 0 0 16px rgba(14,116,144,0.16), inset 0 0 0 1px rgba(14,116,144,0.22); } /* La flamme du Gardien (vidéo) reste sur fond clair : le mix-blend screen ne fonctionne plus sur blanc → on le neutralise pour rester visible. */ body.phare-light .pub-rail-brand video { mix-blend-mode: normal; } body.phare-light .pub-rail-item { color: #3a4757; } body.phare-light .pub-rail-item:hover { background: rgba(14,116,144,0.08); color: #0b5566; } body.phare-light .pub-rail-item.is-active { background: linear-gradient(180deg, rgba(14,116,144,0.14), rgba(14,116,144,0.04)); color: #0e7490; box-shadow: inset 0 0 18px rgba(14,116,144,0.08); } body.phare-light .pub-rail-item.is-active svg { filter: drop-shadow(0 0 5px rgba(14,116,144,0.35)); } body.phare-light .pub-rail-foot { border-top: 1px solid rgba(20,40,70,.14); } body.phare-light .pub-rail-weather { color: #3a4757; } body.phare-light .pub-rail-weather b { color: #121821; } body.phare-light .pub-rail-gardien { filter: drop-shadow(0 0 8px rgba(14,116,144,0.30)); } /* — Barre du haut — */ body.phare-light .pub-topbar { background: rgba(255,255,255,0.86); border-bottom: 1px solid rgba(20,40,70,.12); } body.phare-light .pub-topnav a { color: #3a4757; } body.phare-light .pub-topnav a:hover { background: rgba(14,116,144,0.08); color: #0b5566; } body.phare-light .pub-topnav a.is-active { background: rgba(14,116,144,0.12); color: #0e7490; } /* — Recherche — */ body.phare-light .pub-search { background: #ffffff; border: 1px solid rgba(20,40,70,.14); } body.phare-light .pub-search svg { color: #6b7889; } body.phare-light .pub-search input { color: #121821; } body.phare-light .pub-search input::placeholder { color: #6b7889; } /* — Boutons d'action de la topbar — */ body.phare-light .pub-icon-btn { background: #ffffff; border: 1px solid rgba(20,40,70,.14); color: #3a4757; } body.phare-light .pub-icon-btn:hover { border-color: #0e7490; color: #0e7490; background: rgba(14,116,144,0.08); } body.phare-light .pub-icon-btn .dot { background: #0e7490; color: #ffffff; border: 1.5px solid #ffffff; } body.phare-light .pub-phare { background: rgba(14,116,144,0.10); border: 1px solid rgba(14,116,144,0.32); color: #0e7490; } body.phare-light .pub-phare.is-phare-on { background: linear-gradient(135deg, #0e7490, #0b5566); color: #ffffff; box-shadow: 0 0 16px rgba(14,116,144,0.30); } body.phare-light .pub-profile:hover { background: rgba(20,40,70,.05); } body.phare-light .pub-profile .av { background: linear-gradient(135deg, #0b5566, #0e7490); color: #ffffff; } body.phare-light .pub-profile .nm { color: #121821; } body.phare-light .pub-profile .nm small { color: #6b7889; } /* Boutons connexion / rejoindre (visiteur) — restent cohérents en clair */ body.phare-light .pub-btn-outline { background: rgba(14,116,144,0.06); border: 1px solid rgba(14,116,144,0.32); color: #0e7490; } body.phare-light .pub-btn-outline:hover { background: rgba(14,116,144,0.14); } body.phare-light .pub-btn-cta { background: linear-gradient(135deg, #0e7490, #0b5566); color: #ffffff; box-shadow: 0 4px 16px rgba(14,116,144,0.30); } /* — Contenu + en-tête de page — */ body.phare-light .pub-pagetitle { color: #121821; } body.phare-light .pub-pagesub { color: #3a4757; } /* — Panneau Gardien réutilisable — */ body.phare-light .pub-gardien-panel { background: linear-gradient(160deg, rgba(14,116,144,0.06), #ffffff); border: 1px solid rgba(14,116,144,0.20); } body.phare-light .pub-gardien-panel .orb { filter: drop-shadow(0 0 18px rgba(14,116,144,0.30)); } body.phare-light .pub-gardien-panel .nm { color: #0e7490; } body.phare-light .pub-gardien-panel .msg { color: #3a4757; } /* ============================================================ 4) CARTES & TEXTE GÉNÉRIQUES (night-cyan.css + premium.css) ============================================================ */ body.phare-light .card, body.phare-light .panel, body.phare-light .box, body.phare-light .mc-feature, body.phare-light .mc-dash, body.phare-light .admin-card, body.phare-light .section-card, body.phare-light .premium-card, body.phare-light .adm-card { background: #ffffff; border: 1px solid rgba(20,40,70,.14); box-shadow: 0 2px 14px rgba(10,20,40,0.05); color: #121821; backdrop-filter: none; -webkit-backdrop-filter: none; } body.phare-light .card:hover, body.phare-light .panel:hover, body.phare-light .admin-card:hover, body.phare-light .premium-card:hover { border-color: rgba(14,116,144,0.32); box-shadow: 0 10px 30px rgba(10,20,40,0.10); } /* Encarts « subtils » fréquents */ body.phare-light .bg-night { background: #eaf1f8; } body.phare-light .glow-border { box-shadow: 0 0 0 1px rgba(14,116,144,0.25); } /* Titre de section + barre décorative */ body.phare-light .section-title::before { background: linear-gradient(180deg, #0e7490, #0b5566); box-shadow: 0 0 6px rgba(14,116,144,0.25); } body.phare-light hr { background: linear-gradient(90deg, transparent 0%, rgba(20,40,70,.14) 50%, transparent 100%); } /* Eyebrow / lead */ body.phare-light .eyebrow { color: #0e7490; } body.phare-light .lead { color: #3a4757; } /* ============================================================ 5) BOUTONS GÉNÉRIQUES (night-cyan.css) ============================================================ */ body.phare-light .btn, body.phare-light button.primary, body.phare-light .btn-primary, body.phare-light input[type="submit"], body.phare-light button[type="submit"]:not(.btn-ghost):not(.btn-secondary) { background: linear-gradient(135deg, #0e7490 0%, #0b5566 100%); color: #ffffff; border: 1px solid rgba(14,116,144,0.45); box-shadow: 0 4px 14px rgba(14,116,144,0.28); } body.phare-light .btn:hover, body.phare-light button.primary:hover, body.phare-light .btn-primary:hover, body.phare-light input[type="submit"]:hover, body.phare-light button[type="submit"]:hover { box-shadow: 0 6px 20px rgba(14,116,144,0.36); } body.phare-light .btn-ghost, body.phare-light .btn-secondary { background: rgba(14,116,144,0.07); color: #0e7490; border: 1px solid rgba(14,116,144,0.30); } body.phare-light .btn-ghost:hover, body.phare-light .btn-secondary:hover { background: rgba(14,116,144,0.14); border-color: #0e7490; color: #0b5566; } /* Rouge feu / vert conservés pour les actions dédiées */ body.phare-light .btn-danger { background: linear-gradient(135deg, #ff6b35 0%, #c4461a 100%); color: #fff; } body.phare-light .btn-success { background: linear-gradient(135deg, #22C55E 0%, #15803D 100%); color: #fff; } /* ============================================================ 6) INPUTS / TEXTAREA / SELECT — bat le fix sombre #0a1428 !important (night-cyan.css ET admin-v802.css .adm-* forcent fond bleu nuit + texte ivoire en !important → on doit surcharger en !important.) ============================================================ */ body.phare-light input[type="text"], body.phare-light input[type="email"], body.phare-light input[type="password"], body.phare-light input[type="number"], body.phare-light input[type="search"], body.phare-light input[type="url"], body.phare-light input[type="tel"], body.phare-light input[type="date"], body.phare-light input[type="time"], body.phare-light input, body.phare-light textarea, body.phare-light select, body.phare-light .adm-input, body.phare-light .adm-select, body.phare-light .adm-textarea, body.phare-light .adm-search-input, body.phare-light .adm-searchbar input { background: #ffffff !important; color: #121821 !important; -webkit-text-fill-color: #121821 !important; color-scheme: light; border: 1px solid rgba(20,40,70,.18); } body.phare-light input:focus, body.phare-light textarea:focus, body.phare-light select:focus, body.phare-light .adm-input:focus, body.phare-light .adm-select:focus, body.phare-light .adm-textarea:focus { background: #ffffff !important; color: #121821 !important; -webkit-text-fill-color: #121821 !important; border-color: #0e7490; box-shadow: 0 0 0 3px rgba(14,116,144,0.15); } body.phare-light input::placeholder, body.phare-light textarea::placeholder, body.phare-light .adm-input::placeholder, body.phare-light .adm-textarea::placeholder, body.phare-light .adm-search-input::placeholder { color: #6b7889 !important; opacity: 1; } /* Autofill Chrome → fond blanc + texte foncé en mode phare */ body.phare-light input:-webkit-autofill, body.phare-light textarea:-webkit-autofill, body.phare-light select:-webkit-autofill, body.phare-light .adm-input:-webkit-autofill, body.phare-light .adm-textarea:-webkit-autofill, body.phare-light .adm-select:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important; -webkit-text-fill-color: #121821 !important; caret-color: #121821; } body.phare-light label { color: #3a4757; } /* ============================================================ 7) TABLES / BADGES / PILLS (night-cyan.css) ============================================================ */ body.phare-light table { background: #ffffff; color: #121821; } body.phare-light th { background: rgba(14,116,144,0.10); color: #0b5566; border-bottom: 1px solid rgba(20,40,70,.14); } body.phare-light td { border-bottom: 1px solid rgba(20,40,70,.10); color: #121821; } body.phare-light tr:hover td { background: rgba(14,116,144,0.05); } body.phare-light .badge, body.phare-light .tag, body.phare-light .pill { background: rgba(14,116,144,0.12); color: #0b5566; border: 1px solid rgba(14,116,144,0.30); } body.phare-light .badge-success { background: rgba(34,197,94,0.14); color: #15803D; border-color: rgba(34,197,94,0.30); } body.phare-light .badge-warning { background: rgba(234,140,30,0.16); color: #9a5b00; border-color: rgba(234,140,30,0.32); } body.phare-light .badge-danger { background: rgba(196,70,26,0.12); color: #c4461a; border-color: rgba(196,70,26,0.30); } /* ============================================================ 8) FOOTER + BOTTOM-NAV (premium.css) ============================================================ */ body.phare-light .site-footer, body.phare-light footer { background: linear-gradient(180deg, #ffffff 0%, #eaf1f8 100%); color: #3a4757; border-top: 1px solid rgba(20,40,70,.14); } body.phare-light .site-footer::before { background: linear-gradient(90deg, transparent, #0e7490 30%, #0e7490 70%, transparent); opacity: .45; } body.phare-light .footer-brand .brand-strong { color: #121821; } body.phare-light .footer-brand small { color: #6b7889; } body.phare-light .footer-mantra { color: #0b5566; } body.phare-light .footer-mantra .sep { color: #0e7490; } body.phare-light .footer-tagline { color: #6b7889; } body.phare-light .footer-tagline svg { color: #0e7490; } body.phare-light .footer-bottom { border-top: 1px solid rgba(20,40,70,.12); color: #6b7889; } body.phare-light .footer-bottom a { color: #3a4757; } body.phare-light .footer-bottom a:hover { color: #0e7490; } /* La pastille « brand-mark » du footer a un SVG noir codé en dur : on l'éclaircit pour rester lisible (fond clair → mark teal). */ body.phare-light .footer-brand .brand-mark { background: linear-gradient(135deg, #0e7490, #0b5566); } body.phare-light .bottom-nav { background: #ffffff; border-top: 1px solid rgba(20,40,70,.14); box-shadow: 0 -4px 18px rgba(10,20,40,0.06); } body.phare-light .bottom-nav .bn-item { color: #6b7889; } body.phare-light .bottom-nav .bn-item:hover, body.phare-light .bottom-nav .bn-item.active { color: #0e7490; } body.phare-light .bottom-nav .bn-item.active::before { background: #0e7490; } body.phare-light .bottom-nav .bn-cta, body.phare-light .bottom-nav .bn-cta:hover, body.phare-light .bottom-nav .bn-cta.active { color: #ffffff; } body.phare-light .bottom-nav .bn-cta .bn-plus { background: linear-gradient(135deg, #0e7490, #0b5566); box-shadow: 0 4px 14px rgba(14,116,144,0.40); } body.phare-light .bottom-nav .bn-cta .bn-plus svg { color: #ffffff; } /* ============================================================ 9) MODALES / OVERLAYS / KPI / SCROLLBAR (night-cyan.css) ============================================================ */ body.phare-light .modal, body.phare-light .feature-modal { background: #ffffff; border: 1px solid rgba(20,40,70,.16); color: #121821; box-shadow: 0 24px 60px rgba(10,20,40,0.25); } body.phare-light .modal-backdrop, body.phare-light .overlay { background: rgba(20,40,70,0.40); } body.phare-light .kpi-card { background: linear-gradient(145deg, rgba(14,116,144,0.08) 0%, #ffffff 100%); border: 1px solid rgba(14,116,144,0.20); } body.phare-light .kpi-value { color: #0e7490; text-shadow: none; } body.phare-light .kpi-label { color: #3a4757; } body.phare-light ::-webkit-scrollbar-track { background: #eaf1f8; } body.phare-light ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #cdd9e6 0%, #b6c6d8 100%); border: 2px solid #eaf1f8; } body.phare-light ::-webkit-scrollbar-thumb:hover { background: #0e7490; } /* ============================================================ 10) GARDIEN (night-cyan.css) — nom + halo côté clair ============================================================ */ body.phare-light .gardien-name, body.phare-light .gemma-name, body.phare-light .ag-name { color: #0e7490; text-shadow: none; }