/* =========================================================
   Pages secondaires (métiers, villes, réalisations) — générées par tools/build_pages.py
   S'appuie sur style.css (en-tête, pied de page, boutons, FAQ, galerie, visionneuse)
   ========================================================= */

.subpage { background: var(--paper); }
.subpage [data-reveal] { opacity: 1; transform: none; }
.page { padding: calc(var(--header-h) + 48px) var(--gutter) 0; max-width: 1280px; margin: 0 auto; }

.crumbs { display: flex; flex-wrap: wrap; gap: 6px; color: var(--ink-3); font-size: 11px; margin-bottom: 36px; }
.crumbs a { border-bottom: 1px solid var(--line); }
.crumbs a:hover { color: var(--terra); }

.page-hero { max-width: 900px; margin-bottom: 64px; }
.page-hero__title { margin: 0 0 24px; font-size: clamp(40px, 6.4vw, 92px); line-height: .95; letter-spacing: -.05em; font-weight: 750; font-variation-settings: "opsz" 96; }
.page-hero__title em { color: var(--terra); }
.answer {
  margin: 0 0 28px; padding: 20px 22px; border-left: 3px solid var(--terra); border-radius: 0 16px 16px 0;
  background: var(--paper-2); font-size: clamp(16px, 1.3vw, 18.5px); color: var(--ink); max-width: 760px;
}

.page-cols { display: grid; gap: 40px; margin-bottom: 80px; }
@media (min-width: 1000px) { .page-cols { grid-template-columns: 1.5fr 1fr; gap: 6vw; align-items: start; } .page-facts { position: sticky; top: 110px; } }
.prose { max-width: 720px; }
.prose h2 { margin: 40px 0 14px; font-size: clamp(26px, 2.8vw, 36px); letter-spacing: -.035em; line-height: 1.1; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 16px; color: var(--ink-2); font-size: 17px; }
.prose a { color: var(--terra); border-bottom: 1px solid currentColor; }
.ticks--dark li { color: var(--ink); font-size: 16px; }
.page-facts { margin-top: 0; }

.page-section { margin-bottom: 88px; }
.page-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 18px; }
.page-section__head .page-h2 { margin-bottom: 0; }
.page-h2 { margin: 0 0 22px; font-size: clamp(32px, 4.4vw, 60px); line-height: .95; letter-spacing: -.045em; font-weight: 700; }
.page-h2 em { color: var(--terra); }
.page-section .chapter__link { color: var(--terra); }
.muted { color: var(--ink-3); margin: 0 0 22px; }

.mini-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 800px) { .mini-steps { grid-template-columns: repeat(4, 1fr); } }
.mini-steps li { padding: 24px 22px; border-radius: var(--radius); background: var(--ink); color: var(--paper); }
.mini-steps .mono { color: var(--sun); }
.mini-steps h3 { margin: 10px 0 6px; font-size: 20px; letter-spacing: -.03em; line-height: 1.15; }
.mini-steps p { margin: 0; font-size: 15px; color: rgba(238,232,221,.7); }

.page-grid { columns: 2 150px; }
@media (min-width: 800px) { .page-grid { columns: 4 200px; } }
.page-grid .tile__cap { transform: none; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-weight: 500; transition: background .3s, color .3s; }
.chip:hover, .chip.is-active { background: var(--ink); color: var(--paper); }

.link-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.link-card {
  display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: var(--radius); background: #fff;
  box-shadow: inset 0 0 0 1px var(--line); transition: transform .4s var(--ease), box-shadow .4s;
}
.link-card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1.5px var(--ink); }
.link-card .mono { color: var(--terra); }
.link-card strong { font-size: 21px; letter-spacing: -.03em; line-height: 1.15; }
.link-card__more { margin-top: auto; font-weight: 600; font-size: 14.5px; color: var(--ink-2); }

.cat-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.cat-card { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: #24211d; }
.cat-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.cat-card:hover img { transform: scale(1.06); }
.cat-card > span {
  position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 12px 14px; border-radius: 14px; background: rgba(22,20,17,.8); color: var(--paper);
}
.cat-card strong { font-size: 17px; }
.cat-card .mono { color: var(--sun); font-size: 10.5px; }

.faq-block .faq__list { max-width: 900px; }

.cta-band {
  display: grid; gap: 28px; align-items: end; margin: 0 calc(var(--gutter) * -1); padding: 12vh var(--gutter);
  background: var(--terra); color: var(--paper); border-radius: 40px 40px 0 0;
}
@media (min-width: 900px) { .cta-band { grid-template-columns: 1fr auto; } }
.cta-band .eyebrow { color: rgba(255,255,255,.85); }
.cta-band .eyebrow__dot { background: var(--paper); }
.cta-band .h2 em { color: var(--ink); }
.cta-band__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.cta-band__phone { font-size: clamp(34px, 5vw, 64px); font-weight: 750; letter-spacing: -.05em; line-height: 1; }
.cta-band .btn--primary { --bg: var(--ink); }
.cta-band .btn--primary::before { background: var(--paper); }
.cta-band .btn--primary:hover { color: var(--ink); }
.cta-band__mail { border-bottom: 1px solid rgba(255,255,255,.5); }

.subpage .footer { margin-top: 0; }

@media (max-width: 699px) {
  .page { padding-top: calc(var(--header-h) + 28px); }
  .page-hero { margin-bottom: 44px; }
  .page-hero .hero__ctas .btn { flex: 1 1 auto; }
  .page-section { margin-bottom: 60px; }
  .page-cols { margin-bottom: 56px; }
  .cta-band { border-radius: 28px 28px 0 0; padding: 9vh var(--gutter); }
}