/* Atlas — composants propres à l’encyclopédie. Encres et familles : base.css. */

/* Fil d’ariane */
.fil { margin-bottom:28px; font:400 11px/1.6 var(--sans); text-transform:uppercase; letter-spacing:.12em; color:var(--ink-soft); }
.fil a { text-decoration:none; border-bottom:1px solid var(--rule); }
.fil a:hover { border-bottom-color:var(--accent-ink); }
.fil span[aria-current] { color:var(--ink); }

.chapo { font:400 20px/1.6 var(--serif); max-width:62ch; margin:0 0 36px; }
.groupe-chapo { color:var(--ink-soft); max-width:62ch; }

/* Sidebar : les fiches de la région courante */
.nav-sous-cat { display:block; margin:14px 0 4px; padding-left:38px; font:400 10px/1.5 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.nav-fiche { grid-template-columns:30px 1fr; padding-left:18px; font-size:12px; counter-increment:fiche; }
.nav-fiche::before { content:counter(fiche,decimal-leading-zero); }
.sidebar { counter-reset:chapter fiche; }
.nav-ressource { counter-increment:none; }
.nav-ressource::before { content:''; }

/* Blocs de la fiche */
.bloc h2:first-child { margin-top:40px; }
.bloc-definition { margin-top:8px; }
.bloc-definition h2 { border-top:none; padding-top:0; }
.bloc-definition p { font:400 22px/1.5 var(--serif); max-width:60ch; }
.bloc-a-quoi-ca-sert ul,
.bloc-les-3-erreurs ul { list-style:none; padding-left:0; max-width:70ch; }
.bloc-a-quoi-ca-sert li,
.bloc-les-3-erreurs li { padding-left:26px; position:relative; }
.bloc-a-quoi-ca-sert li::before,
.bloc-les-3-erreurs li::before { content:''; position:absolute; left:0; top:12px; width:14px; border-top:1px solid var(--ink-soft); }
.bloc-comment-faire ol { counter-reset:etape; list-style:none; padding-left:0; max-width:70ch; }
.bloc-comment-faire li { counter-increment:etape; padding-left:46px; position:relative; margin-bottom:16px; }
.bloc-comment-faire li::before { content:counter(etape,decimal-leading-zero); position:absolute; left:0; top:2px; font:400 12px/1.6 var(--sans); font-variant-numeric:tabular-nums; color:var(--ink-soft); letter-spacing:.08em; }
.bloc-option { border-left:2px solid var(--ink-soft); padding-left:24px; }
.bloc-option h2 { border-top:none; padding-top:0; font-size:25px; }

/* Planche : le schéma */
.planche { margin:36px 0; padding:24px 0; border-block:1px solid var(--rule); }
.planche-svg { display:block; width:100%; height:auto; max-width:640px; margin-inline:auto; }
.planche + .bloc > h2 { border-top:none; padding-top:0; margin-top:36px; }
.planche-legende { margin-top:16px; text-align:center; font:400 11px/1.6 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.pl-rule { fill:none; stroke:var(--rule); stroke-width:1; }
.pl-rule-faint { fill:none; stroke:var(--rule); stroke-width:.5; }
.pl-ink { fill:none; stroke:var(--ink); stroke-width:1.25; }
.pl-ink-thick { fill:none; stroke:var(--ink); stroke-width:3; }
.pl-ink-box { fill:none; stroke:var(--ink); stroke-width:1.25; }
.pl-accent { fill:none; stroke:var(--accent); stroke-width:1.5; }
.pl-head { fill:var(--ink); stroke:none; }
.pl-lab { fill:var(--ink); font:400 13px var(--sans); }
.pl-soft { fill:var(--ink-soft); font:400 11px var(--sans); letter-spacing:.08em; }
.pl-cap { fill:var(--ink); font:700 11px var(--sans); letter-spacing:.14em; text-transform:uppercase; }

/* Voir aussi */
.voir-liste { list-style:none; padding-left:0; max-width:70ch; }
.voir-liste li { display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding:12px 0; border-bottom:1px solid var(--rule); margin-bottom:0; }
.voir-region { font:400 10px/1.5 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); white-space:nowrap; }
.voir-service { border-bottom:none; padding-top:20px; }
.voir-service a { font-weight:700; }

/* Cartouche de relevé */
.releve { max-width:70ch; margin:48px 0 8px; padding:24px 28px; background:var(--paper-2); border:1px solid var(--rule); }
.releve-plate { display:flex; justify-content:space-between; gap:20px; margin-bottom:14px; font:400 10px/1.5 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.releve p { margin-bottom:8px; max-width:56ch; }
.releve p:last-child { margin-bottom:0; }
.releve-lien { font:400 12px/1.6 var(--sans); letter-spacing:.1em; text-transform:uppercase; }

/* Tables des planches : hubs, index, résultats */
.planches, .regions { list-style:none; padding-left:0; margin:20px 0 8px; max-width:none; }
.planches li, .regions li { margin-bottom:0; padding-left:0; }
.planches a, .regions a {
  display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:20px; align-items:baseline;
  padding:16px 4px; border-bottom:1px solid var(--rule); text-decoration:none;
}
.planches a:hover, .regions a:hover { background:var(--paper-2); }
.planche-num { font:400 12px/1.6 var(--sans); font-variant-numeric:tabular-nums; letter-spacing:.1em; color:var(--ink-soft); }
.planche-titre { font:400 20px/1.35 var(--serif); }
.planche-chapo { grid-column:2; font:400 14px/1.6 var(--sans); color:var(--ink-soft); max-width:62ch; }
.planche-type { font:400 10px/1.5 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); text-align:right; white-space:nowrap; }
.regions a { grid-template-rows:auto auto; }
.parcours-liste { max-width:70ch; }

/* Index A–Z */
.index-liste { max-width:74ch; margin:0 0 32px; }
.index-liste dt { display:flex; justify-content:space-between; align-items:baseline; gap:20px; margin-top:20px; font:400 18px/1.4 var(--serif); }
.index-liste dd { margin:4px 0 0; color:var(--ink-soft); max-width:66ch; }

/* Recherche */
.recherche { display:flex; flex-wrap:wrap; align-items:flex-end; gap:16px; max-width:70ch; margin:0 0 36px; }
.recherche label { flex-basis:100%; font:400 10px/1.5 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.recherche input { flex:1 1 280px; min-height:44px; padding:10px 2px; border:none; border-bottom:1px solid var(--ink-soft); background:var(--clear); font:400 18px/1.4 var(--serif); color:var(--ink); }
.recherche input:focus-visible { outline:2px solid var(--accent-ink); outline-offset:3px; }
.recherche button { min-height:44px; padding:10px 22px; border:1px solid var(--ink); background:var(--clear); font:400 11px/1.5 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--ink); cursor:pointer; }
.recherche button:hover { background:var(--ink); color:var(--paper); }
.resultats-compte, .resultats-vide { font:400 11px/1.6 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }

/* Sources et références */
.sources ul { list-style:none; padding-left:0; max-width:74ch; }
.sources li { padding:12px 0; margin-bottom:0; border-bottom:1px solid var(--rule); color:var(--ink-soft); overflow-wrap:anywhere; }
.sources li a { color:var(--ink); font-family:var(--serif); font-size:17px; }
.sources li strong { color:var(--ink); font-weight:700; }

@media (max-width:1100px) { .planche-type { display:none; } }
@media (max-width:768px) {
  .planches a, .regions a { grid-template-columns:40px minmax(0,1fr); gap:14px; }
  .releve { padding:20px; }
  .bloc-option { padding-left:18px; }
}