/* ╔══════════════════════════════════════════════════════════════════╗ ║ Egide Corp — Theme polish ║ ║ Identité : NOIR & BLANC dominants (palette corpo) avec un ║ ║ cyan #7ec8f7 utilisé UNIQUEMENT comme accent ponctuel sur les ║ ║ états interactifs (focus, onglet actif, lien hover, indicateurs ║ ║ d'action). Le reste — surfaces, bordures, texte, hover — reste ║ ║ monochrome. ║ ║ ║ ║ Police : Rajdhani — feel mil-tech proche de l'Eurostile ║ ║ utilisé par Star Citizen, qui reprend la typographie du logo ║ ║ EGIDE CORP / MANAGER du bandeau. ║ ║ ║ ║ Cette feuille est chargée APRÈS les styles React injectés ║ ║ (positionnée en fin de dans index.html) afin que les ║ ║ variables :root définies ici remplacent celles du bundle. ║ ╚══════════════════════════════════════════════════════════════════╝ */ @import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&display=swap'); /* ── Variables : theme sombre (par défaut) ────────────────────────── */ :root { /* Accent cyan : utilisé avec parcimonie (focus, état actif, lien) */ --accent: #7ec8f7; --accent2: #5ba8d8; --accent-dim: #4a90c2; --accent-glow: rgba(126, 200, 247, 0.30); --accent-soft: rgba(126, 200, 247, 0.10); /* Surfaces : nuances de noir vraiment neutres */ --bg: #050608; --bg2: #08090c; --surface: #0c0d10; --surf: #0c0d10; /* alias utilisé par evenements/hangar3d */ --surf2: rgba(18, 19, 22, 0.95); --surf3: rgba(20, 21, 24, 0.85); --nav: rgba(8, 9, 11, 0.96); --nav2: rgba(10, 11, 14, 0.85); /* Bordures : gris neutre, plus de teinte bleue */ --border: #1d1f24; --border2: #2a2d33; --border3: #15171b; --border-glow: rgba(255, 255, 255, 0.08); /* Texte : blanc / gris purs */ --text: #ececee; --text2: #c8cacd; --text3: #8d9095; --text4: #5e6166; --text5: #3d4045; /* Couleurs utilitaires (succès / alerte / erreur / divers) — neutralisées */ --ok: #34d399; --green: #34d399; --warn: #fcd34d; --gold: #fcd34d; --orange: #fbbf24; --err: #f87171; --red: #f87171; --blue: #7ec8f7; /* aligné sur --accent */ --purple: #c8cacd; /* purple → gris clair (était #a855f7) */ --discord: #7ec8f7; /* discord button → cyan accent */ --radius: 6px; --shadow: 0 4px 20px rgba(0, 0, 0, 0.55); /* Fonds de cartes par type d'objet — neutralisés en quasi-noir. Le bundle React résout `var(--item-blue-bg, #0d2233)` etc. ; on remplace ici par des nuances très sombres et très peu saturées pour conserver une discrimination minimale (sans dominance). */ --card-over: rgba(255,255,255,0.020); --card-over2: rgba(255,255,255,0.035); --prog-bg: rgba(255,255,255,0.06); --sep: rgba(255,255,255,0.06); --item-blue-bg: #0e1014; --item-purple-bg: #11101a; --item-teal-bg: #0e1413; --item-red-bg: #161012; --item-orange-bg: #15110e; --item-amber-bg: #15110e; /* Pile typographique unifiée */ --ff-tech: 'Rajdhani', 'Eurostile', 'Bahnschrift', system-ui, -apple-system, 'Segoe UI', sans-serif; --ff-body: 'Rajdhani', system-ui, -apple-system, 'Segoe UI', sans-serif; } /* ── Theme clair : conserve la même logique noir/blanc inversée ──── */ [data-theme="light"] { --accent: #1e6fa8; --accent-dim: #486a87; --accent-glow: rgba(30, 111, 168, 0.25); --accent-soft: rgba(30, 111, 168, 0.08); --bg: #ededef; --surface: #f4f5f7; --surf2: rgba(248, 249, 251, 0.98); --surf3: rgba(244, 245, 247, 0.95); --nav: rgba(232, 233, 235, 0.98); --nav2: rgba(228, 229, 232, 0.92); --border: #cdcfd3; --border2: #b3b6ba; --border-glow: rgba(0, 0, 0, 0.08); --text: #181a1d; --text2: #353840; --text3: #5a5d63; --text4: #82858b; --text5: #a3a6aa; } /* ── Reset typo : tout en Rajdhani ─────────────────────────────────── */ html, body { font-family: var(--ff-body); font-size: 14px; font-weight: 400; letter-spacing: 0.15px; } /* ── Image de fond globale (Star Citizen scene) ────────────────────── S'applique au body de toutes les pages. Pour index.html (React), le panneau de connexion possède son propre div absolu avec LOGIN_BG_IMG (data URI) qui couvre tout — donc l'image de fond N'apparaît PAS sur le login, conformément à la demande. Sur l'app post-connexion, le wrapper React a `background: var(--bg)` inline ; on le bascule en transparent ci-dessous via `[data-theme]` pour que l'image transparaisse derrière le contenu. */ body { /* URL relative au fichier CSS (assets/) — donc il faut remonter d'un cran */ background: var(--bg) url('../img/background-egide.jpg') center center / cover no-repeat fixed; color: var(--text); } /* React app wrapper : transparent pour laisser passer l'image de fond du body. Cible les deux variantes de data-theme (dark / light). */ div[data-theme="dark"], div[data-theme="light"] { background: transparent !important; } input, button, select, textarea, .btn, .tb, .inp, .sel { font-family: var(--ff-body); } /* ── Titres : tracking + uppercase léger pour rappeler le bandeau ── */ h1, h2, h3, h4, h5, h6 { font-family: var(--ff-tech); font-weight: 600; letter-spacing: 0.6px; margin: 0; color: var(--text); } h1 { font-size: 22px; letter-spacing: 1px; } h2 { font-size: 18px; letter-spacing: 0.8px; } h3 { font-size: 15px; letter-spacing: 0.6px; } /* ── Boutons : monochrome, halo blanc discret au survol ───────────── */ .btn { border-radius: 4px; letter-spacing: 0.4px; font-weight: 500; border-color: var(--border2) !important; color: var(--text) !important; background: var(--surf2) !important; transition: background .15s, border-color .15s, color .15s, box-shadow .18s, transform .12s; } .btn:hover { border-color: var(--text3) !important; color: var(--text) !important; background: rgba(255, 255, 255, 0.04) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Bouton "ok" : reste vert */ .btn.ok { border-color: #2f7d5e !important; color: #6fd4a3 !important; background: rgba(20, 35, 28, 0.5) !important; } .btn.ok:hover { background: rgba(30, 60, 45, 0.6) !important; } /* Bouton "danger" : reste rouge */ .btn.danger { border-color: #7d2f2f !important; color: #f49b9b !important; background: rgba(35, 20, 20, 0.5) !important; } .btn.danger:hover { background: rgba(60, 30, 30, 0.6) !important; } /* Bouton ghost */ .btn.ghost { border-color: transparent !important; color: var(--text3) !important; background: transparent !important; } .btn.ghost:hover { color: var(--text) !important; background: rgba(255,255,255,0.04) !important; } /* ── Inputs / selects : focus ring cyan (le seul moment où il sort) ─ */ .inp, .sel, input, textarea, select { border-radius: 4px; background: var(--surf2); border-color: var(--border2); color: var(--text); transition: border-color .15s, box-shadow .15s; } .inp:focus, .sel:focus, input:focus, textarea:focus, select:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft); outline: none; } /* ── Onglets : soulignement cyan = SEUL accent visible ────────────── */ .tb { border-radius: 4px 4px 0 0; letter-spacing: 0.4px; font-weight: 500; color: var(--text3); background: transparent; border-color: transparent; position: relative; } .tb:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); } .tb.on { color: var(--text); background: transparent; border-color: transparent; box-shadow: inset 0 -2px 0 var(--accent); } /* ── Cartes : monochromes, hover gris ──────────────────────────────── */ .card { transition: transform .18s, border-color .18s, box-shadow .18s; } .card:hover { transform: translateY(-1px); border-color: var(--text4); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55); } /* ── Scrollbars : pile noir/gris, plus du tout cyan ───────────────── */ *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: #2a2d33; border-radius: 5px; border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background-color: #3d4045; background-clip: content-box; } * { scrollbar-color: #2a2d33 transparent; scrollbar-width: thin; } /* ── Sélection texte : gris lumineux ───────────────────────────────── */ ::selection { background: rgba(255, 255, 255, 0.18); color: var(--text); } /* ── Liens : neutres avec accent cyan au survol ───────────────────── */ a { color: var(--text); text-decoration: none; transition: color .12s; } a:hover { color: var(--accent); text-decoration: underline; } /* ── Spinner natif des champs nombre : retiré ──────────────────────── */ input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; } /* ── Étiquettes / labels : caractère mil-tech ──────────────────────── */ label, .label, .form-label { letter-spacing: 0.5px; font-weight: 500; } /* ── Modales : verre noir, pas de teinte cyan ─────────────────────── */ .modal, .mod, [role="dialog"] { border: 1px solid var(--border2); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6); } /* ── Tables : en-têtes en blanc franc, alternance discrète ────────── */ table tbody tr:nth-child(odd) { background: rgba(255,255,255,0.015); } table tbody tr:hover { background: rgba(255,255,255,0.04); } table th { font-family: var(--ff-tech); letter-spacing: 0.6px; font-weight: 600; color: var(--text); text-transform: uppercase; font-size: 11px; } /* ── Pulse d'attention (accent cyan, rare) ────────────────────────── */ @keyframes egide-pulse { 0% { box-shadow: 0 0 0 0 var(--accent-glow); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .egide-pulse { animation: egide-pulse 1.4s ease-out infinite; } /* ╔══════════════════════════════════════════════════════════════════╗ ║ CARTES OBJETS — Base de données, Stock, Blueprints, Flotte ║ ║ ║ ║ Le bundle React utilise un état `cardSz` (1→5 cols) pour ║ ║ piloter `gridTemplateColumns: repeat(N, 1fr)` + un `gridAutoRows`║ ║ fixe en pixels, le tout en INLINE STYLE. Avec !important sur ces║ ║ propriétés on bat le inline style et on bascule le rendu vers ║ ║ une grille auto-fill : c'est l'écran qui décide du nombre de ║ ║ cartes par ligne, pas le slider. ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* Slider "taille des cartes" : on masque le slider lui-même + son wrapper (qui contient les deux icônes ⊞/⊟ encadrantes) via :has(). Pour les vieux navigateurs sans :has(), le slider reste masqué seul (les icônes apparaîtront isolées, mais c'est un fallback rare). */ .card-sz-slider, input[type="range"].card-sz-slider { display: none !important; } div:has(> .card-sz-slider) { display: none !important; } [title^="Taille des cartes"] { display: none !important; } /* Conteneur de grille piloté par React : on force l'auto-fill et on neutralise la hauteur de rangée fixe pour laisser les cartes grandir selon leur contenu, alignées en hauteur sur la plus grande de la ligne. */ .grid-animated { grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)) !important; grid-auto-rows: minmax(320px, auto) !important; align-items: stretch !important; gap: 14px !important; } /* Cartes : taille intrinsèque, marge interne aérée, contenu typo agrandi pour bien remplir la surface après suppression du slider compact. */ .grid-animated > .card { min-height: 320px; padding: 16px 18px !important; border-radius: 6px; display: flex; flex-direction: column; gap: 10px; overflow: visible; font-size: 14px; line-height: 1.4; } /* Bumpe systématiquement les fontSize inline du bundle React à l'intérieur d'une carte. Les valeurs minifiées du bundle (8/9/10/11/13/16) sont sérialisées par le DOM en "font-size: Npx;" — on cible les deux formes (avec/sans espace) pour résister à la normalisation. */ .grid-animated > .card [style*="font-size: 8px"], .grid-animated > .card [style*="font-size:8px"] { font-size: 11px !important; } .grid-animated > .card [style*="font-size: 9px"], .grid-animated > .card [style*="font-size:9px"] { font-size: 12px !important; } .grid-animated > .card [style*="font-size: 10px"], .grid-animated > .card [style*="font-size:10px"] { font-size: 13px !important; } .grid-animated > .card [style*="font-size: 11px"], .grid-animated > .card [style*="font-size:11px"] { font-size: 14px !important; } .grid-animated > .card [style*="font-size: 12px"], .grid-animated > .card [style*="font-size:12px"] { font-size: 15px !important; } .grid-animated > .card [style*="font-size: 13px"], .grid-animated > .card [style*="font-size:13px"] { font-size: 17px !important; } .grid-animated > .card [style*="font-size: 14px"], .grid-animated > .card [style*="font-size:14px"] { font-size: 18px !important; } .grid-animated > .card [style*="font-size: 16px"], .grid-animated > .card [style*="font-size:16px"] { font-size: 20px !important; } /* Boutons & libellés DANS la carte : taille minimale confortable + plus d'espace de respiration. On annule aussi le truncate "nowrap+ellipsis" pour que les libellés s'affichent en entier (peuvent passer à la ligne). */ .grid-animated > .card button, .grid-animated > .card .btn { font-size: 13px !important; padding: 6px 10px !important; white-space: normal !important; letter-spacing: 0.3px; font-weight: 500; } /* Nom de l'item (titre de la carte) : autorisé à passer sur 2 lignes, forcé en blanc franc quelle que soit la couleur ITEM_COLORS du type (qui était cyan/violet/teal/amber/etc selon la catégorie). Cible l'élément qui combine fontWeight 600 + whiteSpace:nowrap. */ .grid-animated > .card div[style*="font-weight: 600"][style*="white-space: nowrap"], .grid-animated > .card div[style*="fontWeight: 600"][style*="whiteSpace: nowrap"], .grid-animated > .card div[style*="font-weight: 700"][style*="white-space: nowrap"] { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-clamp: 2; color: var(--text) !important; } /* Tout autre texte tronqué dans la carte : on coupe la troncature horizontale pour laisser respirer le contenu. Les badges courts type "T-S" ne sont pas concernés (ils n'ont pas overflow:hidden). */ .grid-animated > .card div[style*="text-overflow: ellipsis"]:not([style*="max-width"]) { white-space: normal !important; text-overflow: clip !important; overflow: visible !important; } /* Pulse de la grille au changement de filtre : adapté à la grille fluide */ .grid-animated.grid-pulse { grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)) !important; } /* ── Transparence des cartes (Base de données, Stock, Blueprints) ── On force background-color en rgba alpha 0.9 pour laisser transpa- raître l'image de fond Star Citizen derrière. La bordure colorée par type d'objet (inline) reste pour discriminer les catégories. Le `!important` bat la propriété `background:` shorthand du bundle. */ .grid-animated > .card { background-color: rgba(12, 13, 16, 0.9) !important; } /* ── Couleur de texte unifiée sur toutes les cartes ─────────────── Database, Stock, Blueprints, Flotte (`.grid-animated > .card`) + Membres (`.ship-card`) → tout le texte en gris #d5d5d5 pour harmoniser. Le `!important` bat les couleurs inline du bundle (TIER_COLORS, GRADE_COLORS, manufacturer color, c.text par type d'item, etc.). Les bordures et fonds gardent leurs teintes. */ .grid-animated > .card, .grid-animated > .card *, .ship-card, .ship-card * { color: #d5d5d5 !important; } /* ╔══════════════════════════════════════════════════════════════════╗ ║ Page ÉVÉNEMENTS — harmonisation ║ ║ Le calendrier et les cartes événements ont leur propre style ║ ║ block dans evenements.html. On retire les bandes cyan décoratives║ ║ et on remet les boutons en monochrome (cyan = états actifs only).║ ╚══════════════════════════════════════════════════════════════════╝ */ /* Header de la page : neutre, on garde uniquement le séparateur */ .header { background: var(--bg2); border-bottom: 1px solid var(--border); } .header-logo { color: var(--text) !important; font-family: var(--ff-tech); letter-spacing: 1px; } .header-sub { color: var(--text3) !important; } .btn-back { background: var(--surf2); border-color: var(--border2); color: var(--text); } .btn-back:hover { border-color: var(--text3); color: var(--text); background: rgba(255,255,255,0.04); } .btn-gear { background: var(--surf2); border-color: var(--border2); color: var(--text); } .btn-gear:hover { border-color: var(--text3); color: var(--text); } /* Calendrier : aujourd'hui = surlignage gris, sélection = cyan (état actif) */ .cal-day.today { background: rgba(255, 255, 255, 0.04) !important; border-color: var(--border2) !important; } .cal-day.today .day-num { color: var(--text) !important; font-weight: 700; } .cal-day.selected { background: var(--accent-soft) !important; border-color: var(--accent) !important; box-shadow: inset 0 0 0 1px var(--accent) !important; } .cal-day.selected .day-num { color: var(--accent) !important; } .cal-dot { background: var(--text3) !important; box-shadow: 0 0 0 1px rgba(0,0,0,0.4) !important; } .cal-day.selected .cal-dot { background: var(--accent) !important; } .cal-nav:hover { border-color: var(--text3) !important; color: var(--text) !important; } /* Mini-évenements sidebar : plus de bande cyan à gauche */ .evt-mini { border-left: 3px solid var(--border2) !important; background: var(--surf) !important; border-color: var(--border) !important; } .evt-mini:hover { border-color: var(--text3) !important; border-left-color: var(--text3) !important; background: var(--surf2) !important; } .evt-mini.active { border-color: var(--accent) !important; border-left-color: var(--accent) !important; background: var(--accent-soft) !important; } .evt-mini-title { color: var(--text) !important; } /* Bouton "Créer un événement" : monochrome avec accent cyan en survol */ .btn-create { background: var(--surf2) !important; color: var(--text) !important; border: 1px solid var(--border2) !important; border-radius: 5px !important; font-weight: 500 !important; letter-spacing: 0.4px; } .btn-create:hover { background: var(--accent-soft) !important; border-color: var(--accent) !important; color: var(--accent) !important; } /* Cartes agenda : plus de bande cyan en haut, hover gris */ .agenda-card { background: var(--surf) !important; border: 1px solid var(--border2) !important; border-top: 1px solid var(--border2) !important; } .agenda-card:hover { border-color: var(--text3) !important; box-shadow: 0 6px 22px rgba(0,0,0,0.55); transform: translateY(-1px); } .agenda-card-img { background: var(--surf2) !important; } .agenda-card-title { color: var(--text); font-family: var(--ff-tech); letter-spacing: 0.4px; } .agenda-card-date { color: var(--text3); } /* Bandeau jour sélectionné en haut du contenu */ .day-banner { background: var(--accent-soft) !important; border-color: var(--accent) !important; } .day-banner .chip { color: var(--accent) !important; } .day-banner .clear:hover { border-color: var(--text3) !important; color: var(--text) !important; } /* Bouton submit principal des modaux (création/édition d'événement) */ .btn-primary { background: var(--surf2) !important; color: var(--text) !important; border: 1px solid var(--accent) !important; border-radius: 5px !important; font-weight: 500 !important; letter-spacing: 0.4px !important; } .btn-primary:hover { background: var(--accent-soft) !important; color: var(--accent) !important; } /* Bouton "ghost" et "small" : hover gris au lieu de cyan systématique */ .btn-ghost:hover { border-color: var(--text3) !important; color: var(--text) !important; } .btn-small:hover { border-color: var(--text3) !important; color: var(--text) !important; } /* Headings du WYSIWYG (description d'événement) : blancs au lieu de cyan pour cohérence avec le reste du site. Le contenu user-écrit reste lisible. */ .wyswyg-area h2, .wyswyg-area h3, .evt-detail-desc-rich h2, .evt-detail-desc-rich h3 { color: var(--text) !important; font-family: var(--ff-tech); letter-spacing: 0.5px; } .wyswyg-area blockquote, .evt-detail-desc-rich blockquote { border-left-color: var(--border2) !important; } .modal-info code { color: var(--text2) !important; } /* ╔══════════════════════════════════════════════════════════════════╗ ║ Page HANGAR 3D — harmonisation ║ ║ Topbar de filtres, side panel d'info vaisseau, modal d'admin : ║ ║ on neutralise les hover violets (--purple) et on garde le cyan ║ ║ uniquement pour les états actifs. ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* Topbar des filtres : surfaces neutres */ .topbar { background: var(--bg2) !important; border-bottom-color: var(--border) !important; } .topbar select, .topbar input { background: var(--surf) !important; border-color: var(--border2) !important; color: var(--text) !important; border-radius: 5px; } .topbar select:focus, .topbar input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft); } .pill { background: var(--surf) !important; border-color: var(--border2) !important; color: var(--text2) !important; } .pill.on { color: var(--accent) !important; border-color: var(--accent) !important; background: var(--accent-soft) !important; } /* Boutons hangar : hover gris au lieu de violet */ .topbar .btn, .mod .btn, .side .btn { background: var(--surf2) !important; border-color: var(--border2) !important; color: var(--text) !important; border-radius: 5px; } .topbar .btn:hover, .mod .btn:hover, .side .btn:hover { border-color: var(--text3) !important; color: var(--text) !important; background: rgba(255,255,255,0.04) !important; } /* Side panel d'info vaisseau : titres en Rajdhani, chiffres en blanc */ .side { background: var(--bg2) !important; border-left-color: var(--border) !important; } .side h3 { color: var(--text) !important; font-family: var(--ff-tech); letter-spacing: 0.5px; } .side .row { border-bottom-color: var(--border) !important; } .side .row span:first-child { color: var(--text3) !important; } .side .row span:last-child { color: var(--text) !important; } .side .badge { background: var(--surf) !important; border-color: var(--border2) !important; color: var(--text2) !important; } .side .empty { color: var(--text4) !important; } /* HUD bas : semi-transparent neutre */ .hud { background: rgba(8, 9, 11, 0.82) !important; border-color: var(--border2) !important; color: var(--text2) !important; } .hud b { color: var(--text) !important; } /* Spinner du loader 3D : têt cyan accent (état "en cours") */ .spinner { border-color: var(--border2) !important; border-top-color: var(--accent) !important; } /* Modal d'admin : surfaces neutres */ .mod-overlay { background: rgba(0, 0, 0, 0.78) !important; } .mod { background: var(--bg2) !important; border-color: var(--border2) !important; border-radius: 6px; } .mod h2 { color: var(--text) !important; font-family: var(--ff-tech); letter-spacing: 0.5px; } .mod label { color: var(--text3) !important; letter-spacing: 0.4px; } .mod input, .mod textarea { background: var(--surf) !important; border-color: var(--border2) !important; color: var(--text) !important; border-radius: 5px; } .mod input:focus, .mod textarea:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft); } .mod .help { color: var(--text4) !important; } /* Bouton "Téléverser" du hangar : monochrome */ #aUpload { border-color: var(--border2) !important; color: var(--text) !important; } #aUpload:hover { border-color: var(--accent) !important; color: var(--accent) !important; } /* Toast en bas : fond noir, accent en bordure */ .toast { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--accent); box-shadow: 0 4px 18px rgba(0,0,0,0.5); } /* ╔══════════════════════════════════════════════════════════════════╗ ║ THÈME CLAIR — passe d'harmonisation ║ ║ Refait toutes les overrides spécifiques au thème sombre pour ║ ║ qu'elles fonctionnent aussi en clair (fonds, textes, halos, ║ ║ cartes, scrollbars, image de fond, banner). Le thème reste un ║ ║ miroir noir-vers-blanc avec le même accent cyan. ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* L'image de fond NE CHANGE PAS entre clair et sombre — c'est la demande explicite. On garde donc le bg image tel quel et seules les surfaces, les cartes, les boutons et le texte s'adaptent au thème. La règle body initiale (ligne ~128) gère déjà l'image, on ne la surcharge plus en mode clair. */ /* Cartes : surface claire à 0.92 opacité, texte sombre */ [data-theme="light"] .grid-animated > .card { background-color: rgba(248, 249, 251, 0.92) !important; border-color: var(--border2) !important; } [data-theme="light"] .grid-animated > .card, [data-theme="light"] .grid-animated > .card *, [data-theme="light"] .ship-card, [data-theme="light"] .ship-card * { color: #2a2d33 !important; } /* Boutons : alléger les fonds gardés en rgba sombre */ [data-theme="light"] .btn { background: rgba(255,255,255,0.55) !important; border-color: var(--border2) !important; color: var(--text) !important; } [data-theme="light"] .btn:hover { background: rgba(0,0,0,0.05) !important; border-color: var(--text3) !important; color: var(--text) !important; } [data-theme="light"] .btn.ok { background: rgba(52, 211, 153, 0.10) !important; border-color: #2f7d5e !important; color: #1a7d4f !important; } [data-theme="light"] .btn.danger { background: rgba(248, 113, 113, 0.10) !important; border-color: #c53030 !important; color: #b91c1c !important; } [data-theme="light"] .btn.ghost { background: transparent !important; color: var(--text3) !important; } /* Inputs / selects */ [data-theme="light"] .inp, [data-theme="light"] .sel, [data-theme="light"] input, [data-theme="light"] textarea, [data-theme="light"] select { background: var(--surf2) !important; border-color: var(--border2) !important; color: var(--text) !important; } /* Onglets : couleur de texte sombre, soulignement cyan inchangé */ [data-theme="light"] .tb { color: var(--text3) !important; } [data-theme="light"] .tb:hover { color: var(--text) !important; background: rgba(0,0,0,0.04) !important; } [data-theme="light"] .tb.on { color: var(--text) !important; } /* Tableaux */ [data-theme="light"] table tbody tr:nth-child(odd) { background: rgba(0,0,0,0.018); } [data-theme="light"] table tbody tr:hover { background: rgba(0,0,0,0.045); } [data-theme="light"] table th { color: var(--text) !important; } /* Scrollbars */ [data-theme="light"] *::-webkit-scrollbar-thumb { background: #b3b6ba; } [data-theme="light"] *::-webkit-scrollbar-thumb:hover { background-color: #82858b; } [data-theme="light"] * { scrollbar-color: #b3b6ba transparent; } /* Sélection texte */ [data-theme="light"] ::selection { background: rgba(0,0,0,0.12); color: var(--text); } /* Footer : surface claire */ [data-theme="light"] footer { background: rgba(248, 249, 251, 0.96) !important; border-top-color: var(--border) !important; } /* Boot screen — surcharge la teinte du spinner pour qu'il reste visible */ [data-theme="light"] #boot { background: var(--bg) !important; } [data-theme="light"] .boot-spinner { border-color: #cdcfd3 !important; border-top-color: var(--text) !important; } /* Page Événements (evenements.html) — sidebar et header en clair */ [data-theme="light"] .header { background: var(--bg2) !important; border-bottom-color: var(--border) !important; } [data-theme="light"] .sidebar { background: var(--bg2) !important; border-right-color: var(--border) !important; } [data-theme="light"] .agenda-card { background: var(--surf) !important; border-color: var(--border2) !important; } [data-theme="light"] .agenda-card-img { background: var(--surf2) !important; } [data-theme="light"] .evt-mini { background: var(--surf) !important; border-color: var(--border) !important; border-left-color: var(--border2) !important; } [data-theme="light"] .evt-mini:hover { background: var(--surf2) !important; } [data-theme="light"] .evt-mini.active { background: rgba(30,111,168,0.08) !important; border-color: var(--accent) !important; border-left-color: var(--accent) !important; } [data-theme="light"] .evt-mini-title { color: var(--text) !important; } [data-theme="light"] .cal-day:hover { background: var(--surf) !important; } [data-theme="light"] .cal-day.today { background: rgba(0,0,0,0.04) !important; } [data-theme="light"] .cal-day.selected { background: rgba(30,111,168,0.10) !important; } /* Hangar 3D — sidebar + topbar adaptés */ [data-theme="light"] .topbar { background: var(--bg2) !important; } [data-theme="light"] .side { background: var(--bg2) !important; border-left-color: var(--border) !important; } [data-theme="light"] .pill { background: var(--surf) !important; border-color: var(--border2) !important; color: var(--text2) !important; } [data-theme="light"] .hud { background: rgba(248,249,251,0.85) !important; border-color: var(--border2) !important; color: var(--text2) !important; } [data-theme="light"] .mod { background: var(--bg2) !important; border-color: var(--border2) !important; } [data-theme="light"] .toast { background: var(--surf) !important; color: var(--text) !important; } /* Modales React (LoadoutEditor / dbModal supprimée / etc.) — fond rgba assombri en clair = atténuer */ [data-theme="light"] [style*="rgba(0, 0, 0, 0.78)"], [data-theme="light"] [style*="rgba(0,0,0,.78)"], [data-theme="light"] [style*="rgba(0, 0, 0, 0.85)"], [data-theme="light"] [style*="rgba(0,0,0,.85)"] { background: rgba(0,0,0,0.45) !important; } /* ╔══════════════════════════════════════════════════════════════════╗ ║ THÈME CLAIR — overrides exhaustifs des inline styles ║ ║ Capture les éléments dont les couleurs sont écrites en dur dans ║ ║ le bundle (rgba, hex), pour qu'ils basculent quand on switch. ║ ║ L'image de fond du body N'est PAS touchée — elle reste la même ║ ║ dans les deux thèmes (demande utilisateur). ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* Toutes les cartes type ITEM_COLORS / BP_CAT_C ayant un fond rgba sombre passent en surface claire en mode light */ [data-theme="light"] [style*="background:rgba(8,18,36"], [data-theme="light"] [style*="background:rgba(12,13,16"], [data-theme="light"] [style*="background:rgba(2,8,20"], [data-theme="light"] [style*="background:rgba(4,12,30"], [data-theme="light"] [style*="background:rgba(8,9,12"], [data-theme="light"] [style*="background:rgba(0,0,0,0.7"], [data-theme="light"] [style*="background:rgba(0,0,0,.7"], [data-theme="light"] [style*="background-color:rgba(12,13,16"] { background-color: var(--surf2) !important; } /* Cartes avec hex sombre hardcodé (Métal/Minerai/Composants etc.) */ [data-theme="light"] [style*="background:#0d2233"], [data-theme="light"] [style*="background: #0d2233"], [data-theme="light"] [style*="background:#1a0d2e"], [data-theme="light"] [style*="background:#0d1f1a"], [data-theme="light"] [style*="background:#2a0d0d"], [data-theme="light"] [style*="background:#2a1a0d"], [data-theme="light"] [style*="background:#1f1a0d"], [data-theme="light"] [style*="background:#1f0d0d"], [data-theme="light"] [style*="background:#1a1207"], [data-theme="light"] [style*="background:#0d1f14"], [data-theme="light"] [style*="background:#0e1014"], [data-theme="light"] [style*="background:#11101a"], [data-theme="light"] [style*="background:#0e1413"], [data-theme="light"] [style*="background:#161012"], [data-theme="light"] [style*="background:#15110e"], [data-theme="light"] [style*="background:#0c0d10"] { background-color: var(--surf) !important; } /* Halos rgba accent cyan (badges en stock, focus rings) → version claire */ [data-theme="light"] [style*="rgba(126,200,247,.10)"], [data-theme="light"] [style*="rgba(126,200,247,0.10)"], [data-theme="light"] [style*="rgba(126,200,247,.15)"], [data-theme="light"] [style*="rgba(126,200,247,.18)"], [data-theme="light"] [style*="rgba(126,200,247,.25)"], [data-theme="light"] [style*="rgba(126,200,247,.28)"], [data-theme="light"] [style*="rgba(30,111,168,.12)"], [data-theme="light"] [style*="rgba(30,111,168,.20)"], [data-theme="light"] [style*="rgba(30,111,168,.25)"] { background-color: rgba(30,111,168,0.12) !important; } /* Texte clair (#ececee, #c8cacd, #e2e8f0) → texte sombre en light */ [data-theme="light"] [style*="color:#ececee"], [data-theme="light"] [style*="color: #ececee"], [data-theme="light"] [style*="color:#c8cacd"], [data-theme="light"] [style*="color:#e2e8f0"], [data-theme="light"] [style*="color:#fff"], [data-theme="light"] [style*="color: #fff"], [data-theme="light"] [style*="color:white"] { color: var(--text) !important; } /* Texte gris clair foncé (#8d9095, #94a3b8, #64748b, #475569) → adapte vers du gris clair en light */ [data-theme="light"] [style*="color:#8d9095"], [data-theme="light"] [style*="color:#94a3b8"], [data-theme="light"] [style*="color:#64748b"], [data-theme="light"] [style*="color:#475569"], [data-theme="light"] [style*="color:#5e6166"] { color: var(--text3) !important; } /* Bordures sombres → bordures claires */ [data-theme="light"] [style*="border:1px solid #1d1f24"], [data-theme="light"] [style*="border:1px solid #2a2d33"], [data-theme="light"] [style*="border:1px solid #1a2843"], [data-theme="light"] [style*="border-color:#1d1f24"], [data-theme="light"] [style*="border-color:#2a2d33"] { border-color: var(--border2) !important; } /* Topbar et footer (utilisent var(--nav)/var(--bg2)/etc. déjà adaptés par les variables — cette règle force juste le rendu) */ [data-theme="light"] [style*="background:var(--nav)"], [data-theme="light"] [style*="background: var(--nav)"], [data-theme="light"] [style*="background:var(--bg2)"], [data-theme="light"] [style*="background:var(--surf2)"], [data-theme="light"] [style*="background:var(--surf)"] { /* Already adapted via CSS variables, but ensures override on shorthand */ color: var(--text) !important; } /* Bouton Toggle thème dans la topbar — fond + bordure adaptatifs */ [data-theme="light"] button[title*="thème"], [data-theme="light"] button[title*="theme"] { background: var(--surf2) !important; border-color: var(--border2) !important; color: var(--text) !important; } /* Modales React (rgba(0,0,0,...) overlays) — adoucies en light */ [data-theme="light"] [style*="background:rgba(0,0,0,0.92)"], [data-theme="light"] [style*="background:rgba(0,0,0,0.85)"], [data-theme="light"] [style*="background:rgba(0,0,0,0.78)"] { background-color: rgba(0,0,0,0.40) !important; } /* ╔══════════════════════════════════════════════════════════════════╗ ║ LOADOUT EDITOR — intégration au thème global ║ ║ Le LoadoutEditor (modal React fullscreen) reçoit désormais un ║ ║ bandeau image en header et un fond translucide pour rappeler ║ ║ les pages Événements / Hangar 3D. ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* La modal est full-screen avec un blur backdrop ; on laisse le bg image du body transparaître discrètement à travers */ #loadout-page { background: rgba(0, 0, 0, 0.55) !important; backdrop-filter: blur(4px); } [data-theme="light"] #loadout-page { background: rgba(255, 255, 255, 0.55) !important; backdrop-filter: blur(4px); } /* Boîte halo derrière les boutons du header (lisibilité sur l'image) */ #loadout-page > div:first-of-type > div { /* Blocs gauche/droit du header */ } /* Texte du nom de vaisseau dans le header — sur fond image, on le ressort avec une légère ombre */ #loadout-page > div:first-of-type [style*="color:var(--text)"], #loadout-page > div:first-of-type [style*="color: var(--text)"] { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); } /* Surface principale (le contenu sous le header) prend la couleur thème adaptée — variables CSS gèrent dark/light automatiquement */ #loadout-page > div:not(:first-of-type) { background-color: var(--bg); } /* Les cartes composants à l'intérieur passent en surface thème */ [data-theme="light"] #loadout-page .card { background-color: var(--surf2) !important; border-color: var(--border2) !important; } [data-theme="light"] #loadout-page, [data-theme="light"] #loadout-page * { /* En light, force le texte à une couleur sombre cohérente sauf pour les éléments avec couleur intentionnelle (boutons rouges, etc.) */ } /* ────────────────────────────────────────────────────────────────── * PAGE ACCUEIL — Tuiles d'onglets avec effet scan * ────────────────────────────────────────────────────────────────── */ .home-tile { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; position: relative; isolation: isolate; } .home-tile::before { /* Ligne lumineuse qui balaie verticalement la tuile, façon scanner sci-fi */ content: ""; position: absolute; left: 0; right: 0; top: -35%; height: 35%; background: linear-gradient(180deg, transparent 0%, rgba(126, 200, 247, 0.06) 30%, rgba(126, 200, 247, 0.55) 48%, rgba(255, 255, 255, 0.85) 50%, rgba(126, 200, 247, 0.55) 52%, rgba(126, 200, 247, 0.06) 70%, transparent 100%); pointer-events: none; z-index: 1; filter: blur(0.4px); animation: home-tile-scan 11s cubic-bezier(.55,.05,.45,.95) infinite; mix-blend-mode: screen; } .home-tile::after { /* Lignes de scan horizontales subtiles, façon CRT, + bordure intérieure clignotante */ content: ""; position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient( 0deg, rgba(126, 200, 247, 0.045) 0px, rgba(126, 200, 247, 0.045) 1px, transparent 1px, transparent 4px); z-index: 0; opacity: .55; border-radius: inherit; } .home-tile:hover { transform: translateY(-2px); border-color: rgba(126, 200, 247, 0.85) !important; box-shadow: 0 6px 22px rgba(126, 200, 247, 0.30), 0 0 0 1px rgba(126, 200, 247, 0.4) inset; } .home-tile:hover::before { animation-duration: 8.5s; } .home-tile > * { position: relative; z-index: 2; } @keyframes home-tile-scan { /* La ligne descend du haut vers le bas, sort sous la tuile, puis pause hors-cadre avant de recommencer */ 0% { top: -35%; opacity: 0; } 8% { opacity: 1; } 60% { top: 100%; opacity: 1; } 68% { opacity: 0; } 100% { top: -35%; opacity: 0; } } /* Décalage des animations entre tuiles pour un effet "scan en cascade" */ .home-tile:nth-child(1)::before { animation-delay: 0s; } .home-tile:nth-child(2)::before { animation-delay: -1.2s; } .home-tile:nth-child(3)::before { animation-delay: -2.4s; } .home-tile:nth-child(4)::before { animation-delay: -3.6s; } .home-tile:nth-child(5)::before { animation-delay: -4.8s; } .home-tile:nth-child(6)::before { animation-delay: -6.0s; } .home-tile:nth-child(7)::before { animation-delay: -7.2s; } .home-tile:nth-child(8)::before { animation-delay: -8.4s; } .home-tile:nth-child(9)::before { animation-delay: -9.6s; } /* News Live — Point rouge pulsant */ .news-live-dot { width: 10px; height: 10px; border-radius: 50%; background: #f87171; box-shadow: 0 0 8px #f87171, 0 0 14px rgba(248,113,113,.45); animation: news-dot-pulse 1.4s ease-in-out infinite; flex-shrink: 0; } @keyframes news-dot-pulse { 0%, 100% { box-shadow: 0 0 8px #f87171, 0 0 14px rgba(248,113,113,.45); opacity: 1; } 50% { box-shadow: 0 0 4px #f87171; opacity: .55; } } /* Encart News Live : style images insérées par admin */ .news-live-content img, .news-live-content video { max-width: 100%; border-radius: 6px; margin: 6px 0; display: block; } .news-live-content h1, .news-live-content h2, .news-live-content h3 { margin: 12px 0 6px 0; color: #7ec8f7; letter-spacing: .3px; } .news-live-content p { margin: 0 0 8px 0; } .news-live-content a { color: #7ec8f7; text-decoration: underline; } .news-live-content ul, .news-live-content ol { margin: 6px 0 8px 22px; } /* ────────────────────────────────────────────────────────────────── * BANDEAU FLASH NEWS — Bandeau défilant style chaîne d'info continue * ────────────────────────────────────────────────────────────────── */ .flash-news-bar { position: relative; width: 100%; background: linear-gradient(90deg, rgba(248, 113, 113, 0.12), rgba(248, 113, 113, 0.05) 50%, rgba(248, 113, 113, 0.12)), var(--card-over); border-top: 1px solid rgba(248, 113, 113, 0.55); border-bottom: 1px solid rgba(248, 113, 113, 0.30); overflow: hidden; height: 28px; display: flex; align-items: center; box-shadow: inset 0 0 24px rgba(248, 113, 113, 0.10); z-index: 1000; flex-shrink: 0; } .flash-news-bar::before { /* Liseré rouge clignotant qui glisse en haut */ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(248, 113, 113, 0.85) 50%, transparent); animation: flash-news-shine 2.4s linear infinite; z-index: 5; } .flash-news-bar::after { content: none; } .flash-news-track { display: flex; flex-wrap: nowrap; width: max-content; white-space: nowrap; align-items: center; gap: 0; position: relative; z-index: 2; animation: flash-news-scroll 70s linear infinite; will-change: transform; } .flash-news-bar:hover .flash-news-track { animation-play-state: paused; } .flash-news-seg { display: inline-flex; align-items: center; gap: 0; padding: 0; flex-shrink: 0; } .flash-news-tag { background: rgba(248, 113, 113, 0.16); color: #fda4af; font-weight: 700; letter-spacing: 1.4px; padding: 2px 10px; font-size: 10px; margin: 0 14px; border-radius: 3px; text-transform: uppercase; border: 1px solid rgba(248, 113, 113, 0.45); flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; } .flash-news-warn { display: inline-block; font-size: 11px; color: #f87171; animation: flash-news-warn-blink 1.4s ease-in-out infinite; } .flash-news-msg { color: var(--text); font-weight: 600; font-size: 12px; letter-spacing: .3px; padding: 0 22px; flex-shrink: 0; } @keyframes flash-news-scroll { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-50%, 0, 0); } } @keyframes flash-news-shine { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } } @keyframes flash-news-warn-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } /* Variante claire : couleurs adaptées au thème light */ [data-theme="light"] .flash-news-bar { background: linear-gradient(90deg, rgba(220, 38, 38, 0.10), rgba(220, 38, 38, 0.04) 50%, rgba(220, 38, 38, 0.10)), var(--card-over); border-top-color: rgba(220, 38, 38, 0.55); border-bottom-color: rgba(220, 38, 38, 0.30); box-shadow: inset 0 0 24px rgba(220, 38, 38, 0.08); } [data-theme="light"] .flash-news-tag { color: #b91c1c; border-color: rgba(220, 38, 38, 0.5); background: rgba(220, 38, 38, 0.08); } [data-theme="light"] .flash-news-warn { color: #b91c1c; } [data-theme="light"] .flash-news-msg { color: var(--text); } [data-theme="light"] .home-tile::after { background-image: repeating-linear-gradient( 0deg, rgba(30, 111, 168, 0.06) 0px, rgba(30, 111, 168, 0.06) 1px, transparent 1px, transparent 4px); } /* ────────────────────────────────────────────────────────────────── * MASCOTTE EgideCorp — animations de transition * ────────────────────────────────────────────────────────────────── */ .mascot-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 99999; overflow: hidden; } /* Variante "centered/dim" : voile sombre derrière la mascotte centrée pour mettre en valeur le moment de bienvenue après la connexion. */ .mascot-overlay-dim { background: radial-gradient(ellipse at center, rgba(5, 6, 8, 0.55) 0%, rgba(5, 6, 8, 0.40) 40%, rgba(5, 6, 8, 0.0) 80%); animation: mascot-dim-fade 2.4s ease-in-out forwards; } @keyframes mascot-dim-fade { 0% { opacity: 0; } 18% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; } } /* ── Sprite frame helper : box qui révèle une frame à la fois via background-position Le sprite est un strip horizontal de 4 frames de 360x529 = 1440x529 total. */ .mascot-sprite { display: block; background-repeat: no-repeat; background-size: 400% 100%; /* 4 frames côte-à-côte */ background-position: 0% 0%; image-rendering: -webkit-optimize-contrast; } /* Walker : la mascotte marche sur place en bas-droite (vidéo loop) Le fond du MP4 est BAKED en noir pur (#000) ; on utilise mix-blend-mode: screen pour que le noir soit "soustrait" du fond de page → l'arrière-plan du site transparait à la place du noir, le perso reste intact. */ .mascot-walker { position: absolute; bottom: 24px; right: 28px; width: 180px; height: 270px; animation: mascot-walker-life 6s ease-in-out forwards; transform-origin: 100% 100%; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5)); } .mascot-walker video { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; display: block; background: transparent; pointer-events: none; /* Le noir du MP4 devient transparent grâce à screen */ mix-blend-mode: screen; } @keyframes mascot-walker-life { /* Entrée par le bas-droite, séjour de ~5s, sortie par le bas-droite */ 0% { transform: translate(40px, 50px) scale(.7); opacity: 0; } 8% { transform: translate(0, 0) scale(1); opacity: 1; } 92% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(30px, 30px) scale(.85); opacity: 0; } } /* Petite poussière sous les pieds pendant la marche */ .mascot-walker::after { content: ""; position: absolute; bottom: -2px; left: 50%; width: 80px; height: 12px; margin-left: -40px; background: radial-gradient(ellipse at center, rgba(126,200,247,.35) 0%, transparent 70%); border-radius: 50%; animation: mascot-dust 0.5s ease-in-out infinite; pointer-events: none; z-index: 2; } @keyframes mascot-dust { 0%, 100% { opacity: 0.7; transform: scaleX(1); } 50% { opacity: 0.3; transform: scaleX(1.4); } } /* Sprite-step animation conservée pour le salute et le question */ @keyframes mascot-sprite-4 { 0% { background-position: 0% 0%; } 100% { background-position: -400% 0%; } } /* Salute : la mascotte apparaît au CENTRE de l'écran avec une bulle de bienvenue */ .mascot-salute-wrap { position: absolute; top: 50%; left: 50%; display: flex; align-items: flex-end; gap: 18px; animation: mascot-salute-life 2.4s cubic-bezier(.25,.85,.4,1.05) forwards; transform-origin: 50% 50%; } .mascot-salute-img { width: 280px; height: auto; display: block; filter: drop-shadow(0 14px 30px rgba(126, 200, 247, 0.55)); transform-origin: 50% 100%; animation: mascot-salute-wave 1.1s ease-in-out infinite; } @keyframes mascot-salute-wave { /* Mouvement gauche-droite, comme s'il saluait de la main */ 0%, 100% { transform: rotate(-4deg) translateX(-3px); } 50% { transform: rotate(4deg) translateX(3px); } } /* Question : peut être affichée seule (transition courte) ou avec bulle */ .mascot-question { position: absolute; bottom: 28px; right: 32px; width: 160px; height: 235px; background-image: url('../img/mascot/question-strip.png'); animation: mascot-question-life 1.6s ease-in-out forwards, mascot-sprite-4 0.7s steps(4) infinite; transform-origin: 100% 100%; filter: drop-shadow(0 8px 18px rgba(126, 200, 247, 0.4)); } @keyframes mascot-question-life { 0% { transform: translate(40px, 30px) scale(.7); opacity: 0; } 20% { transform: translate(0, 0) scale(1); opacity: 1; } 85% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(20px, 20px) scale(.85); opacity: 0; } } .salute-bubble { background: linear-gradient(135deg, rgba(126,200,247,.18), rgba(126,200,247,.06)); border: 1px solid rgba(126, 200, 247, 0.55); border-radius: 12px; padding: 12px 18px; color: var(--text); font-size: 14px; font-weight: 600; letter-spacing: .3px; white-space: nowrap; margin-bottom: 70px; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,.4), 0 0 22px rgba(126,200,247,.18); backdrop-filter: blur(6px); animation: salute-bubble-pop 0.6s cubic-bezier(.34,1.56,.64,1) 0.3s both; transform-origin: 100% 100%; } .salute-bubble::after { /* Petite flèche à droite pointant vers la mascotte */ content: ""; position: absolute; right: -8px; top: 50%; margin-top: -8px; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 8px solid rgba(126, 200, 247, 0.55); } .salute-bubble strong { color: #7ec8f7; } @keyframes mascot-salute-life { /* Centrage : translate(-50%,-50%) pour qu'au final le wrap soit centré sur top/left:50%. Pendant l'entrée/sortie on combine ce centrage avec un offset de scale + glissement. */ 0% { transform: translate(-50%, calc(-50% + 60px)) scale(.6); opacity: 0; } 18% { transform: translate(-50%, calc(-50% - 12px)) scale(1.06); opacity: 1; } 30% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 82% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, calc(-50% + 30px)) scale(.85); opacity: 0; } } @keyframes mascot-salute-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-6px) rotate(0.5deg); } } @keyframes salute-bubble-pop { 0% { transform: scale(.6) translateY(8px); opacity: 0; } 60% { transform: scale(1.08) translateY(-2px); opacity: 1; } 100% { transform: scale(1) translateY(0); opacity: 1; } } /* Variante mobile : mascotte plus petite, repositionnée */ @media (max-width: 720px) { .mascot-walker { height: 120px; bottom: 14px; } .mascot-salute-img { height: 180px; } .mascot-salute-wrap { right: 14px; bottom: 18px; gap: 8px; } .salute-bubble { font-size: 12px; padding: 9px 12px; margin-bottom: 50px; } } /* Respect des préférences réduction d'animation */ @media (prefers-reduced-motion: reduce) { .mascot-overlay { display: none !important; } } /* ────────────────────────────────────────────────────────────────── * THÈMES DIVISION — palette + footer coloré + logo + bandeau * * Activé automatiquement quand l'utilisateur connecté a sa division * réglée sur une division thémée et n'a pas désactivé le thème. * Le wrapper React reçoit data-division-theme="". * * Flotille Artemis → rouge #a92936 * Division Hermès → cyan #00a8ff * ────────────────────────────────────────────────────────────────── */ /* ── ARTEMIS (rouge #a92936) ──────────────────────────────────────── */ [data-division-theme="artemis"] { --accent: #a92936; --accent2: #c33545; --accent-dim: #872129; --accent-glow: rgba(169, 41, 54, 0.30); --accent-soft: rgba(169, 41, 54, 0.10); --discord: #a92936; --blue: #a92936; --division-color: #a92936; --division-color-light: #c33545; --division-rgba: 169, 41, 54; } [data-division-theme="artemis"]::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, #a92936 30%, #c33545 50%, #a92936 70%, transparent); z-index: 10000; pointer-events: none; box-shadow: 0 0 12px rgba(169, 41, 54, 0.5); } [data-division-theme="artemis"] footer::after { background-image: url('../img/divisions/artemis.png'); filter: drop-shadow(0 2px 6px rgba(169, 41, 54, 0.4)); } [data-division-theme="artemis"] .banner-division-badge { background: linear-gradient(90deg, transparent, rgba(169, 41, 54, 0.18), transparent); padding: 4px 24px; border-radius: 4px; } [data-theme="light"][data-division-theme="artemis"] { --accent: #a92936; --accent-dim: #6d1a22; --accent-glow: rgba(169, 41, 54, 0.25); --accent-soft: rgba(169, 41, 54, 0.08); } /* ── HERMÈS (cyan #00a8ff) ───────────────────────────────────────── */ [data-division-theme="hermes"] { --accent: #00a8ff; --accent2: #38c0ff; --accent-dim: #0080cc; --accent-glow: rgba(0, 168, 255, 0.30); --accent-soft: rgba(0, 168, 255, 0.10); --discord: #00a8ff; --blue: #00a8ff; --division-color: #00a8ff; --division-color-light: #38c0ff; --division-rgba: 0, 168, 255; } [data-division-theme="hermes"]::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, #00a8ff 30%, #38c0ff 50%, #00a8ff 70%, transparent); z-index: 10000; pointer-events: none; box-shadow: 0 0 12px rgba(0, 168, 255, 0.5); } [data-division-theme="hermes"] footer::after { background-image: url('../img/divisions/hermes.png'); filter: drop-shadow(0 2px 6px rgba(0, 168, 255, 0.4)); } [data-division-theme="hermes"] .banner-division-badge { background: linear-gradient(90deg, transparent, rgba(0, 168, 255, 0.18), transparent); padding: 4px 24px; border-radius: 4px; } [data-theme="light"][data-division-theme="hermes"] { --accent: #00a8ff; --accent-dim: #005f99; --accent-glow: rgba(0, 168, 255, 0.25); --accent-soft: rgba(0, 168, 255, 0.08); } /* ── Footer commun à toutes les divisions thémées ─────────────────── */ /* Le footer reçoit la couleur de la division active via la variable --division-color (définie par chaque thème ci-dessus) — fond légèrement teinté + bordure haute teintée + logo centré au-dessus. */ [data-division-theme] footer { position: relative; padding-bottom: 22px; background: linear-gradient(90deg, rgba(var(--division-rgba), 0.0) 0%, rgba(var(--division-rgba), 0.14) 50%, rgba(var(--division-rgba), 0.0) 100%), var(--nav) !important; border-top: 1px solid rgba(var(--division-rgba), 0.45) !important; } [data-division-theme] footer::after { content: ""; position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); width: 56px; height: 56px; background-size: contain; background-position: center; background-repeat: no-repeat; pointer-events: none; opacity: 0.95; } /* ── États interactifs communs à toute division thémée ────────────── */ [data-division-theme] .tb.on { color: var(--division-color-light) !important; border-bottom-color: var(--division-color-light) !important; } [data-division-theme] .card:focus-within, [data-division-theme] .card:hover { border-color: rgba(var(--division-rgba), 0.45) !important; } /* ───────────────────── Communiqué editor — contentEditable placeholders ───── */ .comm-field[contenteditable="true"]:empty::before, .comm-body[contenteditable="true"]:empty::before { content: attr(data-placeholder); color: rgba(0, 0, 0, 0.32); pointer-events: none; font-style: italic; } .comm-field[contenteditable="true"]:focus, .comm-body[contenteditable="true"]:focus { outline: none; } .comm-img-wrap { box-shadow: 0 0 0 1px transparent; transition: box-shadow .15s ease; } .comm-img-wrap:hover { box-shadow: 0 0 0 2px rgba(30, 111, 168, 0.65); } .comm-img-wrap:hover .comm-img-del { display: block !important; } .comm-img-del:hover { background: rgba(220, 38, 38, 1) !important; transform: scale(1.1); } /* Hover ring on the wrapper to make the draggable area visible */ .comm-img-wrap:hover { border-color: rgba(126, 200, 247, 0.7) !important; } /* ───────────────────── Communiqué export — html2canvas baseline fix ─────── */ /* html2canvas places text slightly below the browser's actual baseline (~2–3 px). This class, applied only on the cloned DOM during export, shifts text up so the rendered PNG/PDF matches what's visible on screen. The live editor is unaffected. */ .communique-canvas.comm-exporting .comm-field, .communique-canvas.comm-exporting .comm-body { transform: translateY(-3px); } .communique-canvas.comm-exporting .comm-field::before, .communique-canvas.comm-exporting .comm-body::before { /* Hide placeholder text in export so empty zones export blank */ content: none !important; } /* Drop drag handles / image controls from the export too */ .communique-canvas.comm-exporting .comm-img-tools, .communique-canvas.comm-exporting .comm-img-del { display: none !important; } /* ───────────────────── Communiqué editor — themed color picker ─────────── */ .comm-colorpicker .btn.ghost { border: 1px solid var(--border) !important; background: var(--surf2) !important; transition: border-color .15s ease, background .15s ease; } .comm-colorpicker .btn.ghost:hover { border-color: rgba(126, 200, 247, 0.6) !important; background: rgba(126, 200, 247, 0.08) !important; } .comm-colorpicker [style*="grid-template-columns"] > button:hover { transform: scale(1.12); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.25) !important; } .comm-colorpicker input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; } .comm-colorpicker input[type="color"]::-webkit-color-swatch { border-radius: 3px; border: none; } .comm-colorpicker input[type="color"]::-moz-color-swatch { border-radius: 3px; border: none; } .comm-colorpicker input[type="text"]:focus { border-color: rgba(126, 200, 247, 0.7) !important; box-shadow: 0 0 0 2px rgba(126, 200, 247, 0.18); }