/* =========================================================
   NREPAIR — Pages intérieures (chrome partagé)
   À charger APRÈS styles.css (réutilise les mêmes tokens)
   ========================================================= */

/* ---------- Nav : état actif ---------- */
.nav__list a[aria-current="page"] { color: var(--jaune-fonce); }
.nav__list a[aria-current="page"]::after {
  content: "";
  display: block;
  height: 3px;
  border-radius: 3px;
  background: var(--jaune);
  margin-top: 4px;
}

/* ---------- Bannière de page ---------- */
.page-hero {
  position: relative;
  overflow: clip;
  background: var(--creme);
  padding-block: 52px 60px;
}
.page-hero__blob {
  position: absolute;
  top: -120px;
  right: -100px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--jaune-clair), transparent 70%);
  z-index: 0;
}
.page-hero__dots {
  position: absolute;
  right: 24px;
  bottom: 18px;
  width: 120px;
  height: 90px;
  background-image: var(--dots);
  background-size: 16px 16px;
  opacity: .5;
  z-index: 0;
}
.page-hero__inner { position: relative; z-index: 1; max-width: 760px; }
.page-hero__title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem);
  letter-spacing: -.02em;
  color: var(--encre);
}
.page-hero__title .mark { color: var(--jaune-fonce); }
.page-hero__lead {
  margin-top: 16px;
  font-size: 1.125rem;
  color: var(--encre-2);
  max-width: 62ch;
}

/* ---------- Fil d'Ariane ---------- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: .875rem;
  color: var(--muted);
  margin-bottom: 18px;
}
.breadcrumb a:hover { color: var(--jaune-fonce); }
.breadcrumb span[aria-current] { color: var(--encre); font-weight: 600; }
.breadcrumb .sep { opacity: .5; }

/* ---------- Encart "plugin" (devis / rdv / boutique) ---------- */
.plugin-slot {
  display: grid;
  place-items: center;
  text-align: center;
  gap: 12px;
  padding: 48px 28px;
  border: 2px dashed var(--jaune);
  border-radius: var(--r-xl);
  background: var(--blanc);
  color: var(--muted);
}
.plugin-slot--dark {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(246, 180, 28, .55);
  color: rgba(255, 255, 255, .72);
}
.plugin-slot__icon { width: 40px; height: 40px; color: var(--jaune-fonce); }
.plugin-slot--dark .plugin-slot__icon { color: var(--jaune); }
.plugin-slot__text { font-weight: 600; color: var(--encre); }
.plugin-slot--dark .plugin-slot__text { color: #fff; }
.plugin-slot__hint { font-size: .875rem; font-style: italic; }

/* ---------- Contenu riche ---------- */
.prose { max-width: 70ch; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: 1.6rem; font-weight: 800; margin-top: 1.6em; }
.prose h3 { font-size: 1.2rem; font-weight: 800; margin-top: 1.4em; }
.prose p, .prose li { color: var(--encre-2); }
.prose ul { display: grid; gap: 10px; }
.prose ul li { position: relative; padding-left: 26px; }
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--jaune);
}
.prose strong { color: var(--encre); }

/* ---------- Bloc 2 colonnes ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.split--media-first .split__media { order: -1; }

/* ---------- Liste à coches ---------- */
.checklist { display: grid; gap: 14px; }
.checklist li { position: relative; padding-left: 36px; color: var(--encre-2); }
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 2px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--jaune-clair);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23E0A013' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4 9-9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.checklist li strong { color: var(--encre); }

/* ---------- Bande CTA ---------- */
.cta-band {
  background: var(--encre);
  border-radius: var(--r-xl);
  padding: clamp(36px, 5vw, 60px);
  text-align: center;
  box-shadow: var(--shadow-md);
}
.cta-band .slogan { color: var(--jaune); }
.cta-band h2 { color: #fff; font-weight: 900; font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); }
.cta-band p { color: rgba(255, 255, 255, .8); margin-top: 12px; }
.cta-band__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }

/* ---------- Tableau de tarifs (liste) ---------- */
.price-table { border-top: 1px solid var(--ligne); }
.price-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--ligne);
}
.price-row__name { font-family: 'Montserrat', sans-serif; font-weight: 700; }
.price-row__lead { flex: 1; border-bottom: 2px dotted #d9d0bd; transform: translateY(-4px); }
.price-row__val { font-family: 'Montserrat', sans-serif; font-weight: 900; color: var(--jaune-fonce); white-space: nowrap; }

/* ---------- Cartes contact / infos ---------- */
.info-card {
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--r-lg);
  padding: 26px;
  box-shadow: var(--shadow-sm);
}
.info-card__icon {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  background: var(--jaune-clair);
  color: var(--jaune-fonce);
  margin-bottom: 14px;
}
.info-card__icon .icon { width: 26px; height: 26px; }
.info-card h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: 6px; }
.info-card p, .info-card a { color: var(--encre-2); }
.info-card a:hover { color: var(--jaune-fonce); }

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; gap: 30px; }
  .split--media-first .split__media { order: 0; }
}