/* ==========================================================================
   Tableau Périodique Interactif - Styles Dédiés
   Réutilisation rigoureuse de la charte graphique existante :
   var(--paper), var(--line), var(--ink), var(--muted), var(--sun),
   var(--mint), var(--violet), var(--sky), var(--pink), var(--bounce), etc.
   ========================================================================== */

/* 让周期表在PC宽屏上拥有更大展示宽度，避免滚动条 */
.wrap.wrap-wide{width:min(1440px, calc(100% - 24px));margin:0 auto}

.card-shell{border:2.5px solid var(--line);border-radius:28px;background:var(--paper);box-shadow:var(--shadow);padding:20px}

/* Contrôles et barre d'outils */
.pt-controls-bar{display:grid;grid-template-columns:minmax(260px,1.2fr) minmax(320px,1.8fr);gap:16px;align-items:center;margin-bottom:16px}
.pt-search-box{position:relative;display:flex;align-items:center}
.pt-search-icon{position:absolute;left:16px;color:var(--muted);font-size:15px;pointer-events:none}
.pt-search-input{width:100%;height:44px;padding:6px 38px 6px 42px;border:2px solid var(--line);border-radius:999px;background:#fff;font-family:var(--sans);font-size:13.5px;font-weight:650;color:var(--ink);box-shadow:2.5px 2.5px 0 rgba(55,39,51,.08);transition:border-color .2s ease,box-shadow .2s ease}
.pt-search-input:focus{outline:none;border-color:var(--violet);box-shadow:3px 3px 0 rgba(154,128,255,.3)}
.pt-search-clear{position:absolute;right:14px;background:transparent;border:0;font-size:20px;line-height:1;color:var(--muted);cursor:pointer;padding:4px}
.pt-search-clear:hover{color:var(--ink)}

.pt-temp-box{display:flex;flex-direction:column;gap:6px;background:var(--wash);border:2px solid var(--line);border-radius:18px;padding:10px 16px}
.pt-temp-header{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:12.5px;font-weight:850}
.pt-temp-val{background:var(--paper);border:1.5px solid var(--line);border-radius:6px;padding:2px 8px;color:var(--ink);box-shadow:1.5px 1.5px 0 rgba(55,39,51,.08)}
.pt-temp-slider-wrap{width:100%}
.pt-temp-slider{width:100%;accent-color:var(--violet);cursor:pointer;height:6px}
.pt-state-legend{display:flex;gap:12px;font-family:var(--mono);font-size:11px;font-weight:850}
.state-pill{display:inline-flex;align-items:center;gap:5px}
.state-pill .dot-badge{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--line);display:inline-block}
.state-solid .dot-badge{background:var(--sky)}
.state-liquid .dot-badge{background:var(--sun)}
.state-gas .dot-badge{background:var(--mint)}

/* Filtres par famille */
.pt-family-filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;justify-content:center}
.pt-filter-btn{appearance:none;border:2px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:11.5px;font-weight:850;padding:5px 12px;cursor:pointer;box-shadow:2px 2px 0 var(--line);transition:transform .18s var(--bounce),box-shadow .18s var(--bounce),background .15s ease}
.pt-filter-btn:hover{transform:translateY(-1.5px);box-shadow:3px 3px 0 var(--line);background:var(--wash)}
.pt-filter-btn.active{background:var(--ink);color:#fff;box-shadow:none;transform:translate(1px,1px)}

/* Grille périodique principale - Responsive sans scrollbar sur PC */
.pt-grid-scroll-wrapper{width:100%;overflow-x:hidden;padding-bottom:10px}
.pt-periodic-grid{display:grid;grid-template-columns:repeat(18, minmax(0, 1fr));grid-template-rows:repeat(10, auto);gap:4px;width:100%;user-select:none}

/* Cellules du tableau */
.pt-cell{position:relative;width:100%;aspect-ratio:1/1.05;border:1.8px solid var(--line);border-radius:8px;background:var(--paper);box-shadow:2px 2px 0 var(--line);padding:3px 2px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;transition:transform .18s var(--bounce),box-shadow .18s var(--bounce),opacity .18s ease;outline:none}
.pt-cell:hover{transform:translate(-1px,-2px) scale(1.12);box-shadow:4px 5px 0 var(--line);z-index:15}
.pt-cell.is-selected{transform:translate(-1px,-1px) scale(1.06);box-shadow:3px 4px 0 var(--violet);border-color:var(--ink);z-index:12;outline:2px solid var(--violet)}
.pt-cell.is-dimmed{opacity:0.2;filter:grayscale(85%);transform:none;box-shadow:none}

.pt-cell-num{font-family:var(--mono);font-size:clamp(8px, 0.7vw, 10px);font-weight:850;color:var(--muted);line-height:1}
.pt-cell-sym{font-family:var(--sans);font-size:clamp(12px, 1.25vw, 17px);font-weight:950;color:var(--ink);text-align:center;line-height:1;margin:auto 0}
.pt-cell-name{font-size:clamp(7px, 0.65vw, 9px);font-weight:800;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1}
.pt-cell-mass{font-family:var(--mono);font-size:clamp(6.5px, 0.58vw, 8px);font-weight:700;color:var(--muted);text-align:center;line-height:1}

/* Couleurs par famille harmonique avec la charte */
.cell-alkali-metal{background:#ffd45f} /* var(--sun) */
.cell-alkaline-earth{background:#ffc078}
.cell-transition-metal{background:#eadfff} /* var(--lavender) */
.cell-post-transition{background:#d0ebff}
.cell-metalloid{background:#c8ef73} /* var(--lime) */
.cell-reactive-nonmetal{background:#79dfff} /* var(--sky) */
.cell-noble-gas{background:#ff8fca} /* var(--pink) */
.cell-lanthanide{background:#bbf7d0}
.cell-actinide{background:#fecdd3}

/* Indicateur d'état thermique sur les cases */
.pt-cell[data-current-state="gas"]::after{content:"";position:absolute;top:2px;right:2px;width:5px;height:5px;border-radius:50%;background:var(--mint);border:1px solid var(--line)}
.pt-cell[data-current-state="liquid"]::after{content:"";position:absolute;top:2px;right:2px;width:5px;height:5px;border-radius:50%;background:var(--sun);border:1px solid var(--line)}

/* Marqueurs Lanthanides & Actinides */
.pt-cell-marker{border:1.5px dashed var(--line);border-radius:8px;background:var(--wash);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--mono);padding:2px}
.pt-marker-range{font-size:clamp(7.5px, 0.65vw, 9.5px);font-weight:850;color:var(--muted)}
.pt-marker-title{font-size:clamp(8px, 0.75vw, 10.5px);font-weight:950;color:var(--ink)}

/* Panneau HUD Inspecteur */
.pt-hud-panel{margin-top:20px}
.pt-hud-card{border:2.5px solid var(--line);border-radius:24px;background:#fff;box-shadow:var(--shadow);padding:20px;display:grid;grid-template-columns:220px 1fr;gap:24px;align-items:start}

.pt-hud-element-preview{aspect-ratio:1/1.08;border:2.5px solid var(--line);border-radius:20px;background:var(--paper);box-shadow:5px 5px 0 var(--line);padding:16px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center}
.pt-hud-z{font-family:var(--mono);font-size:17px;font-weight:950;color:var(--ink);align-self:flex-start}
.pt-hud-symbol{font-family:var(--sans);font-size:52px;font-weight:950;line-height:1;margin:auto 0;color:var(--ink)}
.pt-hud-name{font-size:17px;font-weight:900;color:var(--ink);margin-bottom:2px}
.pt-hud-mass{font-family:var(--mono);font-size:12.5px;font-weight:800;color:var(--muted)}
.pt-hud-cat-pill{margin-top:6px;font-size:11px;font-weight:850;padding:3px 10px;border:1.5px solid var(--line);border-radius:999px;background:var(--paper);box-shadow:2px 2px 0 var(--line)}

.pt-hud-details{display:flex;flex-direction:column;gap:16px}
.pt-hud-header-info h3{margin:0 0 6px;font-size:24px;font-weight:950;color:var(--ink)}
.pt-hud-summary{margin:0;font-size:14px;color:var(--muted);line-height:1.6;font-weight:600}

.pt-hud-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));gap:10px}
.pt-hud-prop{border:1.5px solid rgba(55,39,51,.12);border-radius:12px;background:var(--wash);padding:8px 12px;display:flex;flex-direction:column;gap:2px}
.pt-prop-label{font-size:10.5px;font-weight:800;text-transform:uppercase;color:var(--muted);font-family:var(--mono)}
.pt-prop-val{font-size:13px;font-weight:900;color:var(--ink)}

.pt-hud-actions{display:flex;gap:12px;margin-top:6px;flex-wrap:wrap}
.pt-action-btn{font-size:13px;padding:9px 16px}

/* Sections SEO et Pédagogiques */
.seo-guide-section,.faq-section{padding:42px 0}
.guide-header,.faq-header{text-align:center;max-width:760px;margin:0 auto 32px}
.guide-header h2,.faq-header h2{font-size:clamp(26px, 3.8vw, 38px);font-weight:950;margin:10px 0 14px;color:var(--ink)}
.guide-header p{font-size:15.5px;line-height:1.7;color:var(--muted);font-weight:600;margin-bottom:10px}

.feature-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap:18px}
.feature-card{border:2px solid var(--line);border-radius:22px;background:var(--paper);box-shadow:var(--shadow);padding:24px;transition:transform .2s var(--bounce)}
.feature-card:hover{transform:translateY(-3px)}
.feature-icon{width:48px;height:48px;border:2px solid var(--line);border-radius:12px;background:var(--sun);display:grid;place-items:center;font-size:20px;margin-bottom:14px;box-shadow:3px 3px 0 var(--line)}
.feature-card:nth-child(2) .feature-icon{background:var(--mint)}
.feature-card:nth-child(3) .feature-icon{background:var(--lavender)}
.feature-card h3{margin:0 0 8px;font-size:17px;font-weight:900}
.feature-card p{margin:0;font-size:13.5px;line-height:1.6;color:var(--muted);font-weight:600}

/* FAQ Accordion */
.faq-accordion{display:flex;flex-direction:column;gap:12px;max-width:820px;margin:0 auto}
.faq-item{border:2px solid var(--line);border-radius:16px;background:var(--paper);box-shadow:var(--shadow);overflow:hidden;transition:background .2s ease}
.faq-item[open]{background:#fff}
.faq-question{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;font-size:15.5px;font-weight:900;color:var(--ink);cursor:pointer;list-style:none}
.faq-question::-webkit-details-marker{display:none}
.faq-chevron{font-size:13px;color:var(--muted);transition:transform .2s ease}
.faq-item[open] .faq-chevron{transform:rotate(180deg)}
.faq-answer{padding:0 20px 18px;font-size:14px;line-height:1.7;color:var(--muted);font-weight:600;border-top:1px dashed rgba(55,39,51,.12);padding-top:12px}

/* 当屏幕小于 840px (平板/手机) 时允许横向滑动查表 */
@media (max-width: 840px) {
  .pt-grid-scroll-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .pt-periodic-grid{min-width:840px;gap:4px}
  .pt-controls-bar{grid-template-columns:1fr}
  .pt-hud-card{grid-template-columns:1fr;gap:18px}
  .pt-hud-element-preview{max-width:190px;margin:0 auto}
}