/*
 * La page Règlement intérieur (page-reglement-interieur.php).
 *
 * Un texte de douze pages qu'on CONSULTE : le sommaire des articles à gauche,
 * qui reste sous les yeux en défilant, comme celui des Questions fréquentes ;
 * le texte dans sa carte, à la largeur d'une ligne qui se lit (une ligne de
 * 150 signes, c'est ce que donnait la pleine largeur, fait perdre le début de
 * la suivante).
 *
 * Les articles sont des titres de SECTION, pas de page : un cran sous les
 * rubriques de la FAQ, séparés par un filet, pour que vingt-six titres ne se
 * lisent pas comme vingt-six bannières. Les classes reglement-* sont posées
 * dans le texte par l'éditeur (intertitre d'un alinéa, passage voté mis en
 * avant, numéro d'alinéa) ; sans elles, le texte reste lisible tel quel.
 */

.reglement-page {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  margin-bottom: 56px;
}

/* --- Le sommaire ------------------------------------------------------- */

.reglement-page__sommaire {
  position: sticky;
  top: var(--cnpr-decalage-haut, 110px);
  /* Vingt-six articles ne tiennent pas dans un écran d'ordinateur portable :
     le sommaire défile seul plutôt que de déborder sous le pied de page. */
  max-height: calc(100vh - var(--cnpr-decalage-haut, 110px) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Sur ordinateur, le sommaire est toujours déplié : son intitulé ne sert
   qu'au téléphone, où il se replie. */
.reglement-page__sommaire summary { display: none; }
.reglement-page__sommaire ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 2px solid var(--soleil-eau-2);
}
.reglement-page__sommaire a {
  display: grid;
  grid-template-columns: 2.1em minmax(0, 1fr);
  margin-left: -2px;
  padding: 6px 0 6px 14px;
  border-left: 2px solid transparent;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--soleil-marine);
  text-decoration: none;
}
/* Le préambule n'a pas de numéro : son titre prend toute la ligne. */
.reglement-page__sommaire a > span:only-child { grid-column: 1 / -1; }
.reglement-page__numero {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--soleil-piscine);
}
/* L'article lu en ce moment (posé par js/reglement-interieur.js). */
.reglement-page__sommaire a[aria-current="true"] { border-left-color: var(--soleil-piscine); color: var(--soleil-piscine); }
@media (hover: hover) {
  .reglement-page__sommaire a:hover { border-left-color: var(--soleil-jaune); }
}

/* --- Le texte ---------------------------------------------------------- */

.reglement-page__texte .page-content > * { max-width: 72ch; }

.reglement-page__texte .page-content h2 {
  margin: 28px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--soleil-eau-2);
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.25;
}
.reglement-page__texte .page-content h2:first-child {
  margin-top: 8px;
  padding-top: 0;
  border-top: 0;
}

/* Le numéro d'alinéa, en tête de son paragraphe. */
.reglement-num {
  margin-right: 0.3em;
  font-variant-numeric: tabular-nums;
  color: var(--soleil-piscine);
}

/* L'intertitre d'un alinéa (« 2.4 — Suspension d'accès pour non-paiement »). */
.reglement-page__texte .page-content .reglement-intertitre {
  margin-top: 8px;
  margin-bottom: -6px;
  font-size: 17px;
  color: var(--soleil-marine);
}
/* Là, le numéro et le titre sont liés par le tiret : pas d'écart en plus. */
.reglement-intertitre .reglement-num { margin-right: 0; }

/* Les passages que le texte met lui-même en gras — ceux que l'assemblée a
   votés en propre. Un encadré d'eau claire plutôt qu'un bloc de gras : on les
   repère sans qu'ils écrasent ce qui les entoure. */
.reglement-page__texte .page-content .reglement-fort {
  padding: 12px 16px;
  border-left: 3px solid var(--soleil-piscine);
  border-radius: 0 10px 10px 0;
  background: var(--soleil-eau);
}
.reglement-page__texte .page-content .reglement-fort strong { font-weight: 600; color: var(--soleil-encre); }
.reglement-page__texte .page-content .reglement-fort .reglement-num { font-weight: 700; color: var(--soleil-piscine); }

/* Les listes suivent leur phrase d'introduction sans le grand blanc que
   l'écart du conteneur et la marge du navigateur empilaient. */
.reglement-page__texte .page-content ul {
  margin: -6px 0 0;
  padding-left: 1.4em;
}
.reglement-page__texte .page-content li + li { margin-top: 2px; }

/* --- Téléphone : le sommaire passe en tête, replié --------------------- */

@media (max-width: 960px) {
  .reglement-page { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .reglement-page__sommaire { position: static; max-height: none; overflow: visible; }
  .reglement-page__sommaire summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    list-style: none;
    padding: 14px 2px;
    border-top: 2px solid var(--soleil-eau-2);
    border-bottom: 2px solid var(--soleil-eau-2);
    font-weight: 700;
    color: var(--soleil-marine);
  }
  .reglement-page__sommaire summary::-webkit-details-marker { display: none; }
  .reglement-page__sommaire summary::after { content: "+"; font-family: var(--soleil-titre); font-size: 20px; color: var(--soleil-piscine); }
  .reglement-page__sommaire details[open] summary::after { content: "–"; }
  .reglement-page__sommaire ol { border-left: 0; }
  .reglement-page__sommaire li { border-bottom: 1px solid var(--soleil-eau-2); }
  .reglement-page__sommaire a { margin-left: 0; padding: 11px 2px; border-left: 0; font-size: 15px; }
  .reglement-page__sommaire a[aria-current="true"] { color: var(--soleil-marine); }
}