/* ============================================================
   ENC-TOC — sommaire des fiches d'espèces (2026-10-19, maquette « A2 » validée Rayane)
   Feuille UNIQUE du composant, chargée par toutes les fiches EN/FR/AR. Le markup est
   construit par `js/enc-toc.js` (rien dans le HTML des fiches). Le JS choisit la forme en
   mesurant la marge : classe `html.etoc-rail` (rail dans la marge) ou `html.etoc-barmode`
   (barre noire sous le header). Sans JS : rien ne s'affiche.
   Aucun style inline : le JS publie seulement des mesures (--etoc-nav, --etoc-x, --etoc-w,
   --etoc-pnl, --etoc-p) sur <html>, utilisées ci-dessous.
   Charte : ocre = seul accent (section en cours, progression) ; rayons 2px ; titres Oswald.
   ============================================================ */

.etoc, .etoc-bar { display: none; }
.etoc *, .etoc-bar * { box-sizing: border-box; }
.etoc a, .etoc-bar a, .etoc-bar button { text-decoration: none; }

/* ====================== RAIL (marge latérale) ====================== */
html.etoc-rail .etoc {
  display: block; position: fixed; z-index: 40;
  /* mesures publiées par le JS : bas du header, abscisse et largeur du rail */
  top: calc(var(--etoc-nav, 70px) + 32px); left: var(--etoc-x, 24px); width: var(--etoc-w, 230px);
  max-height: calc(100vh - var(--etoc-nav, 70px) - 56px);
  overflow-y: auto; scrollbar-width: none;
  font-family: var(--font-body, "Lato", Helvetica, Arial, sans-serif);
}
/* visible dès l'arrivée sur la page (Rayane 2026-10-19) : pas d'apparition au défilement */
.etoc::-webkit-scrollbar { display: none; }

/* En-tête (retour famille + nom + latin + progression) : sa place est RÉSERVÉE en permanence,
   pour que la liste ne bouge jamais ; il reste invisible tant que le titre de la page et le fil
   d'Ariane sont à l'écran (sinon il les double), puis apparaît en fondu (classe .titled, posée par le JS). */
.etoc-hd {
  padding: 0 0 14px; margin: 0 0 14px; border-bottom: 1px solid var(--line, #E4DBCE);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
.etoc.titled .etoc-hd { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .25s ease; }
.etoc-crumb {
  display: flex; width: fit-content; align-items: center; gap: 6px; margin: 0 0 9px;
  font-weight: 700; text-transform: uppercase; font-size: 10.5px; letter-spacing: .16em;
  color: var(--muted, #8A8378); transition: color .18s;
}
.etoc-crumb::before { content: '\2039'; font-size: 15px; line-height: 1; margin-top: -2px; }
.etoc-crumb:hover { color: var(--ocre, #C06A2C); }
.etoc-cn {
  display: block; font-family: var(--font-head, "Oswald", sans-serif); font-weight: 600;
  text-transform: uppercase; letter-spacing: .02em; font-size: 16px; line-height: 1.2;
  color: var(--ink, #211E19);
}
.etoc-ln { display: block; margin-top: 3px; font-style: italic; font-size: 13.5px; color: var(--muted-strong, #6d675b); }

/* progression (rail + barre) : un trait qui se remplit, piloté par scaleX */
.etoc-prog { position: relative; height: 2px; overflow: hidden; }
.etoc-prog span {
  position: absolute; inset: 0; background: var(--ocre, #C06A2C);
  transform: scaleX(var(--etoc-p, 0)); transform-origin: left center;
}
html[dir="rtl"] .etoc-prog span { transform-origin: right center; }
.etoc .etoc-prog { margin: 12px 0 0; background: var(--line, #E4DBCE); }

/* Titre « Sommaire » au-dessus de la liste (Rayane 2026-10-19) : gris, même style que le lien famille —
   JAMAIS en ocre, l'ocre du rail est réservé à la section en cours. */
.etoc-title {
  margin: 0 0 10px; font-weight: 700; text-transform: uppercase;
  font-size: 10.5px; letter-spacing: .16em; color: var(--muted, #8A8378);
}
html[lang="ar"] .etoc-title { text-transform: none; letter-spacing: 0; font-size: 12.5px; }

/* liste : UN trait continu à gauche (porté par les liens, jamais de marge entre eux) */
.etoc-lks a {
  display: block; padding: 7px 0 7px 15px; border-left: 2px solid var(--line, #E4DBCE);
  font-weight: 700; text-transform: uppercase; font-size: 11.5px; line-height: 1.4; letter-spacing: .06em;
  color: var(--muted, #8A8378); transition: color .18s, border-color .18s;
}
.etoc-lks a:hover { color: var(--ink, #211E19); border-left-color: #b9ae9d; }
.etoc-lks a.on { color: var(--ocre, #C06A2C); border-left-color: var(--ocre, #C06A2C); }
/* Rail : TOUS les sous-menus sont visibles en permanence (Rayane 2026-10-19) — le plan complet de la fiche */
.etoc-lks .etoc-subs { display: block; }
.etoc-lks .etoc-subs a {
  padding: 4px 0 4px 27px; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 13.5px;
  color: var(--muted-strong, #6d675b);
}
.etoc-lks .etoc-subs a:last-child { padding-bottom: 9px; }
.etoc-lks .etoc-subs a.on { color: var(--ink, #211E19); font-weight: 700; }
.etoc a:focus-visible, .etoc-bar a:focus-visible, .etoc-bar button:focus-visible {
  outline: 2px solid var(--ocre, #C06A2C); outline-offset: 2px;
}

.etoc-ft { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line, #E4DBCE); }
.etoc-top {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; text-transform: uppercase; font-size: 10.5px; letter-spacing: .14em;
  color: var(--muted, #8A8378); transition: color .18s;
}
.etoc-top:hover { color: var(--ocre, #C06A2C); }
.etoc-arrow { font-size: 12px; }

/* ====================== BARRE (sous le header) ====================== */
html.etoc-barmode .etoc-bar {
  display: block; position: sticky; top: var(--etoc-nav, 0px); z-index: 950;
  background: var(--bg-dark, #0a0a0a); border-top: 1px solid rgba(255, 255, 255, .07);
  font-family: var(--font-body, "Lato", Helvetica, Arial, sans-serif);
}
.etoc-tg {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  padding: 13px 16px; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: .08em;
  color: #B8AE9F;
}
.etoc-cap { flex: 0 0 auto; color: var(--muted, #8A8378); }
.etoc-cur { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ocre, #C06A2C); }
.etoc-chev { flex: 0 0 auto; font-size: 14px; line-height: 1; transition: transform .2s; }
.etoc-bar.open .etoc-chev { transform: rotate(180deg); }
.etoc-bar .etoc-prog { position: absolute; left: 0; right: 0; bottom: -1px; }

.etoc-pnl {
  display: none; position: fixed; top: var(--etoc-pnl, 112px); left: 0; right: 0; z-index: 949;
  max-height: calc(100vh - 130px); max-height: calc(100dvh - 130px);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--bg-dark, #0a0a0a); border-bottom: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
.etoc-bar.open .etoc-pnl { display: block; }
.etoc-pnl a {
  display: block; padding: 11px 20px; border-bottom: 1px solid rgba(255, 255, 255, .06);
  font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: .05em; color: #B8AE9F;
}
.etoc-pnl a.on { color: var(--ocre, #C06A2C); }
.etoc-pnl .etoc-subs { display: none; padding: 2px 0 6px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.etoc-pnl .etoc-grp.open .etoc-subs { display: block; }
.etoc-pnl .etoc-subs a {
  padding: 7px 20px 7px 36px; border-bottom: 0;
  text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 14px; color: #9a8f7f;
}
.etoc-pnl .etoc-subs a.on { color: #F4EFE7; font-weight: 700; }
.etoc-scrim { display: none; position: fixed; inset: 0; z-index: 948; background: rgba(10, 9, 8, .5); }
.etoc-bar.open .etoc-scrim { display: block; }

/* ====================== ARABE (RTL) ======================
   Polices arabes, pas d'interlettrage ni de capitales (charte typo arabe) ; trait à droite. */
html[lang="ar"] .etoc, html[lang="ar"] .etoc-bar { font-family: "Noto Sans Arabic", "Lato", sans-serif; }
html[lang="ar"] .etoc-cn { font-family: "Noto Kufi Arabic", "Oswald", sans-serif; text-transform: none; letter-spacing: 0; }
html[lang="ar"] .etoc-ln { direction: ltr; text-align: right; }
html[lang="ar"] .etoc-crumb, html[lang="ar"] .etoc-lks a, html[lang="ar"] .etoc-top,
html[lang="ar"] .etoc-tg, html[lang="ar"] .etoc-pnl a { letter-spacing: 0; text-transform: none; }
html[lang="ar"] .etoc-lks a { font-size: 13px; }
html[lang="ar"] .etoc-pnl a { font-size: 13px; }
html[lang="ar"] .etoc-tg { font-size: 12.5px; }
html[dir="rtl"] .etoc-crumb::before { content: '\203A'; }
html[dir="rtl"] .etoc-lks a { padding: 7px 15px 7px 0; border-left: 0; border-right: 2px solid var(--line, #E4DBCE); }
html[dir="rtl"] .etoc-lks a:hover { border-right-color: #b9ae9d; }
html[dir="rtl"] .etoc-lks a.on { border-right-color: var(--ocre, #C06A2C); }
html[dir="rtl"] .etoc-lks .etoc-subs a { padding: 4px 27px 4px 0; }
html[dir="rtl"] .etoc-lks .etoc-subs a:last-child { padding-bottom: 9px; }
html[dir="rtl"] .etoc-pnl .etoc-subs a { padding: 7px 36px 7px 20px; }

/* ====================== divers ====================== */
@media (prefers-reduced-motion: reduce) {
  html.etoc-rail .etoc, .etoc-hd, .etoc-crumb, .etoc-lks a, .etoc-chev { transition: none; }
}
@media print { .etoc, .etoc-bar { display: none !important; } }