/* ==========================================================================
   PLAN DU SITE (public/plan-du-site.php) — sobre, lisible, sur le fond sombre du site.
   ========================================================================== */
.sm {
    --sm-line: rgba(148, 163, 184, 0.14);
    --sm-text: #eef2f8;
    --sm-body: #c9d3e0;
    --sm-muted: #7f8ba0;
    --sm-accent: #7fb8ff;
    display: flex; flex-direction: column; gap: 2.6rem;
    padding-top: 2.4rem; padding-bottom: 4rem; max-width: 980px;
}
.sm-head { display: flex; flex-direction: column; gap: .7rem; }
.sm-title { margin: 0; color: #fff; font-weight: 800; font-size: clamp(2rem, 4.2vw, 2.9rem); line-height: 1.08; letter-spacing: -.025em; }
.sm-desc { margin: 0; color: var(--sm-muted); font-size: 1.02rem; line-height: 1.6; max-width: 62ch; }
.sm-jump { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.sm-jump a {
    padding: .4rem .8rem; border: 1px solid var(--sm-line); border-radius: 999px;
    color: var(--sm-body); font-size: .86rem; font-weight: 600; text-decoration: none;
    transition: border-color .15s linear, color .15s linear;
}
.sm-jump a:hover { border-color: rgba(127,184,255,.45); color: var(--sm-text); }

.sm-block { display: flex; flex-direction: column; gap: .9rem; scroll-margin-top: 96px; }
.sm-h2 { margin: 0; padding-bottom: .6rem; border-bottom: 1px solid var(--sm-line); color: var(--sm-text); font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; }
.sm-h3 { margin: .8rem 0 0; color: var(--sm-muted); font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sm-count { margin-left: .35rem; color: var(--sm-muted); font-size: .85rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.sm-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .35rem 1.5rem; }
.sm-inline { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; font-size: .86rem; }
.sm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sm-list li {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem 1rem;
    padding: .55rem 0; border-bottom: 1px solid var(--sm-line);
}
.sm a { color: var(--sm-body); text-decoration: none; transition: color .15s linear; }
.sm-grid a, .sm-list a { font-size: .95rem; line-height: 1.4; }
.sm-list a { flex: 1 1 28rem; color: var(--sm-text); font-weight: 600; }
.sm a:hover { color: var(--sm-accent); }
.sm a:focus-visible { outline: 2px solid var(--sm-accent); outline-offset: 2px; border-radius: 3px; }
.sm-list time, .sm-meta { flex: none; color: var(--sm-muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.sm-inline a { color: var(--sm-muted); }

.sm-xml { margin: 0; color: var(--sm-muted); font-size: .82rem; }
.sm-xml a { color: var(--sm-muted); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 560px) {
    .sm { gap: 2rem; padding-top: 1.6rem; }
    .sm-list li { flex-direction: column; gap: .15rem; }
    .sm-list a { flex-basis: auto; }
}