/* ═══ Atlas v25 — interface : largeur commune, typographie lisible, cartes, carte du monde, accueil ═══════════
   Chargé après v24.css. Aucune règle ne masque de contenu : uniquement mise en page et lisibilité. */
:root { --v25-max: 1280px; --v25-pad: clamp(16px, 3vw, 32px); }

/* 1. Une seule largeur de contenu : bandeau d'onglets, fil d'Ariane, en-têtes, barres de recherche, grilles */
#app-main > .a21-hub, #app-main > .breadcrumb { max-width: var(--v25-max); margin-left: auto; margin-right: auto; padding-left: var(--v25-pad); padding-right: var(--v25-pad); box-sizing: border-box; }
html:not([data-view="home"]) #app-main > section:not(.hero) { max-width: var(--v25-max); margin-left: auto; margin-right: auto; padding-left: var(--v25-pad); padding-right: var(--v25-pad); box-sizing: border-box; }
html:not([data-view="home"]) #app-main > section > .ctrl-bar, html:not([data-view="home"]) #app-main > section > .alpha-bar,
html:not([data-view="home"]) #app-main > section > .grid, html:not([data-view="home"]) #app-main > section > .atlas-controls,
html:not([data-view="home"]) #app-main > section > #mapview, html:not([data-view="home"]) #app-main > section > .leg-bar { margin-left: 0; margin-right: 0; max-width: none; width: auto; }

/* 2. Bandeau d'onglets du pôle */
.a21-hub { margin-top: 1rem; gap: .55rem; }
.a21-hub-t { font: 700 .74rem var(--font-ui) !important; letter-spacing: .1em; color: var(--gold) !important; }
.a21-hub-tabs { display: flex; flex-wrap: wrap; gap: .4rem; padding-bottom: .8rem; border-bottom: 1px solid var(--border); }
.a21-hub-tabs a { padding: .42rem .9rem; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--aged); font: 600 .86rem var(--font-ui); text-decoration: none; transition: border-color var(--dur), color var(--dur), background var(--dur); }
.a21-hub-tabs a:hover { border-color: var(--gold); color: var(--parch); }
.a21-hub-tabs a.is-on { background: var(--parch); border-color: var(--parch); color: var(--bg); }

/* 3. Typographie : fini les petites capitales espacées en police machine à écrire pour l'information */
.breadcrumb { font: 500 .84rem var(--font-ui) !important; letter-spacing: 0 !important; text-transform: none !important; margin: .9rem auto .2rem !important; color: var(--dim); }
.breadcrumb a { color: var(--gold) !important; }
.sec-lbl { font-family: var(--font-ui) !important; letter-spacing: .12em !important; color: var(--gold) !important; }
.pc-origin { font: 600 .74rem/1.35 var(--font-ui) !important; letter-spacing: .02em !important; text-transform: none !important; color: var(--aged) !important; }
.flt-count, .atlas-stat { font: 500 .85rem var(--font-ui) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--dim); }
.flt-count strong, .atlas-stat strong { color: var(--parch) !important; font-weight: 700; }
.leg-bar { font: 500 .84rem var(--font-ui) !important; letter-spacing: 0 !important; text-transform: none !important; gap: .5rem 1.2rem !important; padding: .8rem 1rem !important; border-radius: 12px !important; }
.leg-it { color: var(--aged); }

/* 4. Barre de recherche et alphabet des catégories */
.ctrl-bar { border-radius: 14px !important; padding: .8rem !important; gap: .6rem !important; background: var(--card) !important; box-shadow: var(--shadow-1); }
.srch-inp { border-radius: 10px !important; height: 44px; font: 400 1rem var(--font-ui) !important; }
.flt-select { border-radius: 10px !important; height: 44px; font: 500 .9rem var(--font-ui) !important; }
.alpha-bar { background: none !important; border: 0 !important; padding: .2rem 0 !important; gap: .3rem !important; }
.alpha-btn { min-width: 32px; height: 32px; border-radius: 8px !important; border: 1px solid var(--border) !important; background: var(--card) !important; color: var(--aged) !important; font: 600 .8rem var(--font-ui) !important; }
.alpha-btn:hover { border-color: var(--gold) !important; color: var(--parch) !important; }
.alpha-btn.active { background: var(--parch) !important; border-color: var(--parch) !important; color: var(--bg) !important; }

/* 5. Cartes de fiches : claires, alignées, sans décor parasite */
#app-main .grid { gap: .9rem !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)) !important; }
.pcard { border-radius: 14px !important; padding: 1rem 1.05rem 1.05rem !important; border: 1px solid var(--border) !important; background: var(--card) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.04) !important; display: flex; flex-direction: column; gap: .3rem; min-height: 0; transition: transform var(--dur) var(--ease), box-shadow var(--dur), border-color var(--dur) !important; }
.pcard::before { display: none !important; }
.pcard::after { height: 3px !important; background: var(--cat-color, var(--gold)) !important; }
.pcard:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--cat-color, var(--gold)) 45%, var(--border)) !important; box-shadow: var(--shadow-2) !important; }
.pc-head { margin-bottom: .2rem; }
.pc-emoji { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; font-size: 1.15rem !important; background: color-mix(in srgb, var(--cat-color, var(--gold)) 12%, transparent); }
.pc-title { font: 700 1.04rem/1.25 var(--font-title) !important; color: var(--parch) !important; margin: .1rem 0 0 !important; }
.pcard:hover .pc-title { color: var(--gold) !important; }
.pc-desc { font: 400 .88rem/1.5 var(--font-ui) !important; color: var(--aged) !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: .25rem 0 0 !important; }
.pagination, .pager { gap: .35rem; }

/* 6. En-têtes de section */
.sec-hd { margin-bottom: 1.4rem !important; }
.sec-ttl { font-size: clamp(1.7rem, 3vw, 2.3rem) !important; }
.sec-desc { font-size: 1.02rem !important; line-height: 1.6 !important; }

/* 7. Accueil : pôles et chiffres clés */
.hubs-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)) !important; gap: .8rem !important; max-width: var(--v25-max); margin: 0 auto; padding: 0 var(--v25-pad); box-sizing: border-box; }
.hub-card { border-radius: 14px !important; padding: 1.1rem 1rem !important; display: flex !important; flex-direction: column; align-items: flex-start !important; text-align: left !important; gap: .25rem; }
.hub-card:hover { transform: translateY(-2px); border-color: var(--gold) !important; box-shadow: var(--shadow-2); }
.hub-icon { width: 40px; height: 40px; display: grid !important; place-items: center; border-radius: 10px; background: var(--chip-bg); font-size: 1.25rem !important; margin-bottom: .3rem; }
.hub-label { font: 700 1rem/1.25 var(--font-title) !important; color: var(--parch) !important; text-align: left !important; }
.hub-count { font: 400 .82rem/1.45 var(--font-ui) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--dim) !important; text-align: left !important; }
.hero-kpis { gap: .6rem !important; }
.hero-kpis .kpi { border-radius: 12px !important; min-width: 110px; }
.hero-kpis .kpi-l { font: 600 .72rem var(--font-ui) !important; letter-spacing: .06em !important; }

/* 8. Carte du monde : contrôles, pastilles de regroupement, légende */
.atlas-controls { border-radius: 14px !important; padding: .9rem 1rem !important; background: var(--card) !important; box-shadow: var(--shadow-1); }
.map-layer-btn { border-radius: 999px !important; font: 600 .8rem var(--font-ui) !important; letter-spacing: 0 !important; text-transform: none !important; padding: .45rem .85rem !important; }
.atlas-filters select, .atlas-filters input { border-radius: 10px !important; height: 40px; font: 500 .88rem var(--font-ui) !important; }
#mapview { border-radius: 16px !important; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-1); }
.v25-cl { display: grid !important; place-items: center; border-radius: 50%; color: #fff; font: 700 12px/1 var(--font-ui); letter-spacing: 0;
  box-shadow: 0 0 0 3px rgba(255,255,255,.85), 0 2px 8px rgba(0,0,0,.25); cursor: pointer; transition: transform .15s; }
.v25-cl span { pointer-events: none; text-shadow: 0 1px 1px rgba(0,0,0,.35); }
.v25-cl:hover { transform: scale(1.08); z-index: 1000 !important; }
/* une seule teinte (bleu ardoise) pour les regroupements : les couleurs restent réservées aux catégories de la légende */
.v25-cl-1 { background: #6b8bb0; } .v25-cl-2 { background: #4a6e98; } .v25-cl-3 { background: #2f5280; font-size: 13px; } .v25-cl-4 { background: #1d3760; font-size: 13px; }
.leaflet-tooltip.v25-cl-tip { font: 400 .8rem/1.45 var(--font-ui); padding: .5rem .7rem; border-radius: 10px; border: 1px solid var(--border); background: var(--card); color: var(--parch); box-shadow: var(--shadow-2); max-width: 260px; white-space: normal; }
.leaflet-tooltip.v25-cl-tip em { color: var(--gold); font-style: normal; font-weight: 600; }
.leaflet-control-zoom, .leaflet-control-layers { border: 1px solid var(--border) !important; border-radius: 10px !important; overflow: hidden; box-shadow: var(--shadow-1) !important; }
.leaflet-container .leaflet-control-zoom a { width: 34px !important; height: 34px !important; line-height: 34px !important; }

@media (max-width: 640px) {
  .a21-hub-tabs a { padding: .38rem .75rem; font-size: .82rem; }
  .pcard { padding: .9rem !important; }
}
@media (prefers-reduced-motion: reduce) { .pcard, .hub-card, .v25-cl { transition: none !important; } .pcard:hover, .hub-card:hover { transform: none; } }

/* 9. Fiches et pagination : libellés lisibles (police d'interface) */
.param-l, .m-tag, .tl-period, .page-btn, .modal figcaption, .modal .img-credit, .modal [class*="credit"] { font-family: var(--font-ui) !important; letter-spacing: .01em !important; }
.param-l { font-size: .74rem !important; font-weight: 700 !important; text-transform: uppercase; color: var(--dim) !important; letter-spacing: .05em !important; }
.page-btn { min-width: 36px; height: 36px; border-radius: 9px !important; font-weight: 600 !important; }
.page-btn.active { background: var(--parch) !important; color: var(--bg) !important; border-color: var(--parch) !important; }
.modal span[style*="monospace"], .modal div[style*="monospace"]:not(.zref-citation-box) { font-family: var(--font-ui) !important; letter-spacing: 0 !important; }

/* 10. Pages génériques (recherche, documentation…) : même largeur que le reste, sauf choix « large » dans les paramètres */
html:not([data-width="large"]):not([data-width="full"]) .a20-page { max-width: var(--v25-max) !important; margin-left: auto !important; margin-right: auto !important; padding-left: var(--v25-pad) !important; padding-right: var(--v25-pad) !important; }
.a20-page-hd h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem) !important; }
.a20-eyebrow { font-family: var(--font-ui) !important; letter-spacing: .12em !important; color: var(--gold) !important; }
.a20-res, .a20-hit { border-radius: 14px !important; }