/* WP QiMén DùnJiǎ Claude — v1c */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&family=Noto+Serif+SC:wght@400;600;700&display=swap'); /* ── Variables globales (widget) ── */ .qmdj-widget { --qmdj-accent: #1e3a5f; --qmdj-accent-l: #e8edf3; --qmdj-bg: #ffffff; --qmdj-bg2: #f8f9fa; --qmdj-bg3: #f1f3f5; --qmdj-border: #dee2e6; --qmdj-border2: #ced4da; --qmdj-text: #212529; --qmdj-text2: #495057; --qmdj-text3: #868e96; --qmdj-red: #c92a2a; --qmdj-green: #2f9e44; --qmdj-gold: #b45309; --qmdj-max-width: 1000px; --qmdj-radius: 2px; --qmdj-shadow: none; --qmdj-font-ui: 'IBM Plex Sans',system-ui,sans-serif; --qmdj-font-mono: 'IBM Plex Mono',monospace; --qmdj-font-zh: 'Noto Serif SC',serif; font-family:var(--qmdj-font-ui); font-size:14px; color:var(--qmdj-text); background:var(--qmdj-bg); max-width:var(--qmdj-max-width); margin:1.5rem auto; border:1px solid var(--qmdj-border); border-radius:var(--qmdj-radius); box-shadow:var(--qmdj-shadow); } /* ── Variables globales pour la modal (injectée dans ) ── */ :root { --qmdj-modal-accent: #1e3a5f; --qmdj-modal-bg: #ffffff; --qmdj-modal-bg2: #f8f9fa; --qmdj-modal-bg3: #f1f3f5; --qmdj-modal-border: #dee2e6; --qmdj-modal-border2: #ced4da; --qmdj-modal-text: #212529; --qmdj-modal-text2: #495057; --qmdj-modal-text3: #868e96; --qmdj-modal-red: #c92a2a; --qmdj-modal-gold: #b45309; --qmdj-modal-radius: 2px; --qmdj-modal-font-ui: 'IBM Plex Sans', system-ui, sans-serif; --qmdj-modal-font-mono:'IBM Plex Mono', monospace; --qmdj-modal-font-zh: 'Noto Serif SC', serif; --qmdj-modal-border: #dee2e6; --qmdj-modal-border2: #ced4da; --qmdj-modal-text: #212529; --qmdj-modal-text2: #495057; --qmdj-modal-text3: #868e96; --qmdj-modal-red: #c92a2a; --qmdj-modal-gold: #b45309; --qmdj-modal-radius: 2px; --qmdj-modal-font-ui: 'IBM Plex Sans',system-ui,sans-serif; --qmdj-modal-font-mono:'IBM Plex Mono',monospace; --qmdj-modal-font-zh: 'Noto Serif SC',serif; } /* ── En-tête ── */ .qmdj-header { display:flex; align-items:center; justify-content:space-between; padding:.65rem 1.25rem; background:var(--qmdj-bg2); border-bottom:1px solid var(--qmdj-border); } .qmdj-header-left { display:flex; align-items:baseline; gap:.5rem; } .qmdj-title-zh { font-family:var(--qmdj-font-zh); font-size:1.15rem; font-weight:700; color:var(--qmdj-accent); letter-spacing:.05em; } .qmdj-title-sep { color:var(--qmdj-text3); } .qmdj-title-fr { font-size:.78rem; font-weight:500; color:var(--qmdj-text2); } .qmdj-script-toggle { display:flex; border:1px solid var(--qmdj-border2); border-radius:var(--qmdj-radius); overflow:hidden; } .qmdj-script-btn { padding:.2rem .6rem; font-family:var(--qmdj-font-zh); font-size:.85rem; background:var(--qmdj-bg); border:none; cursor:pointer; color:var(--qmdj-text2); transition:background .15s,color .15s; } .qmdj-script-btn+.qmdj-script-btn { border-left:1px solid var(--qmdj-border2); } .qmdj-script-btn.active { background:#1e3a5f; color:#fff; font-weight:600; } /* ── Formulaire ── */ .qmdj-form { padding:1rem 1.25rem; display:flex; flex-direction:column; gap:.85rem; border-bottom:1px solid var(--qmdj-border); } .qmdj-form-row--2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; } .qmdj-form-row--3 { display:grid; grid-template-columns:1fr 1fr 1.5fr; gap:1rem; } .qmdj-field { display:flex; flex-direction:column; gap:.3rem; } .qmdj-label { font-size:.68rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--qmdj-text3); } .qmdj-input { font-family:var(--qmdj-font-ui); font-size:.85rem; color:var(--qmdj-text); background:var(--qmdj-bg); border:1px solid var(--qmdj-border2); border-radius:var(--qmdj-radius); padding:.4rem .65rem; outline:none; width:100%; box-sizing:border-box; transition:border-color .15s; } .qmdj-input:focus { border-color:#1e3a5f; box-shadow:0 0 0 3px var(--qmdj-accent-l); } .qmdj-seg { display:inline-flex; border:1px solid var(--qmdj-border2); border-radius:var(--qmdj-radius); overflow:hidden; width:100%; } .qmdj-seg-btn { flex:1; display:flex; flex-direction:column; align-items:center; gap:.08rem; padding:.4rem .3rem; background:var(--qmdj-bg); border:none; border-right:1px solid var(--qmdj-border2); cursor:pointer; transition:background .15s; text-align:center; line-height:1.2; } .qmdj-seg-btn:last-child { border-right:none; } .qmdj-seg-btn.active { background:#1e3a5f; } .qmdj-seg-btn.active .qmdj-seg-main,.qmdj-seg-btn.active .qmdj-seg-sub { color:#fff; } .qmdj-seg-btn.active .qmdj-seg-sub { opacity:.75; } .qmdj-seg-btn:not(.active):hover { background:var(--qmdj-bg3); } .qmdj-seg-main { font-size:.78rem; font-weight:600; color:var(--qmdj-text); } .qmdj-seg-sub { font-size:.62rem; color:var(--qmdj-text3); } /* ── Géocodage ── */ .qmdj-geocode-wrap { position:relative; } .qmdj-spinner { position:absolute; right:.6rem; top:50%; transform:translateY(-50%); color:#1e3a5f; animation:qmdj-spin .7s linear infinite; } @keyframes qmdj-spin{to{transform:translateY(-50%) rotate(360deg);}} .qmdj-suggestions { position:absolute; top:calc(100% + 3px); left:0; right:0; z-index:9999; background:#fff; border:1px solid var(--qmdj-border2); border-radius:var(--qmdj-radius); box-shadow:0 4px 16px rgba(0,0,0,.1); list-style:none; margin:0; padding:0; max-height:200px; overflow-y:auto; } .qmdj-suggestions li { padding:.4rem .7rem; cursor:pointer; border-bottom:1px solid var(--qmdj-border); display:flex; flex-direction:column; gap:.1rem; font-size:.8rem; transition:background .1s; } .qmdj-suggestions li:hover { background:var(--qmdj-accent-l); } .qmdj-sugg-name { font-weight:600; } .qmdj-sugg-detail { font-size:.7rem; color:var(--qmdj-text2); } .qmdj-sugg-coords { font-size:.65rem; color:var(--qmdj-text3); font-family:var(--qmdj-font-mono); } .qmdj-selected-city { display:flex; align-items:center; justify-content:space-between; padding:.3rem .6rem; background:var(--qmdj-accent-l); border:1px solid #b0c0d4; border-radius:var(--qmdj-radius); font-size:.8rem; font-weight:500; margin-top:.3rem; } .qmdj-clear-city { background:none; border:none; cursor:pointer; color:var(--qmdj-text3); } .qmdj-clear-city:hover { color:var(--qmdj-red); } .qmdj-coords { display:flex; gap:.6rem; margin-top:.35rem; align-items:center; font-size:.75rem; flex-wrap:wrap; } .qmdj-coords em { font-style:normal; font-weight:600; font-family:var(--qmdj-font-mono); color:var(--qmdj-text3); text-transform:uppercase; margin-right:.2rem; font-size:.65rem; } .qmdj-coord-input { width:80px; font-family:var(--qmdj-font-mono); font-size:.72rem; padding:.2rem .3rem; border:1px solid var(--qmdj-border2); border-radius:var(--qmdj-radius); background:var(--qmdj-bg); } .qmdj-tz-display { font-family:var(--qmdj-font-mono); font-size:.7rem; color:#1e3a5f; font-weight:500; } /* ── Bouton calc ── */ .qmdj-btn-calc { align-self:flex-start; padding:.5rem 1.4rem; background:#1e3a5f; color:#fff; border:none; border-radius:var(--qmdj-radius); font-family:var(--qmdj-font-ui); font-size:.85rem; font-weight:600; cursor:pointer; transition:opacity .15s,transform .1s; } .qmdj-btn-calc:hover { opacity:.88; } .qmdj-btn-calc:active { transform:translateY(1px); } .qmdj-btn-calc:disabled { opacity:.5; cursor:wait; } /* ── Sections ── */ .qmdj-section { border-bottom:1px solid var(--qmdj-border); } .qmdj-section:last-child { border-bottom:none; } .qmdj-section-head { display:flex; align-items:center; gap:.6rem; padding:.55rem 1.25rem; background:var(--qmdj-bg2); border-bottom:1px solid var(--qmdj-border); } .qmdj-section-head.qmdj-collapsible { cursor:pointer; user-select:none; } .qmdj-section-head.qmdj-collapsible:hover { background:var(--qmdj-bg3); } .qmdj-section-zh { font-family:var(--qmdj-font-zh); font-size:.95rem; font-weight:700; color:#1e3a5f; } .qmdj-section-label { font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--qmdj-text2); flex:1; } .qmdj-toggle-icon { font-size:.72rem; color:var(--qmdj-text3); transition:transform .25s; } .qmdj-section-head.collapsed .qmdj-toggle-icon { transform:rotate(-90deg); } /* ── En-tête de carte ── */ .qmdj-chart-header { padding:.75rem 1.25rem; background:var(--qmdj-bg2); border-bottom:1px solid var(--qmdj-border); } .qmdj-chart-meta { display:flex; flex-wrap:wrap; gap:1rem; font-size:.82rem; } .qmdj-meta-item { display:flex; flex-direction:column; gap:.1rem; } .qmdj-meta-label { font-size:.62rem; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--qmdj-text3); } .qmdj-meta-value { font-weight:600; color:var(--qmdj-text); } /* ══════════════════════════════════════════════════════ GRILLE 9 PALAIS ══════════════════════════════════════════════════════ */ .qmdj-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--qmdj-border); padding:1px; } .qmdj-palace { padding:var(--qmdj-palace-pad,.45rem .55rem); display:flex; flex-direction:column; cursor:pointer; transition:box-shadow .12s; overflow:hidden; aspect-ratio:var(--qmdj-palace-ratio); box-sizing:border-box; /* Scaling responsive : base ~14px à 1000px, ~10px à 600px */ font-size:clamp(9px, 1.35vw, 14px); } .qmdj-palace:hover { box-shadow:inset 0 0 0 2px #1e3a5f; z-index:1; } .qmdj-palace.p-active { box-shadow:inset 0 0 0 2px #1e3a5f; } .qmdj-palace-inner { display:flex; flex-direction:column; height:100%; gap:.05rem; min-width:0; } /* ── Bloc haut : tronc céleste (g) | divinité (d) ── */ .qmdj-row-top { display:flex; justify-content:space-between; flex-shrink:0; gap:.2rem; } /* ── Bloc milieu : tronc terrestre (g) | étoile (d) ── */ .qmdj-row-mid { display:flex; justify-content:space-between; flex-shrink:0; gap:.2rem; } /* Bloc tronc (gauche) */ .qmdj-tronc-block { display:flex; flex-direction:column; align-items:flex-start; min-width:0; flex:1; } .qmdj-tronc-py { font-size:var(--qmdj-py-size,.6em); color:var(--qmdj-text3); font-family:var(--qmdj-font-mono); white-space:nowrap; line-height:1.1; } .qmdj-tronc-zh { font-family:var(--qmdj-font-zh); font-size:var(--qmdj-tronc-size,1.65em); font-weight:700; line-height:1; } .qmdj-tronc-elem { font-size:var(--qmdj-small-size,.55em); color:var(--qmdj-text3); white-space:nowrap; line-height:1.1; } /* .qmdj-jia-cache défini plus bas */ /* Bloc divinité (droite haut) */ .qmdj-god-block { display:flex; flex-direction:column; align-items:flex-end; min-width:0; flex-shrink:0; } .qmdj-god-header { display:flex; align-items:center; gap:.2rem; justify-content:flex-end; } .qmdj-god-num { font-size:.58rem; font-weight:700; color:#fff; padding:.07rem .22rem; border-radius:50%; min-width:1.1rem; text-align:center; line-height:1.5; } .qmdj-god-py { font-size:var(--qmdj-py-size,.6em); color:var(--qmdj-text3); white-space:nowrap; font-family:var(--qmdj-font-mono); } .qmdj-god-zh { font-family:var(--qmdj-font-zh); font-size:var(--qmdj-god-size,1.6em); font-weight:700; color:var(--qmdj-gold); line-height:1; text-align:right; } .qmdj-god-fr { font-size:var(--qmdj-small-size,.58em); color:var(--qmdj-text3); font-style:italic; white-space:nowrap; text-align:right; line-height:1.3; } /* Bloc étoile (droite milieu) */ .qmdj-star-block { display:flex; flex-direction:column; align-items:flex-end; min-width:0; flex-shrink:0; } .qmdj-star-header { display:flex; align-items:center; gap:.2rem; justify-content:flex-end; } .qmdj-star-num { font-size:.55rem; color:var(--qmdj-text3); } .qmdj-star-py { font-size:var(--qmdj-py-size,.55em); color:var(--qmdj-text3); white-space:nowrap; font-family:var(--qmdj-font-mono); } .qmdj-star-zh { font-family:var(--qmdj-font-zh); font-size:var(--qmdj-god-size,1.6em); font-weight:700; color:#1e3a5f; line-height:1; text-align:right; } .qmdj-star-fr { font-size:var(--qmdj-small-size,.58em); color:var(--qmdj-text3); font-style:italic; white-space:nowrap; text-align:right; line-height:1.3; } /* ── Bloc bas : trigramme (g) | porte+kè yìng (d) ── */ .qmdj-row-bot { display:flex; justify-content:space-between; align-items:flex-end; flex-shrink:0; gap:.3rem; } .qmdj-tri-block { display:flex; flex-direction:column; align-items:flex-start; gap:.05rem; } .qmdj-tri-num { font-size:var(--qmdj-small-size,.52em); color:var(--qmdj-text3); font-family:var(--qmdj-font-mono); } .qmdj-tri-dir { font-size:var(--qmdj-small-size,.5em); color:var(--qmdj-text3); white-space:nowrap; font-family:var(--qmdj-font-mono); } .qmdj-tri-block svg { display:block; } .qmdj-right-bot { display:flex; flex-direction:column; align-items:flex-end; gap:.15rem; } .qmdj-ke-ying { font-size:var(--qmdj-small-size,.52em); padding:.06rem .25rem; border-radius:2px; white-space:nowrap; text-align:right; max-width:100%; overflow:hidden; text-overflow:ellipsis; } .qmdj-ke-ying.san_qi { background:#e8f5e9; color:#1b5e20; font-weight:600; } .qmdj-ke-ying.good { background:#e8f4ff; color:#1565c0; } .qmdj-ke-ying.bad { background:#fff0f0; color:#c62828; } .qmdj-ke-ying.neutral{ background:#f3f4f5; color:var(--qmdj-text3); } .qmdj-door-row { display:flex; align-items:center; gap:.2rem; } .qmdj-door { display:inline-flex; flex-direction:column; align-items:center; padding:.1rem .4rem; border:1.5px solid var(--qmdj-border2); border-radius:var(--qmdj-radius); } .qmdj-door-zh { font-family:var(--qmdj-font-zh); font-size:var(--qmdj-door-size,.95em); font-weight:700; line-height:1.1; } .qmdj-door-py { font-size:.48rem; color:var(--qmdj-text3); white-space:nowrap; } .qmdj-door.qi-ji { border-color:#2f9e44; background:#f0fdf4; } .qmdj-door.qi-ji .qmdj-door-zh { color:#2f9e44; } .qmdj-door.qi-xiong { border-color:#c92a2a; background:#fff5f5; } .qmdj-door.qi-xiong .qmdj-door-zh { color:#c92a2a; } .qmdj-qi-badge { font-size:.75rem; font-weight:700; } .qmdj-qi-badge.qi-ji { color:#2f9e44; } .qmdj-qi-badge.qi-xiong { color:#c92a2a; } .qmdj-cs-badge { font-size:.54em; color:var(--qmdj-text2); font-style:italic; font-weight:500; } .qmdj-kw-badge { font-size:.46rem; font-weight:700; padding:.03rem .18rem; border-radius:2px; background:#f3e5f5; color:#6a1b9a; white-space:nowrap; } .qmdj-kw-badge.kw-day { background:#ede7f6; color:#4527a0; } /* ── Pied ── */ .qmdj-row-foot { display:flex; justify-content:space-between; align-items:flex-end; flex-shrink:0; margin-top:.2rem; padding-top:.05rem; } .qmdj-foot-left { display:flex; flex-direction:column; gap:.05rem; } .qmdj-branch { font-size:var(--qmdj-small-size,.52em); color:var(--qmdj-text3); font-family:var(--qmdj-font-mono); white-space:nowrap; } .qmdj-cs-badge { font-size:var(--qmdj-small-size,.52em); color:var(--qmdj-text2); font-style:italic; font-weight:500; } .qmdj-yima { font-size:var(--qmdj-yima-size,.8rem); line-height:1; } .qmdj-palace-num { font-size:1.4em; font-weight:700; color:var(--qmdj-border); font-family:var(--qmdj-font-mono); line-height:1; opacity:.45; } /* Alertes (dans la modal uniquement) */ .qmdj-alerts { display:none; } .qmdj-alert { font-size:.46rem; font-weight:700; padding:.04rem .2rem; border-radius:2px; white-space:nowrap; } .alert-punition { background:#fce4ec; color:#b71c1c; } .alert-kw { background:#f3e5f5; color:#6a1b9a; } .alert-kw-day { background:#ede7f6; color:#4527a0; } .alert-yima { background:#fff8e1; color:#f57f17; } .alert-force { background:#fff3e0; color:#e65100; } .alert-choc { background:#e3f2fd; color:#1565c0; } .alert-zhi-fu { background:#1e3a5f; color:#fff; } /* Palais 5 — note TianQin */ .qmdj-p5-note { font-size:.54rem; font-weight:600; color:#b45309; background:#fef3e2; border:1px solid #f4c77a; border-radius:2px; padding:.1rem .35rem; text-align:center; flex-shrink:0; margin-bottom:.1rem; } /* Note TianQin sur le palais cible */ .qmdj-tianqin-note { display:inline-block; font-size:.55rem; font-weight:600; color:#b45309; background:#fef3e2; border:1px solid #f4c77a; border-radius:2px; padding:.05rem .25rem; white-space:nowrap; margin-top:.1rem; } /* TianQin mini à gauche de l'étoile */ .qmdj-star-zh-row { display:flex; align-items:flex-end; gap:.2rem; justify-content:flex-end; } .qmdj-tianqin-mini { font-family:var(--qmdj-font-zh); font-size:.7rem; font-weight:700; color:#b45309; background:#fef3e2; border:1px solid #f4c77a; border-radius:2px; padding:.05rem .2rem; white-space:nowrap; align-self:flex-end; margin-bottom:.1rem; } /* Jia caché — dans la ligne py du tronc terrestre */ .qmdj-jia-cache { font-family:var(--qmdj-font-zh); font-size:.68rem; font-weight:800; color:#1e3a5f; background:rgba(30,58,95,.1); border-radius:2px; padding:0 .15rem; display:inline; vertical-align:middle; } /* Wu Xing */ .elem-bois { color:#2f9e44; } .elem-feu { color:#e03131; } .elem-terre { color:#d4a017; } .elem-metal { color:#495057; } .elem-eau { color:#1971c2; } /* ══════════════════════════════════════════════════════ MODAL — variables autonomes depuis :root (modal injectée dans , hors .qmdj-widget) ══════════════════════════════════════════════════════ */ .qmdj-modal-overlay { position:fixed; inset:0; z-index:99999; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; padding:1rem; animation:qmdj-fadein .2s ease; font-family:var(--qmdj-modal-font-ui); font-size:14px; color:var(--qmdj-modal-text); } .qmdj-modal { background:var(--qmdj-modal-bg); border:1px solid var(--qmdj-modal-border); border-radius:4px; box-shadow:0 8px 40px rgba(0,0,0,.25); max-width:680px; width:100%; max-height:90vh; overflow-y:auto; display:flex; flex-direction:column; } .qmdj-modal-head { display:flex; align-items:center; justify-content:space-between; padding:.75rem 1.25rem; background:var(--qmdj-modal-bg2); border-bottom:1px solid var(--qmdj-modal-border); position:sticky; top:0; z-index:1; } .qmdj-modal-title { display:flex; align-items:baseline; gap:.6rem; } .qmdj-modal-title-zh { font-family:var(--qmdj-modal-font-zh); font-size:1.3rem; font-weight:700; color:var(--qmdj-modal-accent); } .qmdj-modal-title-fr { font-size:.8rem; color:var(--qmdj-modal-text2); font-weight:500; } .qmdj-modal-close { background:none; border:none; cursor:pointer; font-size:1.2rem; color:var(--qmdj-modal-text3); padding:.2rem .4rem; border-radius:2px; line-height:1; } .qmdj-modal-close:hover{ background:var(--qmdj-modal-bg3); color:var(--qmdj-modal-red); } .qmdj-modal-body { padding:1rem 1.25rem; display:flex; flex-direction:column; gap:1rem; background:var(--qmdj-modal-bg); } .qmdj-modal-main { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; } .qmdj-modal-elem { border:1px solid var(--qmdj-modal-border); border-radius:var(--qmdj-modal-radius); overflow:hidden; background:var(--qmdj-modal-bg); } .qmdj-modal-elem-head { padding:.3rem .65rem; background:var(--qmdj-modal-bg3); font-size:.62rem; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--qmdj-modal-text3); border-bottom:1px solid var(--qmdj-modal-border); } .qmdj-modal-elem-body { padding:.5rem .65rem; display:flex; flex-direction:column; gap:.2rem; background:var(--qmdj-modal-bg); } .qmdj-modal-zh { font-family:var(--qmdj-modal-font-zh); font-size:1.6rem; font-weight:700; color:var(--qmdj-modal-accent); line-height:1; } .qmdj-modal-py { font-family:var(--qmdj-modal-font-mono); font-size:.78rem; color:var(--qmdj-modal-text2); } .qmdj-modal-fr { font-size:.78rem; color:var(--qmdj-modal-text3); font-style:italic; } .qmdj-modal-elem-info { font-size:.75rem; color:var(--qmdj-modal-text2); padding-top:.25rem; border-top:1px dashed var(--qmdj-modal-border); } .qmdj-modal-stems { display:flex; gap:1.5rem; align-items:center; border:1px solid var(--qmdj-modal-border); border-radius:var(--qmdj-modal-radius); padding:.65rem 1rem; background:var(--qmdj-modal-bg); } .qmdj-modal-stem-block{ display:flex; flex-direction:column; gap:.15rem; align-items:center; } .qmdj-modal-stem-label{ font-size:.62rem; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--qmdj-modal-text3); } .qmdj-modal-stem-zh { font-family:var(--qmdj-modal-font-zh); font-size:2.2rem; font-weight:700; line-height:1; } .qmdj-modal-stem-py { font-family:var(--qmdj-modal-font-mono); font-size:.72rem; color:var(--qmdj-modal-text2); } .qmdj-modal-stem-info { font-size:.72rem; color:var(--qmdj-modal-text3); } .qmdj-modal-stem-sep { font-size:1.5rem; color:var(--qmdj-modal-border2); font-weight:300; align-self:center; } .qmdj-modal-keying { border:1px solid var(--qmdj-modal-border); border-radius:var(--qmdj-modal-radius); overflow:hidden; } .qmdj-modal-keying-head { padding:.3rem .65rem; font-size:.62rem; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--qmdj-modal-text3); background:var(--qmdj-modal-bg3); border-bottom:1px solid var(--qmdj-modal-border); } .qmdj-modal-keying-body { padding:.6rem .65rem; background:var(--qmdj-modal-bg); } .qmdj-modal-keying-sub { font-size:.7rem; color:var(--qmdj-modal-text3); margin-bottom:.3rem; font-family:var(--qmdj-modal-font-mono); } .qmdj-modal-keying-name { font-size:.9rem; font-weight:700; color:var(--qmdj-modal-text); margin-bottom:.2rem; } .qmdj-modal-keying-text { font-size:.8rem; color:var(--qmdj-modal-text2); font-style:italic; } .qmdj-modal-keying-body.san_qi { background:#e8f5e9; } .qmdj-modal-keying-body.san_qi .qmdj-modal-keying-name { color:#1b5e20; } .qmdj-modal-keying-body.bad { background:#fff5f5; } .qmdj-modal-keying-body.bad .qmdj-modal-keying-name { color:#c62828; } .qmdj-modal-keying-body.good { background:#f0f9ff; } .qmdj-modal-keying-body.good .qmdj-modal-keying-name { color:#1565c0; } .qmdj-modal-wuxing { display:flex; flex-direction:column; gap:.35rem; } .qmdj-modal-wx-row { display:flex; justify-content:space-between; align-items:center; font-size:.78rem; padding:.25rem .5rem; border-radius:2px; } .qmdj-modal-wx-label { color:var(--qmdj-modal-text3); font-size:.7rem; } .qmdj-modal-wx-val { font-weight:600; } .wx-sheng { background:#f0fdf4; } .wx-sheng .qmdj-modal-wx-val { color:#2f9e44; } .wx-ke { background:#fff5f5; } .wx-ke .qmdj-modal-wx-val { color:#c92a2a; } .wx-xie { background:#fef9ec; } .wx-xie .qmdj-modal-wx-val { color:#b45309; } .wx-shouke { background:#fff0f5; } .wx-shouke .qmdj-modal-wx-val { color:#9c27b0; } .wx-equal { background:#f8f9fa; } .wx-equal .qmdj-modal-wx-val { color:#495057; } .qmdj-modal-alerts { display:flex; flex-wrap:wrap; gap:.35rem; } .qmdj-modal-alert-item { display:flex; flex-direction:column; gap:.1rem; padding:.4rem .65rem; border-radius:var(--qmdj-modal-radius); border:1px solid; background:var(--qmdj-modal-bg); } .qmdj-modal-alert-item.alert-punition { background:#fce4ec; border-color:#f48fb1; } .qmdj-modal-alert-item.alert-kw { background:#f3e5f5; border-color:#ce93d8; } .qmdj-modal-alert-item.alert-force { background:#fff3e0; border-color:#ffcc02; } .qmdj-modal-alert-item.alert-choc { background:#e3f2fd; border-color:#90caf9; } .qmdj-modal-alert-item.alert-zhi-fu { background:#e8edf3; border-color:#1e3a5f; } .qmdj-modal-alert-name { font-size:.72rem; font-weight:700; color:var(--qmdj-modal-text); } .qmdj-modal-alert-desc { font-size:.68rem; font-style:italic; color:var(--qmdj-modal-text2); } .qmdj-modal-cs { font-size:.8rem; color:var(--qmdj-modal-text2); padding:.4rem .65rem; background:var(--qmdj-modal-bg2); border:1px solid var(--qmdj-modal-border); border-radius:var(--qmdj-modal-radius); } /* ── Sidebar ── */ .qmdj-sidebar-inner { overflow:hidden; transition:max-height .35s ease,opacity .25s; max-height:2000px; opacity:1; } .qmdj-sidebar-inner.collapsed { max-height:0; opacity:0; } .qmdj-sidebar-content { padding:.75rem 1.25rem; display:grid; grid-template-columns:1fr 1fr; gap:1rem; } .qmdj-sidebar-block { border:1px solid var(--qmdj-border); border-radius:var(--qmdj-radius); overflow:hidden; } .qmdj-sidebar-block-head { padding:.35rem .65rem; background:var(--qmdj-bg3); font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--qmdj-text2); border-bottom:1px solid var(--qmdj-border); display:flex; gap:.4rem; align-items:center; } .qmdj-sidebar-block-head .qmdj-zh { font-family:var(--qmdj-font-zh); font-size:.9rem; color:#1e3a5f; } .qmdj-sidebar-block-body { padding:.45rem .65rem; font-size:.78rem; display:flex; flex-direction:column; gap:.3rem; } .qmdj-sidebar-row { display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px dashed var(--qmdj-border); padding:.2rem 0; } .qmdj-sidebar-row:last-child { border-bottom:none; } .qmdj-sidebar-key { color:var(--qmdj-text3); font-size:.72rem; } .qmdj-sidebar-val { font-weight:600; color:var(--qmdj-text); } .qmdj-sidebar-zh { font-family:var(--qmdj-font-zh); color:#1e3a5f; font-size:1rem; } /* ── Erreur ── */ .qmdj-error { margin:.65rem 1.25rem; padding:.5rem .8rem; background:#fff5f5; border:1px solid #ffc9c9; border-radius:var(--qmdj-radius); color:var(--qmdj-red); font-size:.78rem; } /* ── Responsive scaling ────────────────────────────────────────────────────── */ @media (max-width: 700px) { .qmdj-palace { font-size: clamp(7px, 2.8vw, 10px); padding: .25rem .3rem; } } @media (min-width: 1200px) { .qmdj-palace { font-size: 14px; /* plafond explicite pour grands écrans */ } } /* ── Animations ── */ @keyframes qmdj-fadein{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}} .qmdj-results { animation:qmdj-fadein .3s ease; } .qmdj-palace { animation:qmdj-fadein .4s ease backwards; } .qmdj-palace:nth-child(1){animation-delay:.00s} .qmdj-palace:nth-child(2){animation-delay:.05s} .qmdj-palace:nth-child(3){animation-delay:.10s} .qmdj-palace:nth-child(4){animation-delay:.15s} .qmdj-palace:nth-child(5){animation-delay:.20s} .qmdj-palace:nth-child(6){animation-delay:.25s} .qmdj-palace:nth-child(7){animation-delay:.30s} .qmdj-palace:nth-child(8){animation-delay:.35s} .qmdj-palace:nth-child(9){animation-delay:.40s} /* ── Responsive ── */ @media(max-width:680px){ .qmdj-form-row--2,.qmdj-form-row--3{grid-template-columns:1fr;} .qmdj-sidebar-content{grid-template-columns:1fr;} .qmdj-tian-stem{font-size:1.4rem;} .qmdj-earth-stem{font-size:1.1rem;} .qmdj-modal-main{grid-template-columns:1fr;} } /* ── Badges Jia (Structure / Action / Fu Yin) ─────────────────────────── */ .qmdj-jia-badges { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; } .qmdj-badge-zhifu, .qmdj-badge-action, .qmdj-badge-fuyin { display: inline-block; font-size: .68em; padding: 1px 5px; border-radius: 3px; cursor: default; white-space: nowrap; line-height: 1.5; } /* 👑 Jia de Structure */ .qmdj-badge-zhifu { background: #fff3cd; color: #856404; border: 1px solid #ffc107; } /* 🎯 Jia d'Action */ .qmdj-badge-action { background: #d1e7dd; color: #0a3622; border: 1px solid #198754; } /* 伏吟 Fu Yin — les deux au même palais */ .qmdj-badge-fuyin { background: #f8d7da; color: #58151c; border: 1px solid #dc3545; font-weight: bold; } /* ── Strip BaZi 四柱 ─────────────────────────────────────────────────────── */ .qmdj-bazi-strip { background: #fff; border: 1px solid var(--qmdj-border, #d0d7de); border-radius: var(--qmdj-radius, 2px); margin: 0 0 10px; padding: 10px 16px; } .qmdj-bz-inner { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .qmdj-bz-pillar { display: flex; flex-direction: column; align-items: center; min-width: 52px; } .qmdj-bz-label { font-size: .65rem; color: var(--qmdj-text-light, #6c757d); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; } .qmdj-bz-gz { font-size: 1.25rem; letter-spacing: .06em; font-family: var(--qmdj-font-zh, 'Noto Serif SC', serif); font-weight: 600; } .qmdj-bz-py { font-size: .63rem; color: var(--qmdj-text-light, #6c757d); } .qmdj-bz-elem { font-size: .62rem; color: var(--qmdj-text-light, #6c757d); } .qmdj-bz-sep { color: var(--qmdj-border, #ccc); font-size: 1.1rem; align-self: center; padding: 0 2px; } .qmdj-bz-kw { margin-left: auto; font-size: .7rem; color: var(--qmdj-text-light, #6c757d); border: 1px dashed var(--qmdj-border, #ccc); border-radius: 3px; padding: 2px 7px; } /* Couleurs éléments dans BaZi */ .bz-bois { color: #2f9e44; } .bz-feu { color: #e03131; } .bz-terre { color: #b45309; } .bz-metal { color: #495057; } .bz-eau { color: #1971c2; } /* Taille variable des badges depuis admin */ .qmdj-jia-badge { font-size: var(--qmdj-badge-size, 0.7em); }