/* DPEM — page « La Direction ».
   L'organigramme et la chronologie n'existent que sur cet écran. */

/* ── Organigramme ─────────────────────────────────────────────────────────
   Une colonne de nœuds reliés par un trait. Chaque nœud est un bouton qui
   déplie sa description : le contenu reste dans le document, il n'est pas
   chargé au clic, et une page imprimée le porte donc entièrement. */
.organigramme .trait {
  width: 2px; height: 22px; margin: 0 auto;
  background: var(--lichen);
}
.noeud {
  display: block; width: 100%; text-align: left;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r, 18px);
  padding: 0.95rem 1.1rem;
  backdrop-filter: blur(var(--blur));
  transition: background .2s var(--ease), border-color .2s;
}
.noeud + .noeud { margin-top: 0.6rem; }
.noeud:hover { background: var(--glass-strong); }
.noeud-tete { display: flex; align-items: center; gap: 0.7rem; color: var(--forest-900); }
.noeud-nom { font-weight: 700; flex: 1; }
.noeud-fleche { transition: transform .25s var(--ease); color: var(--slate-600); }
.noeud[aria-expanded="true"] .noeud-fleche { transform: rotate(180deg); }
.noeud-corps {
  display: block; overflow: hidden;
  max-height: 0; opacity: 0;
  font-size: 0.9375rem; line-height: 1.6; color: rgba(18,28,24,.85);
  transition: max-height .3s var(--ease), opacity .25s, margin-top .3s var(--ease);
}
.noeud[aria-expanded="true"] .noeud-corps { max-height: 14rem; opacity: 1; margin-top: 0.6rem; }
.noeud-dpem {
  background: rgba(217,232,223,.72);
  border: 2px solid var(--forest-500);
}
.branche-titre {
  font-size: 0.75rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--slate-600); margin-bottom: 0.6rem;
}

/* ── Chronologie ──────────────────────────────────────────────────────────
   Repères d'années à gauche, cartes à droite. Le trait central est
   décoratif : il ne porte aucune information que le texte ne donne. */
.chrono { list-style: none; margin: 0; padding: 0; position: relative; }
.chrono::before {
  content: ""; position: absolute; left: 76px; top: 8px; bottom: 8px;
  width: 2px; background: var(--lichen);
}
.chrono > li { display: grid; grid-template-columns: 76px 1fr; gap: 1.6rem; padding-bottom: 1.6rem; }
.chrono-annee {
  font-size: 1.5rem; font-weight: 800; color: var(--forest-700);
  text-align: right; padding-top: 0.9rem; font-variant-numeric: tabular-nums;
}
.chrono-carte {
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  border-radius: 18px; padding: 1.2rem 1.35rem;
  backdrop-filter: blur(var(--blur));
  position: relative;
}
.chrono-carte::before {
  content: ""; position: absolute; left: -1.6rem; top: 1.45rem;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--rubis-600); border: 2px solid var(--paper);
  transform: translateX(-4px);
}
.chrono-carte h3 { font-weight: 800; color: var(--forest-900); margin-bottom: 0.5rem; }
.chrono-carte p { font-size: 0.9375rem; line-height: 1.65; color: rgba(18,28,24,.88); }
.chrono-ref { margin-top: 0.6rem; font-size: 0.8125rem; }

@media (max-width: 640px) {
  .chrono::before { left: 10px; }
  .chrono > li { grid-template-columns: 1fr; gap: 0.5rem; padding-left: 1.7rem; }
  .chrono-annee { text-align: left; padding-top: 0; font-size: 1.25rem; }
  .chrono-carte::before { left: -1.7rem; top: 0.9rem; }
}