/* -----------------------------------------------------------------------
   Typographie des pages de contenu : statuts, règlement intérieur, codes
   de fonctionnement, points programme, articles, communiqués.

   Ces pages affichent du Markdown converti par GitModel::cook() : on ne
   maîtrise pas le HTML produit, tout est donc stylé depuis les balises.
   Les sélecteurs sont volontairement portés par l'id du conteneur, ce qui
   les rend plus spécifiques que les utilitaires Tailwind que cook()
   injecte encore dans le HTML (et que le cache peut resservir 30 jours).

   Couleurs : --content-accent est utilisé pour du TEXTE et doit rester à
   4.5:1 minimum ; --content-decor ne sert qu'au décor (filets, puces,
   barres) et peut donc garder le violet de marque, qui lui ne passe pas
   en texte. Les deux sont définies par thème dans dark/light/accessibility.
----------------------------------------------------------------------- */

#content,
[id^="content-"] {
    font-size: 1.0625rem;
    line-height: 1.7;
}

/* Longueur de ligne : au-delà de ~70 caractères l'œil perd la ligne
   suivante. On contraint le texte courant, pas les tableaux ni les images. */
#content p,
#content li,
[id^="content-"] p,
[id^="content-"] li {
    max-width: 70ch;
}

/* La justification sans césure creuse des rivières blanches et gêne
   particulièrement les lecteurs dyslexiques. */
#content,
#content p,
[id^="content-"] p {
    text-align: left;
}

/* ------------------------------- Titres ------------------------------ */

/* Beaucoup d'espace avant, peu après : un titre appartient visuellement
   au texte qu'il introduit, pas à celui qui le précède. */
#content :is(h1, h2, h3, h4, h5, h6),
[id^="content-"] :is(h1, h2, h3, h4, h5, h6) {
    color: inherit;
    text-wrap: balance;
    /* l'en-tête du site est fixe : évite que l'ancre du sommaire
       envoie le titre sous la barre de navigation */
    scroll-margin-top: 6rem;
}

#content h1 {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: .01em;
    margin: 2.75rem 0 1rem;
    padding-left: .75rem;
    border-left: .25rem solid var(--content-decor, #9500ff);
}

#content h2 {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: .01em;
    margin: 2.25rem 0 .75rem;
    padding-bottom: .35rem;
    border-bottom: 2px solid var(--content-decor, #9500ff);
}

#content h3 {
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 1.85rem 0 .6rem;
}

#content h4 {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 1.5rem 0 .5rem;
}

/* Niveau le plus fréquent dans le règlement intérieur (« Article 111-1 ») :
   il doit s'attraper à l'œil en balayant la page sans crier. */
#content h5,
#content h6 {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .02em;
    color: var(--content-accent, #c084fc);
    margin: 1.35rem 0 .35rem;
}

#content :is(h1, h2, h3, h4, h5, h6):first-child {
    margin-top: 0;
}

/* ------------------------------ Paragraphes -------------------------- */

#content p,
[id^="content-"] p {
    margin: 0 0 1em;
}

/* Annule l'alinéa hérité : l'aération se fait désormais par les marges,
   cumuler les deux brouille le repérage des débuts de paragraphe. */
#content p.paragraph::first-letter {
    font-size: inherit;
    margin-left: 0;
}

/* -------------------------------- Listes ----------------------------- */

#content :is(ul, ol),
[id^="content-"] :is(ul, ol) {
    margin: 0 0 1em;
    padding-left: 1.6rem;
}

#content ul { list-style-type: disc; }
#content ul ul { list-style-type: circle; }
#content ul ul ul { list-style-type: square; }
#content ol { list-style-type: decimal; }
#content ol ol { list-style-type: lower-alpha; }

#content li,
[id^="content-"] li {
    margin-bottom: .4rem;
    padding-left: .2rem;
}

#content li::marker {
    color: var(--content-decor, #9500ff);
}

/* Listes imbriquées : on resserre, l'indentation porte déjà le niveau. */
#content li > :is(ul, ol) {
    margin-top: .4rem;
    margin-bottom: .2rem;
}

#content li > p {
    margin-bottom: .4rem;
}

/* -------------------------------- Liens ------------------------------ */

#content a,
[id^="content-"] a {
    color: var(--content-accent, #c084fc);
    text-decoration: underline;
    text-underline-offset: .2em;
    text-decoration-thickness: from-font;
}

#content a:hover {
    text-decoration-thickness: 2px;
}

/* Le focus doit rester visible même là où le thème retire les contours. */
#content a:focus-visible,
[id^="content-"] a:focus-visible {
    outline: 3px solid var(--content-accent, #c084fc);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ---------------------------- Citations, filets ---------------------- */

#content blockquote {
    margin: 1.25rem 0;
    padding: .5rem 0 .5rem 1rem;
    border-left: 3px solid var(--content-decor, #9500ff);
    font-style: italic;
}

#content blockquote p:last-child {
    margin-bottom: 0;
}

#content hr {
    margin: 2rem 0;
    border: 0;
    border-top: 1px solid currentColor;
    opacity: .25;
}

/* ------------------------------- Tableaux ---------------------------- */

#content table {
    margin: 1.25rem 0;
    font-size: .9375rem;
}

#content :is(th, td) {
    padding: .5rem .65rem;
    vertical-align: top;
    text-align: left;
}

#content th {
    font-weight: 700;
}

#content tbody tr:nth-child(even) {
    background-color: rgba(127, 127, 127, .12);
}

/* ------------------------------- Divers ------------------------------ */

#content img {
    max-width: 100%;
    height: auto;
    border-radius: .25rem;
    margin: 1rem 0;
}

#content code {
    padding: .1em .35em;
    border-radius: .25rem;
    background-color: rgba(127, 127, 127, .18);
    font-size: .9em;
}

#content pre {
    margin: 1.25rem 0;
    padding: .75rem 1rem;
    border-radius: .25rem;
    overflow-x: auto;
    background-color: rgba(127, 127, 127, .18);
}

#content pre code {
    padding: 0;
    background: none;
}

/* Arrivée depuis le sommaire : signale brièvement la cible, sinon on
   ignore où l'on vient d'atterrir dans un document de 245 articles. */
#content :target {
    background-color: rgba(149, 0, 255, .14);
    box-shadow: -.5rem 0 0 rgba(149, 0, 255, .14), .5rem 0 0 rgba(149, 0, 255, .14);
    border-radius: 2px;
    animation: content-cible 2.5s ease-out 1 forwards;
}

@keyframes content-cible {
    0%, 60% { background-color: rgba(149, 0, 255, .22); }
    100%    { background-color: rgba(149, 0, 255, 0); box-shadow: none; }
}

/* -------------------------------- Sommaire --------------------------- */

#toc ul {
    padding-left: 1.1rem;
}

#toc li {
    margin-bottom: .45rem;
    line-height: 1.4;
}

#toc li::marker {
    color: var(--content-decor, #9500ff);
}

#toc a {
    text-decoration: none;
}

#toc a:hover,
#toc a:focus-visible {
    text-decoration: underline;
    text-underline-offset: .2em;
}

#toc a:focus-visible {
    outline: 3px solid var(--content-accent, #c084fc);
    outline-offset: 2px;
    border-radius: 2px;
}

/* --------------------------- Petits écrans --------------------------- */

@media screen and (max-width: 640px) {
    #content,
    [id^="content-"] {
        font-size: 1rem;
    }

    #content h1 { font-size: 1.5rem; }
    #content h2 { font-size: 1.25rem; }
    #content h3 { font-size: 1.125rem; }
}

/* ---------------------- Préférence de mouvement ---------------------- */

@media (prefers-reduced-motion: reduce) {
    #content :target {
        animation: none;
    }
}