/* Outils de lecture AFW (accueil et articles) : sommaire, partage, retour en haut, recherche dans la FAQ. Mêmes variables que les pages. */

/* Sommaire : colonne collante à gauche de l'article sur grand écran, bloc dépliable sous le chapeau ailleurs */
main > article { position: relative; }
.sommaire-col { position: absolute; top: 0; bottom: 0; right: calc(100% + 28px); width: 196px; }
.sommaire-col .dedans { position: sticky; top: 100px; display: grid; gap: 14px; }
.sommaire ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: s; }
.sommaire li { margin: 0; counter-increment: s; }
.sommaire a { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px; padding: 6px 8px 6px 0; color: var(--gris); text-decoration: none;
  font-size: 14px; line-height: 1.3; border-left: 2px solid transparent; padding-left: 8px; transition: color var(--fondu), border-color var(--fondu); }
.sommaire a::before { content: counter(s, decimal-leading-zero); font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; padding-top: 2px; }
.sommaire a:hover { color: var(--encre); background: none; }
.sommaire a.ici { color: var(--encre); font-weight: 700; border-left-color: var(--encre); background: linear-gradient(90deg, var(--citron), transparent); }
.sommaire-plie { display: none; margin: 0 0 1.6em; border: 1.5px solid var(--encre); background: var(--blanc); }
.sommaire-plie summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; }
.sommaire-plie summary::-webkit-details-marker { display: none; }
.sommaire-plie summary .fl { transition: transform var(--fondu); }
.sommaire-plie[open] summary { border-bottom: 1px solid var(--encre); background: var(--citron); }
.sommaire-plie[open] summary .fl { transform: rotate(180deg); }
.sommaire-plie ol { padding: 8px 6px 10px; }
@media (max-width: 1199px) { .sommaire-col { display: none; } .sommaire-plie { display: block; } }

/* Partage */
.partage { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.partage-bas { max-width: 720px; margin: 24px auto 0; justify-content: space-between; padding: 14px 18px; border: 1.5px solid var(--encre); background: var(--blanc); }
.partage .boutons { display: flex; flex-wrap: wrap; gap: 8px; }
.partage button, .partage a.pt { font: 500 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--encre); background: var(--papier);
  border: 1.5px solid var(--encre); padding: 9px 11px; cursor: pointer; text-decoration: none; transition: background-color var(--fondu); }
.partage button:hover, .partage a.pt:hover { background: var(--citron); }
.partage .copie.fait { background: var(--citron); }

/* Retour en haut */
.haut { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 30; width: 48px; height: 48px;
  border: 1.5px solid var(--encre); background: var(--citron); color: var(--encre); font: 700 20px/1 var(--f-titre); cursor: pointer;
  box-shadow: 4px 4px 0 var(--encre); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity var(--fondu), transform var(--fondu); }
.haut.vu { opacity: 1; transform: none; pointer-events: auto; }
.haut:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--encre); }

/* Recherche dans la FAQ */
.faq-cherche { display: grid; gap: 8px; max-width: 820px; margin-bottom: 18px; }
.faq-cherche .champ { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--encre); background: var(--blanc); padding: 0 14px; }
.faq-cherche .champ:focus-within { box-shadow: 4px 4px 0 var(--encre); background: #FFFDE6; }
.faq-cherche input { flex: 1; min-width: 0; border: 0; background: transparent; font: 600 17px var(--f-titre); padding: 14px 0; color: var(--encre); outline: none; }
.faq-cherche input::placeholder { color: var(--gris); font-weight: 400; }
.faq-cherche .vider { border: 0; background: none; font: 500 11px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; color: var(--gris); }
.faq-rien { display: none; padding: 16px; border: 1.5px dashed var(--encre); background: var(--blanc); }
.faq mark { background: var(--citron); color: inherit; padding: 0 1px; }

@media (prefers-reduced-motion: reduce) { .haut, .sommaire a { transition: none; } }
@media print { .sommaire-col, .sommaire-plie, .partage, .haut { display: none !important; } }

/* En-tête des articles sur téléphone : « Tous les articles » poussait le bouton hors de l'écran ; le logo ramène déjà à l'accueil */
@media (max-width: 560px) { header .retour { display: none; } }
.faq-cherche input::-webkit-search-cancel-button { display: none; }