/* ============================================================
   sitemap-plan.css — Plan du site (/sitemap/, version 3.40.0)
   Les grandes sections du site en cartes (explication et liens),
   puis l'index des catégories et de leurs articles, repliable et
   filtrable. Couleurs et rayons de la charte (variables du thème).
   Classes propres (splan-…). Contrastes de 4,5 au moins.
   ============================================================ */

.page-sitemap main { background: var(--schilo-bg-page, #eef0f4); }
.splan { padding: 40px 0 72px; }

/* Teintes des cartes : fond pâle de l'icône, encre (titres, nombres). */
.splan-tone--luc    { --sp-ink: var(--schilo-luc, #0a137e);  --sp-pale: #e2e6fb; }
.splan-tone--marc   { --sp-ink: var(--schilo-marc, #0f490f); --sp-pale: #d0efda; }
.splan-tone--jean   { --sp-ink: var(--schilo-jean, #484204); --sp-pale: #f0ecc0; }
.splan-tone--mat    { --sp-ink: #8a0000;                     --sp-pale: #fce8e8; }
.splan-tone--accent { --sp-ink: var(--schilo-accent-dark, #0e3f88); --sp-pale: var(--schilo-accent-pale, #e2eefb); }
.splan-tone--night  { --sp-ink: var(--schilo-bg-dark, #1e2a3a); --sp-pale: #e5e8ee; }

.splan-block + .splan-block { margin-top: 56px; }
.splan-title { margin: 0 0 6px; font-family: var(--schilo-font-serif); font-weight: 500; font-size: 30px; color: var(--schilo-text-primary, #1a2230); }
.splan-intro { margin: 0 0 20px; max-width: 760px; font-size: 15px; line-height: 1.6; color: var(--schilo-text-secondary, #556070); }

/* ── Les grandes sections ── */
.splan-sections { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.splan-section { display: flex; flex-direction: column; padding: 20px 22px; border-radius: var(--schilo-radius-lg, 14px); background: #fff; border: 1px solid var(--schilo-border, #dde2ea); }
.splan-section__head { display: flex; align-items: center; gap: 12px; }
.splan-section__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: var(--schilo-radius-md, 10px); background: var(--sp-pale); color: var(--sp-ink); font-size: 20px; }
.splan-section h3 { margin: 0; font-family: var(--schilo-font-serif); font-weight: 500; font-size: 21px; color: var(--schilo-text-primary, #1a2230); }
.splan-section h3 a { color: inherit; text-decoration: none; }
.splan-section h3 a { background: linear-gradient(var(--sp-ink), var(--sp-ink)) 0 100% / 0 2px no-repeat; transition: background-size .25s ease, color .18s ease; }
.splan-section h3 a:hover, .splan-section h3 a:focus-visible { color: var(--sp-ink); background-size: 100% 2px; }
.splan-section__text { margin: 10px 0 12px; font-size: 14px; line-height: 1.55; color: var(--schilo-text-secondary, #556070); }
.splan-links { flex: 1; margin: 0; padding: 0; list-style: none; }
.splan-links li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid #edf0f4; font-size: 14px; }
.splan-links a { color: var(--schilo-text-primary, #1a2230); text-decoration: none; }
.splan-more { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--sp-ink) !important; text-decoration: none; }
.splan-more { padding: 6px 12px; margin-left: -12px; border-radius: 99px; transition: background-color .18s ease, gap .18s ease; }
.splan-more:hover, .splan-more:focus-visible { background: var(--sp-pale); gap: 10px; }

.splan-count { flex: none; min-width: 28px; padding: 1px 8px; border-radius: 99px; background: var(--schilo-accent-pale, #e2eefb); color: var(--schilo-accent-dark, #0e3f88); font-size: 12px; font-weight: 700; text-align: center; }

/* Lire la Bible : les tuiles des Évangiles à leurs couleurs (celles du thème) et la bibliothèque. */
.splan-tiles { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.splan-tile { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border-radius: var(--schilo-radius-md, 10px); border: 1px solid var(--t-ink); background: var(--t-bg); color: var(--t-ink) !important; font-size: 14px; font-weight: 600; text-decoration: none; }
.splan-tile i { font-size: 18px; }
.splan-tile--mat   { --t-ink: var(--schilo-mat, #d71f1f);   --t-bg: var(--schilo-mat-bg, #fffaf6); }
.splan-tile--marc  { --t-ink: var(--schilo-marc, #0f490f);  --t-bg: var(--schilo-marc-bg, #effff9); }
.splan-tile--luc   { --t-ink: var(--schilo-luc, #0a137e);   --t-bg: var(--schilo-luc-bg, #f4fffe); }
.splan-tile--jean  { --t-ink: var(--schilo-jean, #484204);  --t-bg: var(--schilo-jean-bg, #fffff1); }
.splan-tile--night { --t-ink: #fff; --t-bg: var(--schilo-bg-dark, #1e2a3a); border-color: var(--schilo-bg-dark, #1e2a3a); }

/* ── Outils de l'index ── */
.splan-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.splan-filter { position: relative; flex: 1 1 280px; min-width: 0; }
.splan-filter i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--schilo-text-secondary, #556070); }
.splan-filter input { width: 100%; min-height: 44px; padding: 0 16px 0 40px; border: 1px solid var(--schilo-border-mid, #c8d0dc); border-radius: 99px; background: #fff; color: var(--schilo-text-primary, #1a2230); font-size: 15px; }
.splan-filter input:focus { outline: 2px solid var(--schilo-accent, #2872d4); outline-offset: 1px; }
.splan-tool { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 1px solid var(--schilo-border-mid, #c8d0dc); border-radius: 99px; background: #fff; color: var(--schilo-text-primary, #1a2230); font-size: 14px; font-weight: 600; cursor: pointer; }
.splan-tool:hover { border-color: var(--schilo-accent, #2872d4); }
.splan-status { flex-basis: 100%; min-height: 20px; margin: 0; font-size: 14px; color: var(--schilo-text-secondary, #556070); }

/* ── Index : branches repliables ── */
.splan-index { display: flex; flex-direction: column; gap: 10px; }
.splan-branch > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; }
.splan-branch > summary::-webkit-details-marker { display: none; }
.splan-branch > summary::before { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s ease; }
.splan-branch[open] > summary::before { transform: rotate(45deg); }
.splan-branch__name { flex: 1; }
.splan-branch > summary:focus-visible { outline: 2px solid var(--schilo-accent, #2872d4); outline-offset: 2px; border-radius: 6px; }

.splan-branch--0 { border-radius: var(--schilo-radius-lg, 14px); background: #fff; border: 1px solid var(--schilo-border, #dde2ea); }
.splan-branch--0 > summary { padding: 16px 20px; font-family: var(--schilo-font-serif); font-size: 19px; color: var(--schilo-text-primary, #1a2230); }
.splan-branch--0 > :not(summary) { margin-left: 20px; margin-right: 20px; }
.splan-branch--0[open] { padding-bottom: 14px; }
.splan-branch--1, .splan-branch--2, .splan-branch--3 { border-left: 2px solid var(--schilo-border, #dde2ea); margin: 6px 0; padding-left: 14px; }
.splan-branch--1 > summary { padding: 8px 0; font-size: 16px; font-weight: 700; color: var(--schilo-text-primary, #1a2230); }
.splan-branch--2 > summary, .splan-branch--3 > summary { padding: 6px 0; font-size: 15px; font-weight: 600; color: #3d4757; }

.splan-misc { margin: 10px 0 4px; font-size: 13px; font-weight: 700; color: var(--schilo-text-secondary, #556070); }
.splan-articles { columns: 2 340px; column-gap: 28px; margin: 4px 0 6px; padding: 0; list-style: none; }
.splan-articles li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 5px 0; break-inside: avoid; font-size: 14px; line-height: 1.45; }
.splan-articles a { color: var(--schilo-text-primary, #1a2230); text-decoration: none; }
.splan-date { font-size: 12px; color: var(--schilo-text-secondary, #556070); }
.splan-new { padding: 1px 7px; border-radius: 99px; background: #fce8e8; color: #8a0000; font-size: 11px; font-weight: 700; }
.splan-articles li[hidden], .splan-branch[hidden] { display: none; }
.splan-articles mark { padding: 0 1px; border-radius: 3px; background: #fff1a8; color: inherit; }


/* Survol d'un lien (sections et index) : toute la ligne se teinte et devient cliquable, une barre de couleur pousse à
   gauche et une flèche glisse à droite ; même effet au clavier. */
.splan-links li, .splan-articles li { position: relative; margin: 0 -10px; padding-left: 10px; padding-right: 30px; border-radius: 8px; transition: background-color .18s ease; }
.splan-links li::before, .splan-articles li::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: var(--sp-ink, var(--schilo-accent, #2872d4)); transform: scaleY(0); transition: transform .18s ease; }
.splan-links li::after, .splan-articles li::after { content: "→"; position: absolute; right: 10px; top: 50%; margin-top: -10px; line-height: 20px; font-weight: 700; color: var(--sp-ink, var(--schilo-accent-dark, #0e3f88)); opacity: 0; transform: translateX(-6px); transition: opacity .18s ease, transform .18s ease; }
.splan-links li a::before, .splan-articles li a::before { content: ""; position: absolute; inset: 0; border-radius: 8px; }
.splan-links li a:focus-visible, .splan-articles li a:focus-visible { outline: none; }
.splan-links li:hover, .splan-links li:focus-within, .splan-articles li:hover, .splan-articles li:focus-within { background: var(--sp-pale, var(--schilo-accent-pale, #e2eefb)); }
.splan-links li:focus-within, .splan-articles li:focus-within { box-shadow: 0 0 0 2px var(--sp-ink, var(--schilo-accent, #2872d4)); }
.splan-links li:hover::before, .splan-links li:focus-within::before, .splan-articles li:hover::before, .splan-articles li:focus-within::before { transform: scaleY(1); }
.splan-links li:hover::after, .splan-links li:focus-within::after, .splan-articles li:hover::after, .splan-articles li:focus-within::after { opacity: 1; transform: translateX(0); }
.splan-links li:hover a, .splan-links li:focus-within a, .splan-articles li:hover a, .splan-articles li:focus-within a { color: var(--sp-ink, var(--schilo-accent-dark, #0e3f88)); text-decoration: none; }
.splan-links li:hover .splan-count, .splan-links li:focus-within .splan-count { background: var(--sp-ink, var(--schilo-accent-dark, #0e3f88)); color: #fff; }
.splan-tile { transition: transform .18s ease, box-shadow .18s ease; }
.splan-tile:hover, .splan-tile:focus-visible { filter: none; text-decoration: none; transform: translateX(4px); box-shadow: -4px 0 0 var(--t-ink) inset, 0 6px 16px rgba(30, 42, 58, .12); }
.splan-tile--night:hover, .splan-tile--night:focus-visible { box-shadow: -4px 0 0 #6ea8fe inset, 0 6px 16px rgba(30, 42, 58, .2); }

/* ── Pour aller plus loin ── */
.splan-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 56px; padding: 28px 32px; border-radius: var(--schilo-radius-lg, 14px); background: var(--schilo-bg-dark, #1e2a3a); }
.splan-cta__title { margin: 0 0 4px; font-size: 19px; font-weight: 600; color: #fff; }
.splan-cta__text { margin: 0; font-size: 14px; color: #c3cbd6; }
.splan-cta__actions { display: flex; flex-wrap: wrap; gap: 10px; max-width: 100%; }
.splan-cta__button { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 18px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .35); color: #fff !important; font-size: 14px; font-weight: 600; text-decoration: none; }
.splan-cta__button--main { background: var(--schilo-accent, #2872d4); border-color: var(--schilo-accent, #2872d4); }
.splan-cta__button:hover { filter: brightness(1.1); }

@media (prefers-reduced-motion: reduce) {
  .splan-branch > summary::before, .splan-links li, .splan-links li::before, .splan-links li::after, .splan-articles li, .splan-articles li::before, .splan-articles li::after, .splan-tile { transition: none; }
}
@media (max-width: 640px) {
  .splan { padding-top: 28px; }
  .splan-title { font-size: 25px; }
  .splan-sections { grid-template-columns: 1fr; }
  .splan-branch--0 > summary { padding: 14px 16px; font-size: 17px; }
  .splan-branch--0 > :not(summary) { margin-left: 14px; margin-right: 14px; }
  .splan-cta { padding: 22px 18px; }
}