/* ============================================================
   SpiLi — le bloc « Citer cette page » et la règle de permanence
   (lot 4 du plan du 4 août)

   Registre monospace, celui de l'appareil critique : ce bloc
   appartient à l'instrument, pas au discours. Il se lit comme une
   notice de bas de fiche, et se copie comme une ligne de
   bibliographie.
   ============================================================ */

.citer {
  margin-top: 40px;
  padding: 26px 28px;
  border: 1px solid var(--spili-trait);
  background: var(--spili-fond-eleve);
}

.citer 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 16px;
}

/* La référence elle-même. `word-break` sur l'URL : une adresse d'entrée peut
   dépasser soixante caractères, et un débordement horizontal la rendrait
   incopiable au doigt. */
.citer-reference {
  font-family: var(--spili-data);
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--spili-texte);
  margin: 0;
  max-width: 92ch;
}

.citer-url {
  color: var(--spili-accent);
  overflow-wrap: anywhere;
}
.citer-url:hover,
.citer-url:focus-visible {
  color: var(--spili-accent-fort);
}

.citer-outils {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 18px 0 0;
  min-height: 1px;
}

.citer-copier {
  font-family: var(--spili-data);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--spili-texte);
  background: transparent;
  border: 1px solid var(--spili-texte);
  border-radius: var(--spili-rayon);
  padding: 9px 16px;
  cursor: pointer;
  transition: background var(--spili-transition), color var(--spili-transition);
}
.citer-copier:hover,
.citer-copier:focus-visible {
  background: var(--spili-texte);
  color: var(--spili-fond-eleve);
}
/* Le bouton est posé `hidden` par le gabarit et révélé par le script : sans
   cette règle, `display: flex` du parent le ferait réapparaître. */
.citer-copier[hidden] {
  display: none;
}

.citer-etat {
  font-family: var(--spili-data);
  font-size: 11.5px;
  color: var(--spili-accent);
}

.citer-note {
  font-family: var(--spili-data);
  font-size: 11.5px;
  line-height: 1.8;
  color: var(--spili-texte-faible);
  margin: 16px 0 0;
  max-width: 78ch;
}
.citer-note code {
  font-family: var(--spili-data);
  color: var(--spili-texte-doux);
  background: var(--spili-accent-trace);
  padding: 1px 5px;
}

@media (max-width: 560px) {
  .citer {
    padding: 20px 18px;
  }
  .citer-reference {
    font-size: 12px;
  }
}

/* ============================================================
   La page de la règle — /permaliens.html
   ============================================================ */

.permaliens-tete {
  padding: 56px 0 34px;
  border-bottom: 1px solid var(--spili-trait);
}
.permaliens-tete h1 {
  margin: 10px 0 18px;
}
.permaliens-chapo {
  font-size: 17px;
  line-height: 1.75;
  color: var(--spili-texte-doux);
  max-width: 66ch;
}
.permaliens-rang {
  font-family: var(--spili-data);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--spili-texte-faible);
  margin: 0;
}

.permaliens-corps {
  padding: 44px 0 72px;
}
.permaliens-corps h2 {
  font-size: 20px;
  margin: 44px 0 14px;
}
.permaliens-corps h2:first-of-type {
  margin-top: 0;
}
.permaliens-corps p,
.permaliens-corps li {
  max-width: 66ch;
  line-height: 1.8;
  color: var(--spili-texte-doux);
}
.permaliens-corps p {
  margin: 0 0 16px;
}
.permaliens-corps ol,
.permaliens-corps ul {
  padding-left: 20px;
}
.permaliens-corps li {
  margin-bottom: 10px;
}

/* Les formes d'adresse : du monospace, parce que ce sont des gabarits à lire
   caractère par caractère. */
.permaliens-formes {
  display: grid;
  gap: 16px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  max-width: 78ch;
}
.permaliens-formes li {
  margin: 0;
  padding: 14px 16px;
  border-left: var(--spili-notation) solid var(--spili-texte);
  background: var(--spili-fond-carte);
}
.permaliens-formes code {
  display: block;
  font-family: var(--spili-data);
  font-size: 12.5px;
  color: var(--spili-texte);
  overflow-wrap: anywhere;
}
.permaliens-formes span {
  display: block;
  font-size: 13px;
  color: var(--spili-texte-faible);
  margin-top: 6px;
}

/* Le registre des retraits. Vide aujourd'hui — et le dire est le propos. */
.permaliens-retraits {
  font-family: var(--spili-data);
  font-size: 12.5px;
  line-height: 1.8;
  border-collapse: collapse;
  width: 100%;
  max-width: 900px;
  margin-top: 18px;
}
.permaliens-retraits th,
.permaliens-retraits td {
  text-align: left;
  vertical-align: top;
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--spili-trait);
}
.permaliens-retraits th {
  font-weight: 400;
  color: var(--spili-texte-faible);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 11px;
}

.permaliens-vide {
  font-family: var(--spili-data);
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--spili-texte-doux);
  border-left: var(--spili-notation) solid var(--spili-trait);
  padding: 14px 18px;
  margin-top: 18px;
  max-width: 78ch;
}

.permaliens-compte {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 44px;
  font-family: var(--spili-data);
  font-size: 12px;
  line-height: 1.7;
  max-width: 900px;
  margin-top: 20px;
}
.permaliens-compte dt {
  color: var(--spili-texte);
}
.permaliens-compte dd {
  margin: 0;
  color: var(--spili-texte-doux);
}

@media (max-width: 860px) {
  .permaliens-compte {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================
   La page d'une entrée retirée — même adresse, autre contenu
   ============================================================ */

.retrait {
  padding: 64px 0 80px;
}
.retrait-rang {
  font-family: var(--spili-data);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--spili-alerte);
  margin: 0 0 10px;
}
.retrait h1 {
  margin: 0 0 20px;
}
.retrait-motif {
  font-size: 17px;
  line-height: 1.8;
  color: var(--spili-texte-doux);
  max-width: 66ch;
  border-left: var(--spili-notation) solid var(--spili-alerte);
  padding-left: 20px;
}
.retrait-appareil {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 44px;
  font-family: var(--spili-data);
  font-size: 12px;
  line-height: 1.7;
  max-width: 700px;
  margin: 34px 0 0;
}
.retrait-appareil dt {
  color: var(--spili-texte);
}
.retrait-appareil dd {
  margin: 0;
  color: var(--spili-texte-doux);
  overflow-wrap: anywhere;
}
.retrait-suite {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

@media (max-width: 560px) {
  .retrait-appareil {
    grid-template-columns: minmax(0, 1fr);
  }
}