/* WP WànNiánLì Claude v2 — Thème light technique
   Variables de fallback — surchargées par le shortcode via #id  */

@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 de fallback ── */
.wnlc-widget {
  --wnlc-accent:      #2563eb;
  --wnlc-accent-light:color-mix(in srgb, var(--wnlc-accent) 12%, #fff);
  --wnlc-accent-mid:  color-mix(in srgb, var(--wnlc-accent) 25%, #fff);
  --wnlc-bg:          #ffffff;
  --wnlc-bg-2:        #f8f9fa;
  --wnlc-bg-3:        #f1f3f5;
  --wnlc-border:      #dee2e6;
  --wnlc-border-2:    #ced4da;
  --wnlc-text:        #212529;
  --wnlc-text-2:      #495057;
  --wnlc-text-3:      #868e96;
  --wnlc-red:         #c92a2a;
  --wnlc-green:       #2f9e44;
  --wnlc-font-ui:     'IBM Plex Sans', system-ui, sans-serif;
  --wnlc-font-mono:   'IBM Plex Mono', monospace;
  --wnlc-font-zh:     'Noto Serif SC', serif;
  --wnlc-pillar-size: 3rem;
  --wnlc-max-width:   900px;
  --wnlc-radius:      2px;
  --wnlc-shadow:      none;
}

/* ── Conteneur ── */
.wnlc-widget {
  font-family: var(--wnlc-font-ui);
  font-size: 14px;
  color: var(--wnlc-text);
  background: var(--wnlc-bg);
  max-width: var(--wnlc-max-width);
  margin: 1.5rem auto;
  border: 1px solid var(--wnlc-border);
  border-radius: var(--wnlc-radius);
  box-shadow: var(--wnlc-shadow);
  overflow: visible;
}

/* ── En-tête ── */
.wnlc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  background: var(--wnlc-bg-2);
  border-bottom: 1px solid var(--wnlc-border);
}

.wnlc-header-left {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.wnlc-title-zh {
  font-family: var(--wnlc-font-zh);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--wnlc-accent);
  letter-spacing: 0.05em;
}

.wnlc-title-sep { color: var(--wnlc-text-3); font-size: 0.8rem; }

.wnlc-title-fr {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--wnlc-text-2);
  letter-spacing: 0.03em;
}

/* ── Toggle simplifié / traditionnel ── */
.wnlc-script-toggle {
  display: flex;
  border: 1px solid var(--wnlc-border-2);
  border-radius: var(--wnlc-radius);
  overflow: hidden;
}

.wnlc-script-btn {
  padding: 0.25rem 0.65rem;
  font-family: var(--wnlc-font-zh);
  font-size: 0.9rem;
  background: var(--wnlc-bg);
  border: none;
  cursor: pointer;
  color: var(--wnlc-text-2);
  transition: background 0.15s, color 0.15s;
  line-height: 1.4;
}

.wnlc-script-btn + .wnlc-script-btn {
  border-left: 1px solid var(--wnlc-border-2);
}

.wnlc-script-btn.active {
  background: var(--wnlc-accent);
  color: #fff;
  font-weight: 600;
}

.wnlc-script-btn:not(.active):hover {
  background: var(--wnlc-bg-3);
  color: var(--wnlc-text);
}

/* ── Formulaire ── */
.wnlc-form {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-bottom: 1px solid var(--wnlc-border);
}

.wnlc-form-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.wnlc-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wnlc-text-3);
}

.wnlc-input {
  font-family: var(--wnlc-font-ui);
  font-size: 0.875rem;
  color: var(--wnlc-text);
  background: var(--wnlc-bg);
  border: 1px solid var(--wnlc-border-2);
  border-radius: var(--wnlc-radius);
  padding: 0.45rem 0.7rem;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
  box-sizing: border-box;
}

.wnlc-input:focus {
  border-color: var(--wnlc-accent);
  box-shadow: 0 0 0 3px var(--wnlc-accent-light);
}

/* ── Barre de segmentation ── */
.wnlc-seg {
  display: inline-flex;
  border: 1px solid var(--wnlc-border-2);
  border-radius: var(--wnlc-radius);
  overflow: hidden;
  width: 100%;
}

.wnlc-seg-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.5rem 0.5rem;
  background: var(--wnlc-bg);
  border: none;
  border-right: 1px solid var(--wnlc-border-2);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  text-align: center;
  line-height: 1.2;
}

.wnlc-seg-btn:last-child { border-right: none; }

.wnlc-seg-btn.active {
  background: var(--wnlc-accent);
}

.wnlc-seg-btn.active .wnlc-seg-main { color: #fff; }
.wnlc-seg-btn.active .wnlc-seg-sub  { color: rgba(255,255,255,0.75); }

.wnlc-seg-btn:not(.active):hover { background: var(--wnlc-bg-3); }

.wnlc-seg-main {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--wnlc-text);
}

.wnlc-seg-sub {
  font-size: 0.65rem;
  color: var(--wnlc-text-3);
}

/* ── Géocodage ── */
.wnlc-geocode-wrap { position: relative; }

.wnlc-search-bar {
  position: relative;
  display: flex;
  align-items: center;
}

.wnlc-search-icon {
  position: absolute;
  left: 0.6rem;
  color: var(--wnlc-text-3);
  font-size: 1rem;
  pointer-events: none;
  z-index: 1;
}

.wnlc-city-search { padding-left: 2rem !important; }

.wnlc-geocode-spinner {
  position: absolute;
  right: 0.6rem;
  color: var(--wnlc-accent);
  font-size: 0.9rem;
  animation: wnlc-spin 0.7s linear infinite;
}

@keyframes wnlc-spin { to { transform: rotate(360deg); } }

/* Suggestions */
.wnlc-suggestions {
  position: absolute;
  top: calc(100% + 3px);
  left: 0; right: 0;
  z-index: 9999;
  background: var(--wnlc-bg);
  border: 1px solid var(--wnlc-border-2);
  border-radius: var(--wnlc-radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  list-style: none;
  margin: 0; padding: 0;
  max-height: 240px;
  overflow-y: auto;
}

.wnlc-suggestions li {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  border-bottom: 1px solid var(--wnlc-border);
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  transition: background 0.1s;
}

.wnlc-suggestions li:last-child { border-bottom: none; }
.wnlc-suggestions li:hover,
.wnlc-suggestions li.active { background: var(--wnlc-accent-light); }

.wnlc-sugg-name   { font-size: 0.85rem; font-weight: 600; color: var(--wnlc-text); }
.wnlc-sugg-detail { font-size: 0.75rem; color: var(--wnlc-text-2); }
.wnlc-sugg-coords { font-size: 0.7rem; color: var(--wnlc-text-3); font-family: var(--wnlc-font-mono); }

/* Ville sélectionnée */
.wnlc-selected-city {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.7rem;
  background: var(--wnlc-accent-light);
  border: 1px solid color-mix(in srgb, var(--wnlc-accent) 30%, transparent);
  border-radius: var(--wnlc-radius);
  font-size: 0.85rem;
  font-weight: 500;
  margin-top: 0.35rem;
}

.wnlc-clear-city {
  background: none; border: none; cursor: pointer;
  color: var(--wnlc-text-3); font-size: 0.8rem; padding: 0 0.2rem;
  transition: color 0.15s;
}
.wnlc-clear-city:hover { color: var(--wnlc-red); }

/* Coordonnées */
.wnlc-coords-row {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.4rem;
  flex-wrap: wrap;
}

.wnlc-coord-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
}

.wnlc-coord-item em {
  font-style: normal;
  font-weight: 600;
  font-family: var(--wnlc-font-mono);
  font-size: 0.7rem;
  color: var(--wnlc-text-3);
  text-transform: uppercase;
}

.wnlc-coord-input {
  width: 90px;
  font-family: var(--wnlc-font-mono);
  font-size: 0.78rem;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--wnlc-border-2);
  border-radius: var(--wnlc-radius);
  background: var(--wnlc-bg);
  color: var(--wnlc-text);
  outline: none;
}

.wnlc-coord-input:focus {
  border-color: var(--wnlc-accent);
  box-shadow: 0 0 0 2px var(--wnlc-accent-light);
}

.wnlc-coord-tz { gap: 0.4rem; }

.wnlc-tz-display {
  font-family: var(--wnlc-font-mono);
  font-size: 0.75rem;
  color: var(--wnlc-accent);
  font-weight: 500;
}

/* Détail corrections */
.wnlc-time-detail {
  background: var(--wnlc-bg-2);
  border: 1px solid var(--wnlc-border);
  border-radius: var(--wnlc-radius);
  padding: 0.6rem 0.75rem;
}

.wnlc-detail-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 1rem;
  font-size: 0.78rem;
  font-family: var(--wnlc-font-mono);
}

.wnlc-detail-grid span { color: var(--wnlc-text-3); }
.wnlc-detail-grid strong { color: var(--wnlc-text); font-weight: 500; }
.wnlc-accent { color: var(--wnlc-accent) !important; font-weight: 600 !important; }

/* ── Bouton calculer ── */
.wnlc-btn-calc {
  align-self: flex-start;
  padding: 0.55rem 1.5rem;
  background: var(--wnlc-accent);
  color: #fff;
  border: none;
  border-radius: var(--wnlc-radius);
  font-family: var(--wnlc-font-ui);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}

.wnlc-btn-calc:hover   { opacity: 0.88; }
.wnlc-btn-calc:active  { transform: translateY(1px); }
.wnlc-btn-calc:disabled{ opacity: 0.5; cursor: wait; }

/* ── Résultats ── */
.wnlc-section {
  border-bottom: 1px solid var(--wnlc-border);
}

.wnlc-section:last-child { border-bottom: none; }

.wnlc-section-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.25rem;
  background: var(--wnlc-bg-2);
  border-bottom: 1px solid var(--wnlc-border);
}

.wnlc-section-head.wnlc-collapsible { cursor: pointer; user-select: none; }
.wnlc-section-head.wnlc-collapsible:hover { background: var(--wnlc-bg-3); }

.wnlc-section-zh {
  font-family: var(--wnlc-font-zh);
  font-size: 1rem;
  font-weight: 700;
  color: var(--wnlc-accent);
}

.wnlc-section-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wnlc-text-2);
  flex: 1;
}

.wnlc-toggle-icon {
  font-size: 0.75rem;
  color: var(--wnlc-text-3);
  transition: transform 0.25s;
}

.wnlc-section-head.collapsed .wnlc-toggle-icon { transform: rotate(-90deg); }

/* ── Quatre Piliers ── */
.wnlc-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.wnlc-pillar {
  padding: 1rem 0.75rem;
  border-right: 1px solid var(--wnlc-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}

.wnlc-pillar:last-child { border-right: none; }

.wnlc-pillar-role {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wnlc-text-3);
  margin-bottom: 0.4rem;
}

/* Caractères principaux */
.wnlc-pillar-gan,
.wnlc-pillar-zhi {
  font-family: var(--wnlc-font-zh);
  font-size: var(--wnlc-pillar-size);
  font-weight: 700;
  line-height: 1.1;
  color: var(--wnlc-text);
}

/* Couleurs éléments */
.wnlc-wood  { color: #2f9e44; }
.wnlc-fire  { color: #e03131; }
.wnlc-earth { color: #d4a017; }
.wnlc-metal { color: #495057; }
.wnlc-water { color: #1971c2; }

.wnlc-pillar-label {
  font-size: 0.72rem;
  color: var(--wnlc-text-2);
  font-style: italic;
  text-align: center;
  line-height: 1.3;
}

.wnlc-pillar-pinyin {
  font-family: var(--wnlc-font-mono);
  font-size: 0.7rem;
  color: var(--wnlc-text-3);
}

.wnlc-pillar-sub {
  font-size: 0.65rem;
  color: var(--wnlc-text-3);
  text-align: center;
}

/* Troncs cachés */
.wnlc-canggan {
  display: flex;
  gap: 0.3rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--wnlc-border);
  justify-content: center;
  flex-wrap: wrap;
}

.wnlc-cang-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
}

.wnlc-cang-char {
  font-family: var(--wnlc-font-zh);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1;
}

.wnlc-cang-role {
  font-size: 0.55rem;
  color: var(--wnlc-text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Meta ── */
.wnlc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--wnlc-border);
}

.wnlc-meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 1.25rem;
  border-right: 1px solid var(--wnlc-border);
  min-width: 120px;
}

.wnlc-meta-item:last-child { border-right: none; }

.wnlc-meta-highlight {
  background: #fff5f5;
  border-color: #ffc9c9 !important;
  width: 100%;
  border-right: none !important;
  border-bottom: 1px solid #ffc9c9;
}

.wnlc-meta-label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wnlc-text-3);
}

.wnlc-meta-highlight .wnlc-meta-label { color: var(--wnlc-red); }
.wnlc-meta-highlight .wnlc-meta-value { color: var(--wnlc-red); font-weight: 700; }

.wnlc-meta-value {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--wnlc-text);
}

/* ── Jieqi ── */
.wnlc-jieqi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px,1fr));
  gap: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.25s;
  max-height: 800px;
  opacity: 1;
}

.wnlc-jieqi-grid.collapsed { max-height: 0; opacity: 0; }

.wnlc-jieqi-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  border-right: 1px solid var(--wnlc-border);
  border-bottom: 1px solid var(--wnlc-border);
  font-size: 0.78rem;
  transition: background 0.1s;
}

.wnlc-jieqi-item.is-active { background: var(--wnlc-accent-light); }

.wnlc-jieqi-char  { font-family: var(--wnlc-font-zh); font-size: 0.95rem; font-weight: 700; color: var(--wnlc-accent); min-width: 1.8em; }
.wnlc-jieqi-pin   { flex: 1; color: var(--wnlc-text-2); }
.wnlc-jieqi-date  { font-family: var(--wnlc-font-mono); font-size: 0.65rem; color: var(--wnlc-text-3); }
.wnlc-jie-badge   { font-size: 0.6rem; font-weight: 700; padding: 0.05rem 0.25rem;
                     border-radius: 2px; background: var(--wnlc-accent); color:#fff; }
.wnlc-qi-badge    { font-size: 0.6rem; font-weight: 700; padding: 0.05rem 0.25rem;
                     border-radius: 2px; background: var(--wnlc-bg-3); color: var(--wnlc-text-2); }

/* ── Erreur ── */
.wnlc-error {
  margin: 0.75rem 1.25rem;
  padding: 0.6rem 0.9rem;
  background: #fff5f5;
  border: 1px solid #ffc9c9;
  border-radius: var(--wnlc-radius);
  color: var(--wnlc-red);
  font-size: 0.82rem;
}

/* ── Animations ── */
@keyframes wnlc-fadein {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0); }
}
.wnlc-results { animation: wnlc-fadein 0.3s ease; }
.wnlc-pillar  { animation: wnlc-fadein 0.4s ease backwards; }
.wnlc-pillar:nth-child(1){animation-delay:.00s}
.wnlc-pillar:nth-child(2){animation-delay:.07s}
.wnlc-pillar:nth-child(3){animation-delay:.14s}
.wnlc-pillar:nth-child(4){animation-delay:.21s}

/* ── Responsive ── */
@media (max-width:580px) {
  .wnlc-pillars { grid-template-columns: repeat(2,1fr); }
  .wnlc-pillar:nth-child(2n){ border-right:none; }
  .wnlc-pillar { border-bottom: 1px solid var(--wnlc-border); }
  .wnlc-seg-btn { padding: 0.4rem 0.25rem; }
  .wnlc-coords-row { flex-direction: column; }
}