/* Jetons de couleur de cette page : déclarés dans site.css (thème centralisé). */
.arch-page { padding-block: 2rem 4rem; }
.arch-kicker { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); margin: 0 0 var(--s1); }
.arch-muted { color: var(--ink-faint); font-size: .88em; }
.arch-lead { color: var(--ink-soft); max-width: 46rem; }

/* Sommaire en ligne : passe à la ligne sur mobile. */
.arch-toc { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s5); }
.arch-toc a {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s3);
  border: 1px solid var(--border); border-radius: var(--radius-btn); background: var(--surface);
  color: var(--ink-soft); text-decoration: none; font-size: .9rem;
}
.arch-toc a:hover { border-color: var(--accent); color: var(--accent); }

.arch-section { margin-top: var(--s7); scroll-margin-top: 5rem; }
.arch-section > h2 { margin-bottom: var(--s3); }

/* ---------------------------------------------------------------- filtres */

.arch-filters {
  display: grid; gap: var(--s3); padding: var(--s4);
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius);
}
.arch-filter-row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--s2); align-items: center; }
@media (max-width: 560px) { .arch-filter-row { grid-template-columns: minmax(0, 1fr); gap: var(--s1); } }
.arch-filter-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.arch-filters .chip { min-height: var(--tap); }
.arch-region { max-width: 24rem; }
.arch-count { margin: 0; color: var(--ink-soft); font-size: .92rem; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.arch-reset { min-height: var(--tap); border-radius: var(--radius-btn); border: 1px solid var(--border); cursor: pointer; font: inherit; }

/* ------------------------------------------------------------- statuts */

.arch-status {
  display: inline-flex; align-items: center; padding: .05rem .5rem; border-radius: 999px;
  font-size: .72rem; font-weight: 600; white-space: nowrap; border: 1px solid currentColor;
  background: color-mix(in srgb, currentColor 10%, transparent);
}
.st-certain { color: var(--arch-certain); }
.st-probable { color: var(--arch-probable); }
.st-debattu { color: var(--arch-debattu); }
.st-faux { color: var(--arch-faux); }

.arch-legend { list-style: none; margin: var(--s2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: .85rem; color: var(--ink-soft); }
.arch-legend li { display: inline-flex; align-items: center; gap: var(--s1); }
.arch-dot { width: .8rem; height: .8rem; border-radius: 50%; background: currentColor; display: inline-block; }
.arch-dot-obj { border-radius: 1px; transform: rotate(45deg) scale(.85); color: var(--ink-soft); }

/* ---------------------------------------------------------------- carte */

.arch-map-layout { display: grid; gap: var(--s4); margin-top: var(--s3); align-items: start; }
@media (min-width: 900px) { .arch-map-layout { grid-template-columns: minmax(0, 1fr) 17rem; } }
.arch-map-figure { margin: 0; }
.arch-map {
  display: block; width: 100%; height: auto; max-height: 80vh;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--arch-sea);
}
.arch-map-figure figcaption { font-size: .8rem; color: var(--ink-faint); margin-top: var(--s1); }
.am-sea { fill: var(--arch-sea); }
.am-land { fill: var(--arch-land); stroke: var(--arch-coast); stroke-width: 1; vector-effect: non-scaling-stroke; }
.am-lake { fill: var(--arch-sea); stroke: var(--arch-coast); stroke-width: .8; vector-effect: non-scaling-stroke; }
.am-river { fill: none; stroke: var(--arch-river); stroke-width: 1; vector-effect: non-scaling-stroke; }
.am-pt { cursor: pointer; outline: none; }
.am-hit { fill: transparent; }
.am-mark { fill: currentColor; stroke: var(--surface); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.am-pt:hover .am-mark, .am-pt:focus-visible .am-mark { stroke: var(--ink); stroke-width: 2.5; }
.am-pt.is-selected .am-mark { stroke: var(--ink); stroke-width: 3; }
.am-labels text {
  fill: var(--ink); font-family: var(--font-ui); font-weight: 600; pointer-events: none;
  paint-order: stroke; stroke: var(--arch-land); stroke-width: 3px; stroke-linejoin: round;
}
.arch-map-info {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--s4); font-size: .92rem;
}
.arch-map-info h3 { font-size: 1.1rem; margin: 0 0 var(--s2); }
.arch-map-info p { margin: 0 0 var(--s2); }
.arch-info-kind { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }

.arch-btn {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s4);
  border-radius: var(--radius-btn); border: 1px solid var(--accent); background: var(--surface);
  color: var(--accent); font: inherit; font-size: .9rem; text-decoration: none; cursor: pointer;
}
.arch-btn:hover { background: var(--accent); color: var(--accent-ink); }

/* --------------------------------------------------------------- fiches */

.arch-group { display: grid; gap: var(--s2); margin-bottom: var(--s5); }
.arch-group > h3 { font-size: 1.05rem; margin: var(--s4) 0 var(--s1); }
.arch-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  scroll-margin-top: 5rem;
}
.arch-card[open] { border-color: var(--border-strong); }
.arch-card > summary {
  list-style: none; cursor: pointer; padding: var(--s3) var(--s4); min-height: var(--tap);
  display: grid; gap: 2px; position: relative; padding-right: 2.6rem;
}
.arch-card > summary::-webkit-details-marker { display: none; }
.arch-card > summary::after {
  content: ""; position: absolute; right: var(--s4); top: 50%; width: .55rem; height: .55rem;
  border-right: 2px solid var(--ink-faint); border-bottom: 2px solid var(--ink-faint);
  transform: translateY(-70%) rotate(45deg); transition: transform var(--fast) var(--ease);
}
.arch-card[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.arch-card > summary:hover strong { color: var(--accent); }
.arch-card-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.arch-card-title strong { font-family: var(--font-read); font-size: 1.08rem; }
.arch-card-sub { font-size: .84rem; color: var(--ink-faint); overflow-wrap: anywhere; }
.arch-card-body { padding: 0 var(--s4) var(--s4); border-top: 1px solid var(--border); }
.arch-card-body h4 { font-size: .95rem; margin: var(--s4) 0 var(--s1); }
.arch-card-body p { max-width: 48rem; margin: 0 0 var(--s2); }

.arch-meta { display: grid; gap: var(--s2); margin: var(--s3) 0 0; }
.arch-meta > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--s3); }
@media (max-width: 560px) { .arch-meta > div { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.arch-meta dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); padding-top: .2rem; }
.arch-meta dd { margin: 0; overflow-wrap: anywhere; }
.arch-digs { margin: 0; padding-left: 1.1rem; }

.arch-verdict { display: grid; gap: var(--s2); margin: var(--s4) 0 var(--s2); }
.arch-verdict > div { border-left: 3px solid var(--border-strong); padding: var(--s1) var(--s3); background: var(--bg-alt); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.arch-verdict dt { font-weight: 600; font-size: .86rem; }
.arch-verdict dd { margin: 0; }
.arch-verdict .v-confirme { border-left-color: var(--arch-certain); }
.arch-verdict .v-nuance { border-left-color: var(--arch-probable); }
.arch-verdict .v-silence { border-left-color: var(--ink-faint); }

.arch-links, .arch-books { font-size: .9rem; }
.arch-links span, .arch-books span { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); margin-right: var(--s1); }
.arch-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }

/* -------------------------------------------------------- sept Églises */

.arch-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.arch-route { margin: var(--s4) 0; }
.arch-route-map { display: block; width: 100%; min-width: 600px; max-width: none; height: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.arch-route figcaption { font-size: .8rem; color: var(--ink-faint); margin-top: var(--s1); }
.rt-route { fill: none; stroke: var(--orange-ink); stroke-width: 4; stroke-linejoin: round; }
.rt-back { fill: none; stroke: var(--orange-ink); stroke-width: 2.5; stroke-dasharray: 8 7; }
.rt-sea { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-dasharray: 3 6; }
.rt-km { font-family: var(--font-ui); font-size: 19px; fill: var(--ink-soft); paint-order: stroke; stroke: var(--arch-land); stroke-width: 4px; }
.rt-city circle { fill: var(--accent); stroke: var(--surface); stroke-width: 3; }
.rt-num { font-family: var(--font-ui); font-size: 17px; font-weight: 700; fill: var(--accent-ink); text-anchor: middle; }
.rt-name { font-family: var(--font-ui); font-size: 23px; font-weight: 600; fill: var(--ink); paint-order: stroke; stroke: var(--arch-land); stroke-width: 5px; stroke-linejoin: round; }
.rt-name.is-left { text-anchor: end; }
.rt-patmos circle { fill: var(--blue); }
.rt-patmos .rt-name { stroke: var(--arch-sea); }
.rt-city:hover .rt-name { fill: var(--accent); }

.arch-churches { display: grid; gap: var(--s4); }
@media (min-width: 900px) { .arch-churches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.arch-church { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s4); scroll-margin-top: 5rem; }
.arch-church header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-bottom: var(--s2); }
.arch-church h3 { margin: 0; font-family: var(--font-read); }
.arch-church-num {
  display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: .9rem;
}
.arch-church-city { color: var(--ink-soft); font-size: .92rem; }
.arch-letter { width: 100%; border-collapse: collapse; font-size: .92rem; }
.arch-letter th, .arch-letter td { text-align: left; vertical-align: top; padding: var(--s2) var(--s2) var(--s2) 0; border-top: 1px solid var(--border); }
.arch-letter th { width: 7.5rem; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); font-weight: 600; }
@media (max-width: 480px) {
  .arch-letter th, .arch-letter td { display: block; width: auto; padding-right: 0; }
  .arch-letter td { border-top: 0; padding-top: 0; }
}
.arch-church-more { margin: var(--s2) 0 0; font-size: .9rem; }
.arch-readings { max-width: none; }

/* ---------------------------------------------------------------- frise */

.arch-timeline { display: block; height: auto; max-width: none; font-family: var(--font-ui); }
.tl-axis { stroke: var(--ink-soft); stroke-width: 2; }
.tl-tick { stroke: var(--ink-faint); stroke-width: 1; }
.tl-year { font-size: 12px; fill: var(--ink-faint); text-anchor: middle; }
.tl-ev text { font-size: 12px; fill: var(--ink); }
.tl-ev:hover text, .tl-ev:focus-visible text { fill: var(--accent); text-decoration: underline; }
.tl-stem { stroke: currentColor; stroke-width: 1; opacity: .6; }
.tl-ev circle { fill: currentColor; stroke: var(--bg); stroke-width: 1.5; }
.k-dechiffrement { color: var(--plan-0); }
.k-exploration { color: var(--plan-5); }
.k-fouille { color: var(--plan-2); }
.k-decouverte { color: var(--plan-1); }
.k-controverse { color: var(--plan-3); }
#timelineScroll { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: var(--s2) 0; }

/* ------------------------------------------------------- coupe du tell */

.arch-figure { margin: var(--s4) 0; }
.arch-figure figcaption { font-size: .85rem; color: var(--ink-soft); margin-top: var(--s2); max-width: 48rem; }
.arch-tell { display: block; width: 100%; min-width: 720px; max-width: none; height: auto; font-family: var(--font-ui); }
.tl-l2 { fill: var(--arch-l2); } .tl-l3 { fill: var(--arch-l3); } .tl-l4 { fill: var(--arch-l4); }
.tl-l5 { fill: var(--arch-l5); } .tl-l6 { fill: var(--arch-l6); } .tl-l7 { fill: var(--arch-l7); }
.tl-l8 { fill: var(--arch-l8); } .tl-l9 { fill: var(--arch-l9); } .tl-l10 { fill: var(--arch-l10); }
.tl-rock { fill: var(--arch-rock); }
.tl-ash { fill: var(--arch-ash); }
.tl-wall { fill: var(--arch-stone); }
.tl-glacis { fill: var(--arch-l3); stroke: var(--arch-stone); stroke-width: 1; stroke-dasharray: 3 3; }
.tl-pit { fill: var(--arch-l3); stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 4 3; }
.tl-trench { fill: var(--bg); }
.tl-trench-line { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.tl-outline { fill: none; stroke: var(--ink-soft); stroke-width: 1.5; }
.tl-strata text { font-size: 13px; font-weight: 700; fill: var(--ink); }
.tl-labels text, .tl-notes text, .tl-grid text, .tl-gridnote { font-size: 14px; fill: var(--ink); }
.tl-labels .tl-em { font-weight: 700; }
.tl-labels line, .tl-notes line { stroke: var(--ink-faint); stroke-width: 1; }
.tl-baulk { fill: var(--arch-l3); }
.tl-square { fill: var(--bg); stroke: var(--ink-soft); stroke-width: 1; }
.tl-gridnote { fill: var(--ink-soft); }

/* -------------------------------------------------------------- méthode */

.arch-method { display: grid; gap: var(--s2); }
.arch-method-part { scroll-margin-top: 5rem; }
.arch-method-part h3 { font-size: 1.1rem; margin: var(--s4) 0 var(--s2); }
.arch-method-part p { max-width: 48rem; }

.arch-ages figcaption { margin: 0 0 var(--s3); }
.arch-ages-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.arch-ages-list li {
  display: grid; grid-template-columns: 10rem 19rem minmax(0, 1fr); gap: var(--s1) var(--s3); align-items: center;
}
.arch-age-name { font-weight: 600; }
.arch-age-dates { font-size: .85rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.arch-age-bar { height: .8rem; background: var(--bg-alt); border-radius: 4px; overflow: hidden; position: relative; }
.arch-age-bar > span { display: block; height: 100%; border-radius: 4px; }
/* Barre coupée : deux traits obliques signalent la troncature. */
.arch-age-bar.is-cut::after {
  content: ""; position: absolute; right: 12%; top: -2px; bottom: -2px; width: 6px;
  background: var(--bg); transform: skewX(-25deg);
}
.arch-age-bible { grid-column: 1 / -1; font-size: .88rem; color: var(--ink-soft); }
@media (max-width: 640px) {
  .arch-ages-list li { grid-template-columns: minmax(0, 1fr); }
}