/* Feuille de style partagée pour les sous-pages standalone (services, faq, à propos…) */

:root {
  --creme: #F1EFEA;
  --creme-deep: #E7E3DA;
  --encre: #16212E;
  --bleu: #1F5FAE;
  --bleu-deep: #1A4F92;
  --acier: #34597E;
  --ocre: #D08A2E;
  --gris: #9A9C9B;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--creme); color: var(--encre);
  font-family: "Inter Tight", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
a { color: var(--bleu); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Header — sticky avec logo + nav + tel */
.site-header {
  background: var(--encre); color: var(--creme);
  padding: 18px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  position: sticky; top: 0; z-index: 10;
  border-bottom: 1px solid rgba(241,239,234,0.08);
}
.site-header .brand { font-family: "Archivo", sans-serif; font-weight: 900; letter-spacing: -0.02em; font-size: 20px; color: var(--creme); text-transform: uppercase; }
.site-header .header-right { display: flex; align-items: center; gap: 16px; }
.site-header .header-nav { display: none; gap: 22px; }
@media (min-width: 900px) { .site-header .header-nav { display: flex; } }
.site-header .header-nav a, .site-header .tel-link {
  color: var(--creme);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
}
.site-header .tel-link { padding: 8px 14px; border: 1px solid rgba(241,239,234,0.4); }
.site-header .tel-link:hover { background: var(--creme); color: var(--encre); border-color: var(--creme); text-decoration: none; }

/* Breadcrumb */
.breadcrumb { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(22,33,46,0.55); padding: 24px 28px 0; max-width: 980px; margin: 0 auto; }
.breadcrumb a { color: rgba(22,33,46,0.55); }
.breadcrumb a:hover { color: var(--ocre); text-decoration: none; }
.breadcrumb .sep { color: var(--ocre); margin: 0 8px; }
.breadcrumb .current { color: var(--encre); }

/* Main content */
main.sub-main { max-width: 880px; margin: 0 auto; padding: 24px 28px 96px; }
main.sub-main .eyebrow { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ocre); margin: 24px 0 14px; display: block; }
main.sub-main h1 { font-family: "Archivo", sans-serif; font-weight: 800; font-size: clamp(36px, 5.6vw, 78px); line-height: 0.95; letter-spacing: -0.02em; text-transform: uppercase; margin: 0 0 28px; }
main.sub-main h1 .accent { color: var(--ocre); }
main.sub-main .lead { font-size: 19px; line-height: 1.6; max-width: 700px; margin: 0 0 12px; color: var(--encre); font-weight: 400; }
main.sub-main h2 { font-family: "Archivo", sans-serif; font-weight: 700; font-size: clamp(22px, 2.8vw, 34px); letter-spacing: -0.01em; margin: 56px 0 14px; line-height: 1.05; }
main.sub-main h3 { font-family: "Archivo", sans-serif; font-weight: 700; font-size: 18px; margin: 26px 0 6px; }
main.sub-main p, main.sub-main li { font-size: 16px; line-height: 1.65; max-width: 720px; }
main.sub-main ul { padding-left: 20px; }
main.sub-main address { font-style: normal; line-height: 1.7; font-size: 15px; }
main.sub-main strong { font-weight: 600; }

/* Spec block (specs / chiffres-clés) */
.spec-block {
  display: grid; grid-template-columns: 220px 1fr; gap: 10px 24px;
  font-size: 14px; line-height: 1.6;
  margin: 24px 0 0; padding: 24px;
  border: 1px solid rgba(22,33,46,0.15); background: #fff;
  position: relative;
}
.spec-block::before, .spec-block::after { content: ""; position: absolute; width: 12px; height: 12px; }
.spec-block::before { top: 8px; right: 8px; border-top: 1px solid rgba(22,33,46,0.35); border-right: 1px solid rgba(22,33,46,0.35); }
.spec-block::after { bottom: 8px; left: 8px; border-bottom: 1px solid rgba(22,33,46,0.35); border-left: 1px solid rgba(22,33,46,0.35); }
.spec-block dt { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(22,33,46,0.6); }
.spec-block dd { margin: 0; }
@media (max-width: 640px) {
  .spec-block { grid-template-columns: 1fr; gap: 4px 0; }
  .spec-block dt { margin-top: 12px; }
}

/* FAQ */
.faq-q { font-family: "Archivo", sans-serif; font-weight: 700; font-size: 17px; margin: 26px 0 4px; }

/* CTAs */
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.btn-cta { display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; background: var(--bleu); color: var(--creme); font-family: "Archivo", sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid var(--bleu-deep); transition: background 200ms ease; }
.btn-cta:hover { background: var(--bleu-deep); text-decoration: none; }
.btn-cta-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; background: transparent; color: var(--encre); font-family: "Archivo", sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid var(--encre); transition: background 200ms ease; }
.btn-cta-ghost:hover { background: var(--encre); color: var(--creme); text-decoration: none; }

/* Services connexes — grille */
.related-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px; background: rgba(22,33,46,0.12); border: 1px solid rgba(22,33,46,0.12);
  margin-top: 36px;
}
.related-grid a { display: block; padding: 22px 22px; background: #fff; color: var(--encre); transition: background 200ms ease, color 200ms ease; }
.related-grid a:hover { background: var(--encre); color: var(--creme); text-decoration: none; }
.related-grid .code { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ocre); display: block; margin-bottom: 8px; }
.related-grid .name { font-family: "Archivo", sans-serif; font-weight: 700; font-size: 16px; line-height: 1.2; }

/* Hairline */
.hairline { height: 1px; background: rgba(22,33,46,0.12); margin: 56px 0 0; }

/* Footer */
.site-footer { background: var(--encre); color: var(--creme); padding: 32px 28px; }
.site-footer .inner { max-width: 980px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; align-items: center; }
.site-footer a { color: var(--creme); }
.site-footer .footer-meta { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(241,239,234,0.55); }
.site-footer .footer-nav a { margin-left: 18px; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }
.site-footer .footer-nav a:hover { color: var(--ocre); text-decoration: none; }
@media (max-width: 640px) {
  .site-footer .inner { flex-direction: column; align-items: flex-start; }
  .site-footer .footer-nav a:first-child { margin-left: 0; }
}