/* ============================================================
   Loi lisible — pages de texte, textes/<slug>/index.html
   Feuille séparée, chargée par ces pages seules. L'accueil et le
   lecteur ne la voient jamais.
   Aucun token défini ici, uniquement ceux de style.css.

   Ces pages sont produites par verif/generer-textes.js. Elles
   existent pour le référencement : leur contenu doit être dans le
   HTML servi au chargement, sans dépendre d'un script.
   ============================================================ */

.fiche-texte { max-width: 1180px; margin: 0 auto; padding: 26px 20px 70px; }

/* ---------- Fil d'ariane ---------- */

.fil {
  font-size: .84rem; color: var(--ink-faint);
  margin: 0 0 26px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
/* Cible tactile de 44 px : un fil d'ariane reste un chemin de navigation,
   il se clique au doigt comme le reste (règle du débordement). */
.fil a {
  color: var(--accent-fonce); display: inline-flex; align-items: center;
  min-height: 44px; padding: 4px 0;
}

/* ---------- Titre ---------- */

.fiche-texte__chapeau {
  margin: 0 0 10px; font-size: .72rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; color: var(--ink-faint);
  line-height: 1.5;
}

.fiche-texte__h1 {
  margin: 0 0 30px; font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  line-height: 1.14; font-weight: 800; letter-spacing: -.028em;
  max-width: 22ch;
}

/* ---------- Corps et fiche ---------- */

.fiche-texte__grille { display: grid; gap: 30px; align-items: start; }
@media (min-width: 900px) {
  .fiche-texte__grille { grid-template-columns: 1.6fr 1fr; gap: 46px; }
}

.fiche-texte__quoi {
  margin: 0 0 34px; font-size: 1.08rem; line-height: 1.7;
  color: var(--ink-soft); max-width: 62ch;
}

.fiche-texte__para {
  margin: 0 0 18px; font-size: .99rem; line-height: 1.7;
  color: var(--ink-soft); max-width: 62ch;
}

.fiche-texte__liste {
  margin: 0 0 20px; padding-left: 22px;
  font-size: .99rem; line-height: 1.7; color: var(--ink-soft); max-width: 62ch;
}
.fiche-texte__liste li { margin-bottom: 6px; }
.fiche-texte__liste a, .fiche-texte__para a { color: var(--accent-fonce); font-weight: 600; }

.fiche-texte__h2 {
  margin: 0 0 12px; font-size: 1.15rem; font-weight: 800; letter-spacing: -.018em;
  padding-top: 20px; border-top: 1px solid var(--line);
}

.fiche-texte__etapes {
  margin: 0 0 24px; padding-left: 22px;
  font-size: .98rem; line-height: 1.68; color: var(--ink-soft); max-width: 60ch;
}
.fiche-texte__etapes li { margin-bottom: 8px; }
.fiche-texte__etapes a { color: var(--accent-fonce); font-weight: 600; }

.fiche-texte__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; }
.fiche-texte__actions .btn { text-decoration: none; }

/* La réserve. Elle dit la limite de la page au moment où on vient d'y lire
   une description : c'est le seul endroit du site où l'app parle en son nom
   d'un texte de loi, et ça doit se voir. */
.fiche-texte__reserve {
  margin: 0; padding: 14px 16px;
  background: var(--surface); border-left: 3px solid var(--line-fort);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .88rem; line-height: 1.6; color: var(--ink-faint); max-width: 62ch;
}

/* ---------- L'encart d'état ----------
   Mêmes formes que l'encart de l'accueil, classes distinctes : les deux
   pages ne chargent pas les mêmes feuilles, et une page de texte doit
   rester lisible si bibliotheque.css disparaît. */

.fiche-texte__encart {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 16px 17px;
}
.fiche-texte__titre {
  margin: 0 0 9px; font-size: .7rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-faint);
}
.fiche-texte__etat {
  margin: 0 0 10px; padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--accent-pale); color: var(--ink);
  font-size: .89rem; line-height: 1.5; font-weight: 700;
}
.fiche-texte__precision {
  margin: -4px 0 10px; font-size: .83rem; line-height: 1.5; color: var(--ink-soft);
}
.fiche-texte__l {
  display: flex; justify-content: space-between; gap: 14px; margin: 0;
  padding: 6px 0; border-top: 1px solid var(--line);
  font-size: .88rem; line-height: 1.45;
}
.fiche-texte__l span { color: var(--ink-faint); flex: 0 0 auto; }
.fiche-texte__l b { color: var(--ink); font-weight: 700; text-align: right; }
.fiche-texte__date {
  margin: 10px 0 0; padding-top: 9px; border-top: 1px solid var(--line);
  font-size: .78rem; line-height: 1.45; color: var(--ink-faint);
}

@media (max-width: 560px) {
  .fiche-texte { padding: 20px 20px 50px; }
  .fiche-texte__h1 { margin-bottom: 22px; }
}