body {
    font-family: 'DM Sans', sans-serif;
    background: #ffffff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
.top-toggles{
    position: fixed;
    top: 18px;
    right: 18px;

    width:44px;
    height:44px;
    border-radius:12px;

    border:1px solid var(--border);
    background:var(--panel);
    color:var(--text);

    cursor:pointer;
    backdrop-filter: blur(12px);

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:18px;

    transition: all 0.3s ease;
}

.top-toggles:hover{
    transform: translateY(-2px);
}
.mono { font-family: 'Space Mono', monospace; }
main {
    max-width: 900px;   /* ou ce que tu veux */
    margin: 0 auto;
    text-align: center;
}
h1 {
    font-weight: 900 ;
    text-align: center;
}
.title_elements {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    text-align: center;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #000000;
    text-shadow: 0 1px 0 #ffffff;
}
header p {
    font-weight: 700;
    text-align: center;
}
#legend {
    display: flex;
    flex-wrap: wrap;          /* retour à la ligne si trop long */
    gap: 8px 16px;
    justify-content: center;  /* centré sous le titre / tableau */
    align-items: center;
    margin: 1rem auto;
}

/* chaque entrée de légende déjà en ligne grâce à flex */
#legend > div {
    display: flex;
    align-items: center;
}
.el-cell {
    width: 58px; height: 62px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    border: 2px solid transparent;
    border-radius: 6px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    position: relative;
    user-select: none;
}

.el-cell:hover, .el-cell:focus-visible {
    transform: scale(1.15);
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    z-index: 10;
}

.el-cell:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.el-cell.selected { border-color: #fff; box-shadow: 0 0 12px rgba(255,255,255,0.5); }

.el-cell .num { font-size: 8px; position: absolute; top: 3px; left: 5px; opacity: 0.8; }
.el-cell .sym { font-size: 18px; font-weight: 700; line-height: 1; }
.el-cell .nm { font-size: 7px; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52px; text-align: center; }

.pt-grid {
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(18, 58px);
    gap: 4px;
}

.detail-panel {
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.3s ease;
}

.detail-panel.open { max-height: 500px; opacity: 1; margin-top: 1.5rem; }

.cat-alkali { background: #dc2626; color: #fff; }
.cat-alkaline { background: #ea580c; color: #fff; }
.cat-transition { background: #d97706; color: #fff; }
.cat-post-transition { background: #0d9488; color: #fff; }
.cat-metalloid { background: #16a34a; color: #fff; }
.cat-nonmetal { background: #0284c7; color: #fff; }
.cat-halogen { background: #4f46e5; color: #fff; }
.cat-noble { background: #7c3aed; color: #fff; }
.cat-lanthanide { background: #db2777; color: #fff; }
.cat-actinide { background: #e11d48; color: #fff; }
.cat-unknown { background: #525252; color: #fff; }

.bg-alkali { background: rgba(220,38,38,0.12); }
.bg-alkaline { background: rgba(234,88,12,0.12); }
.bg-transition { background: rgba(217,119,6,0.12); }
.bg-post-transition { background: rgba(13,148,136,0.12); }
.bg-metalloid { background: rgba(22,163,74,0.12); }
.bg-nonmetal { background: rgba(2,132,199,0.12); }
.bg-halogen { background: rgba(79,70,229,0.12); }
.bg-noble { background: rgba(124,58,237,0.12); }
.bg-lanthanide { background: rgba(219,39,119,0.12); }
.bg-actinide { background: rgba(225,29,72,0.12); }
.bg-unknown { background: rgba(82,82,82,0.12); }

.legend-dot { width: 14px; height: 14px; border-radius: 3px; }