/*
 * LPJ — feature « sommaire »
 *
 * Servie sur tout article affiché seul, sans condition de contenu. Ce n'est pas un oubli, c'est une
 * décision prise dans init.php et expliquée dans README.md : sur LPJ, aucun titre n'existe avant le
 * rendu des codes courts WPBakery, donc rien de mesurable ne permet de décider, dans l'en-tête, si
 * l'article portera un sommaire.
 *
 * CE QUI REND CETTE DÉCISION SANS COÛT : tous les sélecteurs de ce fichier sont préfixés
 * « lpj-sommaire », y compris celui du point d'arrêt du défilement, qui vise une classe posée par
 * init.php et non un conteneur du thème. Servie à un article sans sommaire, cette feuille n'atteint
 * donc AUCUN élément. Si une règle non préfixée est ajoutée ici un jour, cette phrase devient fausse
 * et le chargement redevient un sujet — c'est exactement l'erreur relevée sur LPE le 2026-08-22, où
 * « html { scroll-behavior: smooth } » dormait dans la feuille d'une feature.
 *
 * Les valeurs d'apparence viennent des réglages de l'extension Easy Table of Contents relevés sur
 * LPJ. Elles sont reportées ici en CSS parce que ces réglages disparaissent avec elle.
 */

/* --------------------------------------------------------------------------
 * Point d'arrêt du défilement
 *
 * 30 px sur LPJ, contre 72 sur LPE : c'est le décalage réglé dans l'extension, pas une valeur
 * choisie. Il arrête le saut 30 px plus haut que la cible au lieu de la coller au bord de la fenêtre.
 *
 * LE SÉLECTEUR VISE UNE CLASSE, PAS UN CONTENEUR. init.php pose « lpj-sommaire-cible » sur l'élément
 * qui porte l'ancre, et depuis le 2026-08-31 c'est TOUJOURS le même : le <span> vide inséré en
 * premier enfant du titre, jamais le titre. C'est le balisage de l'extension, qui portait ici
 * « ez-toc-section » avec ce même décalage de 30 px — le comportement est donc déjà éprouvé sur ce
 * site, y compris le fait qu'un <span> vide en ligne soit une cible de défilement valide.
 *
 * Ne pas remplacer le sélecteur par « .mkdf-post-text-main h2[id] » : il dépendrait du modèle
 * d'article du thème parent et atteindrait des titres que cette feature n'a pas marqués. Le préfixe
 * est ce qui rend nul le coût de la feuille sur un article sans sommaire.
 *
 * LE MOUVEMENT LUI-MÊME N'EST PAS ICI, ET N'EST PAS REPRODUIT. L'extension faisait son défilement
 * doux en JavaScript ; l'équivalent CSS, « html { scroll-behavior: smooth } », porte sur le site
 * entier et ne peut pas être restreint — la propriété doit s'appliquer à l'élément qui défile, quel
 * que soit le lien d'ancre qui déclenche le saut. Le loger dans cette feuille ferait dépendre le
 * comportement de TOUS les liens d'ancre de LPJ de la présence d'un sommaire sur la page affichée.
 * Si le mouvement doux est voulu, il va dans le style.css du thème enfant, servi sans condition, et
 * nulle part ailleurs. Voir README.md, « Les quatre écarts assumés », point 4.
 * -------------------------------------------------------------------------- */

.lpj-sommaire-cible {
  scroll-margin-top: 30px;
}

/* --------------------------------------------------------------------------
 * Le bloc
 *
 * Fond #debabf, bordure blanche : les couleurs réglées dans l'extension sur LPJ.
 *
 * CONTRASTE, À DIRE PLUTÔT QU'À CORRIGER EN SILENCE. Du blanc sur #debabf donne un rapport de
 * contraste d'environ 1,8:1, là où le WCAG AA demande 4,5:1 pour du texte. C'est l'apparence
 * actuelle du site, reproduite telle quelle : la changer serait une décision d'apparence, elle
 * appartient à la cliente. Si elle veut la corriger, ce sont les trois « #ffffff » de ce fichier
 * qu'il faut reprendre, pas le fond.
 *
 * « width: fit-content » ajuste la boîte à son contenu, comme le faisait le « display: table » de la
 * feuille de l'extension (assets/css/screen.css, règle #ez-toc-container, « width: auto »), sans en
 * prendre le modèle de rendu : mêlé à un <summary> en list-item, celui-ci fabrique des boîtes
 * anonymes de cellule et rend le résultat instable. « max-width: 100% » borne la boîte à la largeur
 * du contenu, pour qu'un titre long ne la fasse pas déborder sur mobile.
 *
 * Écart avec LPE, volontaire : la feuille de LPE déclare « width: fit-content » puis « width: 100% »
 * juste après, ce qui annule la première. Cette contradiction n'est pas reportée ici.
 *
 * Marge basse, coins arrondis, ombre portée et padding dissymétrique sont ceux de l'extension. Le
 * padding est bien dissymétrique à l'origine.
 * -------------------------------------------------------------------------- */

.lpj-sommaire {
  width: fit-content;
  max-width: 100%;
  margin: 0 0 1em;
  background: #debabf;
  border: 1px solid #ffffff;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  padding: 10px 20px 10px 10px;
}

/* --------------------------------------------------------------------------
 * Repli et dépli
 *
 * <details> et <summary> natifs, sans « open » : l'état initial est replié, sur mobile comme sur
 * ordinateur, sans media query et sans JavaScript. C'est le réglage de l'extension sur LPJ, où les
 * deux états initiaux, mobile et ordinateur, sont réglés sur « replié ».
 *
 * Le triangle est laissé au navigateur. Le masquer demanderait de le remplacer par un marqueur
 * maison, donc de gérer soi-même l'indication d'état, ce qui est précisément ce que <details> évite.
 *
 * La graisse 500 est celle réglée dans l'extension. Elle est appliquée au titre du bloc ET aux
 * entrées de premier niveau : le relevé ne donne qu'une valeur de graisse, elle vaut donc pour les
 * deux. LPE met 600 sur son titre — ce n'est pas transposé, c'est le réglage de l'autre site.
 * -------------------------------------------------------------------------- */

.lpj-sommaire__entete {
  cursor: pointer;
  list-style-position: inside;
}

.lpj-sommaire__titre {
  display: inline;
  margin: 0;
  color: #ffffff;
  font-size: 100%;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
 * La liste
 *
 * La numérotation vient d'ici, pas du HTML : « counters() » — au pluriel — concatène le compteur de
 * chaque niveau imbriqué avec un point. Sur LPJ, où seuls les h2 sont retenus, il n'y a jamais de
 * niveau imbriqué et la numérotation est donc plate : 1., 2., 3. La forme au pluriel est conservée
 * pour que l'ajout de h3 aux niveaux, dans lpj_enfant_sommaire_reglages(), suffise à obtenir 1.1.
 *
 * « list-style: none » est nécessaire : sans lui le navigateur ajouterait sa propre numérotation
 * d'<ol> par-dessus celle des compteurs.
 *
 * CE QUE LE PARENT POSE SUR LES LISTES, MESURÉ ET NON SUPPOSÉ. BackpackTraveler déclare
 * « ul, ol { list-style-position: inside; margin: 15px 0 } » (assets/css/modules.css, lignes 419 à
 * 423) et ne pose AUCUN « list-style-type » sur les <li> du contenu. La règle ci-dessous, de
 * spécificité 0-1-0, suffit donc à l'emporter. C'est un écart avec LPE, où le parent Inspiro vise
 * « .entry-content ol li » et obligeait à déclarer la règle une seconde fois sur les <li> : ne pas
 * transposer ce commentaire-là ici, la mesure a été refaite sur ce site.
 *
 * La règle sur les <li> est néanmoins conservée, et pour une raison qui n'est pas la même : le CSS
 * du thème Mikado généré depuis ses options, comme celui du Customizer, vit EN BASE DE DONNÉES et
 * n'est lisible nulle part dans le dépôt. Le préfixe « .lpj-sommaire » porte sa spécificité à 0-2-1,
 * au-dessus de ce qu'une règle de ce genre peut viser, sans « important ».
 * -------------------------------------------------------------------------- */

.lpj-sommaire__liste,
.lpj-sommaire__liste ol {
  list-style: none;
  counter-reset: lpj-sommaire-entree;
  margin: 0;
  padding: 0;
}

.lpj-sommaire__liste {
  margin-top: 0.75em;
}

.lpj-sommaire__liste ol {
  margin-left: 1.5em;
}

.lpj-sommaire .lpj-sommaire__liste li {
  list-style: none;
  counter-increment: lpj-sommaire-entree;
  margin: 0;
  padding: 0;
}

.lpj-sommaire__liste a::before {
  content: counters(lpj-sommaire-entree, ".") ". ";
}

/* --------------------------------------------------------------------------
 * Les liens
 *
 * Les cinq états sont déclarés ensemble et de la même couleur, celle réglée dans l'extension : un
 * lien visité en violet par défaut serait un second problème de lisibilité sur ce fond. « :visited »
 * doit être écrit après « :link » pour l'emporter, et « :hover » après les deux — l'ordre de ces
 * lignes n'est pas cosmétique.
 *
 * Le second niveau est à 80 % de la taille du texte, pas d'une graisse particulière : c'est la
 * taille seule qui marque la hiérarchie, l'indentation de la sous-liste faisant le reste. Il est
 * inerte tant que les niveaux retenus se limitent à h2, et conservé pour la même raison que le reste
 * de la hiérarchie.
 * -------------------------------------------------------------------------- */

.lpj-sommaire__liste a:link,
.lpj-sommaire__liste a:visited,
.lpj-sommaire__liste a:hover,
.lpj-sommaire__liste a:focus,
.lpj-sommaire__liste a:active {
  color: #ffffff;
}

.lpj-sommaire__liste > li > a {
  font-size: 100%;
  font-weight: 500;
}

.lpj-sommaire__liste ol > li > a {
  font-size: 80%;
}