/* ============================================================
   SpiLi — Les Parentés
   Identité « Le Filet » · R-1
   ------------------------------------------------------------
   Le troisième moteur. Régime clair : une matrice se lit, elle
   ne se regarde pas comme une carte. Le régime sombre est réservé
   au régime graphe, qui viendra à R-1 bis.

   La trame dit le degré d'établissement du lien — pleine,
   tiretée, pointillée. Aucune couleur ne code un contenu ;
   l'accent ne dit qu'un état.
   ============================================================ */

.parentes-tete { padding: 54px 0 0; }
.parentes-tete h1 { font-size: clamp(2rem, 4.4vw, 2.85rem); margin: 6px 0 14px; }

.parentes-kicker {
  font-family: var(--spili-data); font-size: 11.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--spili-texte-faible); margin: 0;
}

.parentes-these {
  font-size: 1.12rem; line-height: 1.62; max-width: 70ch;
  color: var(--spili-texte-doux); margin: 0;
}

.parentes-note {
  margin-top: 16px; font-size: 0.95rem; line-height: 1.6;
  max-width: 74ch; color: var(--spili-texte-faible);
}

.parentes-corps { padding: 34px 0 60px; }

/* ---------- Le seuil ---------- */

.parentes-seuil { list-style: none; margin: 0 0 44px; padding: 0; }
.parentes-seuil li { border-top: 1px solid var(--spili-trait); }
.parentes-seuil li:last-child { border-bottom: 1px solid var(--spili-trait); }

.parentes-seuil a {
  display: grid; grid-template-columns: 240px 1fr 200px;
  gap: 8px 26px; align-items: baseline;
  padding: 18px 6px; text-decoration: none;
  border-left: var(--spili-notation) solid transparent;
  transition: background var(--spili-transition), border-color var(--spili-transition);
}
.parentes-seuil a:hover,
.parentes-seuil a:focus-visible {
  background: var(--spili-accent-trace);
  border-left-color: var(--spili-accent);
}
.parentes-seuil a:focus-visible { outline: 2px solid var(--spili-accent); outline-offset: -2px; }

.parentes-seuil-axes {
  font-family: var(--spili-data); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--spili-texte-faible);
}
.parentes-seuil-titre { font-size: 1.05rem; color: var(--spili-texte); grid-column: 1 / 3; }
.parentes-seuil-these {
  grid-column: 2; grid-row: 2;
  font-size: 0.9rem; line-height: 1.55; color: var(--spili-texte-faible);
}
.parentes-seuil-densite {
  grid-column: 3; grid-row: 1 / 3; text-align: right;
  font-family: var(--spili-data); font-size: 11px; color: var(--spili-texte-faible);
}

/* ---------- Le relevé et la légende ---------- */

.planche-releve {
  margin: 0 0 18px; padding-bottom: 12px;
  border-bottom: 2px solid var(--spili-texte);
  font-family: var(--spili-data); font-size: 11.5px;
  letter-spacing: 0.08em; color: var(--spili-texte-faible);
}
.planche-releve b { color: var(--spili-texte); font-weight: 400; }

.planche-legende {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  margin-top: 16px; font-family: var(--spili-data);
  font-size: 11px; color: var(--spili-texte-faible);
}
.planche-legende span { display: flex; align-items: center; gap: 7px; }
.planche-legende-note { color: var(--spili-texte-faible); font-style: normal; }

/* ---------- La marque et ses trames ---------- */

/* Un carré plein : le lien existe. La trame en dit le degré. Jamais la couleur —
   l'information ne doit pas dépendre de la teinte (WCAG 1.4.1).

   La notation du système est faite pour des FILETS — plein, tireté, pointillé.
   Transposée telle quelle sur un carré de onze pixels, elle produit des barres
   verticales que l'œil ne lit plus comme un signe. La transposition juste garde
   les trois degrés et leur gradation — pleine, hachurée, creuse — dans une forme
   qui tient à cette taille. C'est le même geste que sur la carte, où le repère
   sans emprise est un cercle ouvert et non un disque tramé. */
.case-marque {
  display: inline-block; width: 11px; height: 11px;
  background: var(--spili-texte); flex: none;
  box-sizing: border-box;
}
.case-marque.case--probable {
  background: repeating-linear-gradient(
    45deg, var(--spili-texte) 0 1.5px, transparent 1.5px 4px);
  border: 1px solid var(--spili-texte);
}
.case-marque.case--rapporte {
  background: transparent;
  border: 1.5px solid var(--spili-texte);
}

/* ---------- La table ---------- */

.planche-cadre { border: 1px solid var(--spili-trait); background: var(--spili-fond-eleve); overflow-x: auto; }

.planche-table { border-collapse: collapse; width: 100%; }

.planche-table thead th {
  font-family: var(--spili-data); font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 400;
  color: var(--spili-texte-faible);
  vertical-align: bottom; padding: 0 0 11px;
  border-bottom: 2px solid var(--spili-texte); height: 132px;
}
.planche-table thead th span:not(.sr-only) {
  display: block; writing-mode: vertical-rl; transform: rotate(180deg);
  white-space: nowrap; margin: 0 auto;
}
.planche-table thead th.coin { height: auto; }

.planche-table tbody th {
  text-align: left; font-weight: 400; font-size: 14px;
  padding: 0 18px 0 20px; white-space: nowrap; width: 1%;
  border-bottom: 1px solid var(--spili-trait-faible);
  color: var(--spili-texte-doux);
}

.planche-table tbody td {
  border-bottom: 1px solid var(--spili-trait-faible);
  border-left: 1px solid var(--spili-trait-faible);
  text-align: center; height: 38px; padding: 0;
}

.planche-table tbody tr:hover td { background: var(--spili-accent-trace); }
.planche-table tbody tr:hover th { color: var(--spili-texte); }

.case-nombre {
  font-family: var(--spili-data); font-size: 10px;
  color: var(--spili-texte-faible); margin-left: 4px; vertical-align: 2px;
}

.planche-total {
  font-family: var(--spili-data); font-size: 11.5px;
  color: var(--spili-texte-faible);
  border-left: 2px solid var(--spili-texte) !important;
  width: 1%; padding: 0 18px !important; white-space: nowrap;
}

/* ---------- La liste, sous 860 px ---------- */

/* Elle double la table plutôt que de la pivoter : une matrice de vingt-quatre
   lignes ne se retourne pas en CSS sans mentir sur ses en-têtes. L'une des deux
   est toujours retirée du rendu, donc une seule est lue. */
.planche-liste { display: none; }

.planche-liste, .planche-liste ul { list-style: none; margin: 0; padding: 0; }
.planche-liste > li { border-top: 1px solid var(--spili-trait); padding: 14px 0; }
.planche-liste > li:last-child { border-bottom: 1px solid var(--spili-trait); }

.planche-liste-nom {
  display: flex; justify-content: space-between; gap: 14px;
  margin: 0 0 8px; font-size: 0.98rem;
}
.planche-liste-nom span { font-family: var(--spili-data); font-size: 11px; color: var(--spili-texte-faible); }

.planche-liste ul li {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 0; font-size: 0.9rem; color: var(--spili-texte-doux);
}
.planche-liste-degre { font-family: var(--spili-data); font-size: 10.5px; color: var(--spili-texte-faible); }
.planche-liste-vide { margin: 0; font-size: 0.88rem; color: var(--spili-texte-faible); }

/* ---------- L'aveu ---------- */

.parentes-aveu {
  margin-top: 44px; padding-top: 22px;
  border-top: 2px solid var(--spili-texte);
}
.parentes-aveu h2 { font-size: 1.28rem; font-weight: 300; letter-spacing: -0.02em; margin: 0 0 12px; }
.parentes-aveu p { font-size: 0.95rem; line-height: 1.62; max-width: 76ch; color: var(--spili-texte-doux); }

/* ---------- Les autres planches ---------- */

.parentes-autres { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--spili-trait); }
.parentes-autres h2 {
  font-family: var(--spili-data); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; font-weight: 400;
  color: var(--spili-texte-faible); margin: 0 0 10px;
}
.parentes-autres ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.parentes-autres a { font-size: 0.92rem; }

/* ---------- Ruptures ---------- */

@media (max-width: 860px) {
  .planche-cadre { display: none; }
  .planche-liste { display: block; }
  .parentes-seuil a { grid-template-columns: 1fr; gap: 6px; }
  .parentes-seuil-titre,
  .parentes-seuil-these,
  .parentes-seuil-densite { grid-column: 1; grid-row: auto; text-align: left; }
}

/* ============================================================
   R-2 — l'ouverture d'un croisement
   ------------------------------------------------------------
   Une case n'ouvre rien : elle renvoie à un croisement qui existe
   déjà, en toutes lettres, plus bas dans la page. Sans script,
   l'ancre y descend. Avec, le cartel le montre à côté de la
   matrice — mais c'est le même contenu, recopié, jamais refait.
   ============================================================ */

/* La scène : la matrice, et le cartel à sa droite quand la place existe.
   Sous 1120 px le cartel passe dessous ; sous 860 px il disparaît, et les
   cases redeviennent de simples ancres — c'est ce que `parentes.js`
   interroge avant de détourner un clic. */
.planche-scene {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 22px;
  align-items: start;
}

/* Le lien d'une case occupe toute la cellule : viser un carré de onze pixels
   au doigt suppose que la cible soit la case, pas la marque. */
.planche-table tbody td > a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  text-decoration: none;
}
.planche-table tbody td > a:focus-visible {
  outline: 2px solid var(--spili-accent);
  outline-offset: -3px;
}
.planche-table tbody td > a.est-ouvert,
.planche-liste a.est-ouvert {
  background: var(--spili-accent-voile);
  box-shadow: inset 0 0 0 2px var(--spili-accent);
}

.planche-liste a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  color: var(--spili-texte-doux);
  text-decoration: none;
}
.planche-liste a:hover,
.planche-liste a:focus-visible { color: var(--spili-accent-fort); }

/* ---------- Le cartel ---------- */

.planche-cartel {
  display: block;
  position: sticky;
  /* Sous l'en-tête collant. Les 90 px écrits ici passaient de justesse tant
     que l'en-tête en faisait 87 — mais il en fait 130 dès que sa navigation
     se replie, et le cartel disparaissait alors dessous. */
  top: calc(var(--spili-entete) + 20px);
  max-height: calc(100vh - var(--spili-entete) - 40px);
  overflow-y: auto;
  border: 1px solid var(--spili-trait);
  background: var(--spili-fond-eleve);
  padding: 18px 20px;
  font-size: 0.92rem;
}
/* Posé `hidden` par le gabarit et révélé par le script : sans lui, un panneau
   d'accueil promettrait une interaction qui n'existe pas. */
.planche-cartel[hidden] { display: none; }

.planche-cartel-kicker,
.planche-cartel-accueil {
  font-family: var(--spili-data);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--spili-texte-faible);
  margin: 0 0 12px;
}
.planche-cartel-accueil { text-transform: none; letter-spacing: 0; font-size: 12px; line-height: 1.6; }
.planche-cartel .croisement-titre { font-size: 1rem; }
.planche-cartel .croisement-entrees { max-height: 40vh; overflow-y: auto; }
.planche-cartel-lien {
  margin: 14px 0 0;
  font-family: var(--spili-data);
  font-size: 11px;
}

/* ---------- Les croisements en toutes lettres ---------- */

.planche-croisements { margin-top: 46px; }
.planche-croisements > h2 {
  font-family: var(--spili-data);
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--spili-texte-faible);
  margin: 0 0 18px;
}
.planche-croisements > ol { list-style: none; margin: 0; padding: 0; }
.planche-croisements > ol > li {
  border-top: 1px solid var(--spili-trait);
  padding: 18px 0 18px 16px;
  border-left: var(--spili-notation) solid transparent;
}
.planche-croisements > ol > li:last-child { border-bottom: 1px solid var(--spili-trait); }
/* Arrivé par une ancre — sans script, ou depuis un lien cité ailleurs. */
.planche-croisements > ol > li:target { border-left-color: var(--spili-accent); }
.planche-croisements > ol > li:focus { outline: none; }

.croisement-titre {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 8px; font-size: 1.02rem; color: var(--spili-texte);
}
.croisement-preuve {
  font-family: var(--spili-data);
  font-size: 11.5px; line-height: 1.7;
  color: var(--spili-texte-faible);
  margin: 0 0 10px; max-width: 78ch;
}
.croisement-preuve strong { color: var(--spili-texte-doux); font-weight: 400; }

.croisement-entrees { list-style: none; margin: 0; padding: 0; }
.croisement-entrees li { margin-bottom: 5px; }
.croisement-entrees a {
  font-family: var(--spili-data); font-size: 12px;
  color: var(--spili-accent);
}
.croisement-entrees a:hover,
.croisement-entrees a:focus-visible { color: var(--spili-accent-fort); }

@media (max-width: 1120px) {
  .planche-scene { grid-template-columns: minmax(0, 1fr); }
  .planche-cartel { position: static; }
}
@media (max-width: 860px) {
  /* Plus de cartel : l'écran est trop étroit pour montrer la matrice et le
     croisement ensemble. Les cases redeviennent des ancres. */
  .planche-cartel { display: none !important; }
}