/* ───────────────────────────────────────────────────────────────────────────
   PLAN DU SITE — org-chart CSS (horizontal desktop → indenté mobile)
   Nœuds = verre frosté (recette commune via style.css)
   ─────────────────────────────────────────────────────────────────────────── */
body.page-template-page-plan-du-site {
  --bg: #EFF0EF;
  --sm-line: var(--line);
  background: var(--bg);
  color: var(--ink);
}
body main {
  min-height: calc(100vh - var(--admin-h) - var(--footer-h));
}
.sm-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--nav-h, 56px) + clamp(40px, 9vh, 96px)) clamp(20px, 5vw, 52px) clamp(8px, 2vh, 24px);
  text-align: center;
}
.sm-ghost {
  position: absolute; left: 50%; top: 54%;
  transform: translate(-50%, -50%);
  font-family: 'Oswald', var(--font-nb), sans-serif;
  font-weight: 700; font-size: clamp(140px, 30vw, 480px); line-height: .8;
  letter-spacing: -.02em; color: transparent;
  -webkit-text-stroke: 1px rgba(19, 21, 20, .07);
  white-space: nowrap; pointer-events: none; user-select: none; z-index: 0;
}
.sm-head { position: relative; z-index: 1; }
.sm-kicker {
  font: 600 12.5px/1 var(--font-nb), sans-serif;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--color-gold-deep); margin: 0 0 14px;
}
.sm-title {
  font-family: 'Oswald', var(--font-nb), sans-serif;
  font-weight: 600; letter-spacing: -.01em;
  font-size: clamp(44px, 7vw, 92px); line-height: .94; margin: 0; color: var(--ink);
}
.sm-title__dot { color: var(--color-gold-deep); }
.sm-lede { font: 400 clamp(15px,1.3vw,17px)/1.5 var(--font-nb), sans-serif; color: var(--muted); margin: 14px 0 0; }

/* Conteneur défilable horizontalement si l'arbre dépasse */
.sm-treewrap {
  padding: clamp(20px, 5vh, 56px) clamp(16px, 4vw, 40px) clamp(70px, 11vh, 130px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Org-chart ─────────────────────────────────────────────────────────────── */
.sm-tree { --sp: 28px; min-width: max-content; margin: 0 auto; }
.sm-tree ul {
  display: flex; justify-content: center;
  list-style: none; margin: 0; padding: var(--sp) 0 0; position: relative;
}
.sm-tree > ul { padding-top: 0; }
.sm-tree li {
  list-style: none; position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: var(--sp) 14px 0;
}
/* connecteurs */
.sm-tree li::before, .sm-tree li::after {
  content: ''; position: absolute; top: 0; right: 50%;
  width: 50%; height: var(--sp);
  border-top: 1px solid var(--sm-line);
}
.sm-tree li::after { right: auto; left: 50%; border-left: 1px solid var(--sm-line); }
.sm-tree li:only-child::before, .sm-tree li:only-child::after { display: none; }
.sm-tree li:only-child { padding-top: var(--sp); }
.sm-tree li:first-child::before, .sm-tree li:last-child::after { border: 0; }
.sm-tree li:last-child::before { border-right: 1px solid var(--sm-line); border-radius: 0 6px 0 0; }
.sm-tree li:first-child::after { border-radius: 6px 0 0 0; }
/* descente parent → rangée enfants */
.sm-tree ul ul::before {
  content: ''; position: absolute; top: 0; left: 50%;
  width: 0; height: var(--sp); border-left: 1px solid var(--sm-line);
}

/* Nœuds (verre frosté commun) */
.sm-node {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 18px; border-radius: 14px;
  font: 600 14px/1.2 var(--font-nb), sans-serif;
  color: var(--ink); text-decoration: none; white-space: nowrap;
  transition: transform .35s var(--spring), box-shadow .3s ease;
}
.sm-node i { font-size: 17px; color: var(--color-gold-deep); }
.sm-node:hover { transform: translateY(-3px); }
.sm-node--root {
  font-family: 'Oswald', var(--font-nb), sans-serif;
  font-weight: 600; font-size: 17px; letter-spacing: .01em;
  padding: 14px 26px; border-radius: 999px;
  background: var(--ink); color: #fff;
  box-shadow: 0 10px 30px -14px rgba(19,21,20,.6);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.sm-node--root i { color: var(--color-gold); }
.sm-node--leaf {
  font-weight: 500; font-size: 13px; color: var(--muted);
  padding: 9px 15px; border-radius: 999px;
}
.sm-node--leaf:hover { color: var(--ink); }

/* ── Mobile : passage en liste indentée à guides verticales ─────────────────── */
@media (max-width: 820px) {
  .sm-treewrap { overflow-x: hidden; }
  .sm-tree { --sp: 0px; min-width: 0; max-width: 560px; }
  .sm-tree ul { display: block; padding: 0; }
  .sm-tree > ul { padding: 0; }
  .sm-tree li {
    display: block; align-items: stretch; text-align: left;
    padding: 10px 0 0 22px; margin-left: 6px;
  }
  .sm-tree li::before, .sm-tree li::after { display: none; }
  .sm-tree ul ul::before { display: none; }
  .sm-tree ul ul { position: relative; }
  .sm-tree ul ul > li { border-left: 1px solid var(--sm-line); }
  .sm-tree ul ul > li::after {
    content: ''; display: block; position: absolute; left: 0; top: 28px;
    width: 16px; height: 1px; background: var(--sm-line);
  }
  .sm-node { width: auto; }
  .sm-node--root { display: inline-flex; margin-bottom: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .sm-node { transition: none; }
}