/* ═══════════════════════════════════════════════════════════════════════
   Pages éditoriales : FAQ, mentions légales, 404.
   Une colonne de lecture, rien d'autre. Aucune couleur écrite ici : tout
   vient de /css/tokens.css. Les composants communs (.conteneur, .titre-*,
   .surtitre, .bouton, .bouton--discret) restent ceux de /css/site.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* La colonne : ~68 signes par ligne, la mesure d'un livre. */
.editorial {
  max-width: 68ch;
  padding-block: var(--e8) var(--e12);
}

.editorial__tete {
  margin-block-end: var(--e8);
}

.editorial__tete .surtitre {
  margin-block-end: var(--e2);
}

.editorial__intro {
  margin-block-start: var(--e3);
  color: var(--encre-douce);
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* Corps de texte : l'écart entre deux groupes (h2) vaut au moins deux fois
   l'écart à l'intérieur d'un groupe (B5, règle 1:2). */
.editorial h2 {
  margin-block: var(--e8) var(--e2);
}

.editorial h3 {
  margin-block: var(--e4) var(--e1);
  font-family: var(--police-corps);
  font-size: 1.0625rem;
  font-weight: 600;
}

.editorial p,
.editorial li {
  line-height: 1.6;
}

.editorial p + p {
  margin-block-start: var(--e2);
}

.editorial ul,
.editorial ol {
  margin-block: var(--e2) 0;
  padding-inline-start: var(--e3);
}

.editorial li + li {
  margin-block-start: var(--e1);
}

.editorial a:not(.bouton):not(.bouton--discret) {
  color: var(--encre);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Sommaire des mentions légales : 4 entrées, ancres de la page. */
.editorial__sommaire {
  margin-block-end: var(--e6);
}

.editorial__sommaire ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.editorial__sommaire li + li {
  margin: 0;
}

.editorial__sommaire a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.editorial__fiche {
  margin-block-start: var(--e2);
}

.editorial__fiche div {
  display: grid;
  grid-template-columns: minmax(0, 14ch) minmax(0, 1fr);
  gap: var(--e2);
  padding-block: var(--e1);
}

.editorial__fiche dt {
  color: var(--encre-douce);
}

.editorial__fiche dd {
  margin: 0;
  overflow-wrap: anywhere; /* L18 : une adresse longue ne doit pas déborder à 360 px */
}

.editorial__date {
  color: var(--encre-douce);
}

/* ── FAQ : <details> natif. Le navigateur gère l'ouverture au clavier,
   aucun script n'est nécessaire (B8). ── */
.qr {
  border-block-end: 1px solid var(--filet);
}

.qr summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  min-height: 44px;
  padding-block: var(--e2);
  font-weight: 600;
  font-size: 1.0625rem;
  cursor: pointer;
  list-style: none;
}

.qr summary::-webkit-details-marker {
  display: none;
}

/* Le signe plus / moins, annoncé ni lu : le <details> dit déjà son état. */
.qr summary::after {
  content: "+" / "";
  flex: 0 0 auto;
  width: 24px;
  text-align: center;
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 400;
}

.qr[open] summary::after {
  content: "\2212" / "";
}

.qr__reponse {
  padding-block-end: var(--e3);
  color: var(--encre-douce);
}

.groupe + .groupe {
  margin-block-start: var(--e8);
}

/* ── Fin de page : une phrase, puis l'action. ── */
.editorial__fin {
  margin-block-start: var(--e10);
  padding-block-start: var(--e4);
  border-block-start: 2px solid var(--encre);
}

.editorial__fin p {
  margin-block-end: var(--e3);
}

/* ── 404 : les pistes, une par ligne, en cibles pleine largeur. ── */
.pistes {
  margin: var(--e4) 0 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--filet);
}

.pistes li + li {
  margin: 0;
}

.pistes a {
  display: flex;
  align-items: center;
  min-height: 56px;
  border-block-end: 1px solid var(--filet);
  font-weight: 600;
}

.editorial .pistes a {
  text-decoration: none;
}

.editorial .pistes a:hover {
  text-decoration: underline;
}

/* ── Écrits (raccord L15) : /ecrits et les quatre articles chargent cette
   feuille. Même colonne de lecture et même rythme que .editorial. ── */
.ecrits {
  max-width: 68ch;
  border-block-start: 1px solid var(--filet);
}

.ecrits__entree {
  display: grid;
  gap: var(--e1);
  padding-block: var(--e4);
  border-block-end: 1px solid var(--filet);
}

.ecrits__entree .surtitre {
  margin: 0;
}

.ecrits__entree a {
  display: inline-block;
  min-height: 44px;
  text-decoration: none;
}

.ecrits__entree a:hover {
  text-decoration: underline;
}

.ecrits__entree p {
  line-height: 1.6;
}

.ecrits__suite,
.article__suite {
  max-width: 68ch;
  margin-block-start: var(--e8);
  padding-block-start: var(--e4);
  border-block-start: 2px solid var(--encre);
  line-height: 1.6;
}

.ecrits__suite a,
.article a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article {
  padding-block: var(--e8) var(--e12);
}

.article > * {
  max-width: 68ch;
}

.article > h1 {
  margin-block-end: var(--e6);
}

.article h2 {
  margin-block: var(--e8) var(--e2);
  font-size: 1.375rem;
  line-height: 1.3;
}

.article h3 {
  margin-block: var(--e4) var(--e1);
  font-size: 1.0625rem;
  font-weight: 600;
}

.article p,
.article li {
  line-height: 1.6;
}

.article p + p,
.article p + ol,
.article p + ul {
  margin-block-start: var(--e2);
}

.article ol {
  padding-inline-start: var(--e3);
  list-style: decimal;
}

.article ul {
  padding-inline-start: var(--e3);
  list-style: disc;
}

.article li + li {
  margin-block-start: var(--e1);
}

.article blockquote {
  margin-block: var(--e4);
  padding-inline-start: var(--e3);
  border-inline-start: 2px solid var(--encre);
  font-style: italic;
}

/* En bloc défilant : sur mobile, le tableau défile seul au lieu d'élargir la page. */
.article table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  margin-block: var(--e4);
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.article caption {
  padding-block-end: var(--e1);
  color: var(--encre-douce);
  text-align: start;
}

.article th,
.article td {
  padding: var(--e1) var(--e2);
  border-block-end: 1px solid var(--filet);
  text-align: start;
  vertical-align: top;
}