/* =========================================================
   NEFTY — pages de service (chargé par service_page.php, après accueil.css)
   Compositions de template/electricite/installation-electrique :
   image | texte, texte | texte, étapes, FAQ, appel à l'action, « voir aussi ».
   ========================================================= */

/* ---------- En-tête de page ---------- */
.page-hero .lead { margin-bottom: 0; }
.page-hero .actions { margin-top: 34px; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; }
.breadcrumb [aria-hidden] { opacity: .5; }
.page-hero .tag { margin-bottom: 14px; }

/* ---------- Compositions de texte ---------- */
.compo { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.compo + .compo { margin-top: 100px; }
.compo .img { min-height: 480px; }
.compo p { margin: 0; }
.compo p + p { margin-top: 14px; }
.compo .lead { font-size: 18px; color: var(--dark); }
.compo.texte-texte { align-items: start; gap: 56px; }
.compo.texte-texte > div { background: #fff; border-radius: 22px; padding: 44px; }
.compo.texte-texte > div:only-child { grid-column: 1 / -1; }
.compo.texte-texte .title { font-size: clamp(26px, 2.6vw, 34px); }
.compo .title { margin-bottom: 18px; }
.compo h3 { margin: 28px 0 10px; font-size: 20px; }
.liste { list-style: none; display: grid; gap: 12px; margin: 22px 0 0; padding: 0; }
.liste li { display: flex; gap: 12px; color: var(--dark); margin: 0; }
.liste li::before { content: "✓"; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; font-size: 12px; font-weight: 700; flex-shrink: 0; color: #fff; }
.compo ol { margin: 22px 0 0; padding-left: 22px; }
.compo mark { background: rgba(238, 115, 44, .16); color: var(--dark); border-radius: 4px; padding: 0 4px; }
.encadre { margin-top: 26px; padding: 20px 22px; border-radius: 14px; background: rgba(238, 115, 44, .08); border-left: 4px solid var(--accent); color: var(--dark); }
.encadre p { margin: 0; }
.compo a { color: var(--accent-d); font-weight: 600; }
.compo .table-wrap, .compo table { margin-top: 22px; }

/* ---------- Étapes ---------- */
.etapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: etape; }
.etape { background: #fff; border-radius: 18px; padding: 30px; position: relative; }
.etape::before { counter-increment: etape; content: counter(etape, decimal-leading-zero); font: 700 38px/1 Sora, sans-serif; color: var(--accent); display: block; margin-bottom: 18px; }
.etape h3 { font-size: 19px; margin-bottom: 8px; }
.etape p { margin: 0; }
.etapes-note { margin: 40px auto 0; max-width: 820px; }
.etapes-note p { margin: 0; }

/* ---------- FAQ : l'accordéon du CMS prend l'habillage de l'accueil ---------- */
.home-faq .faq-accordion { gap: 14px; margin: 0; }
.home-faq .faq-q summary { position: static; padding: 22px 26px; font: 600 17px/1.4 Sora, sans-serif; }
.home-faq .faq-q summary::after { position: static; transform: none; font-size: inherit; line-height: inherit; color: #fff; }
.home-faq .faq-q:not([open]) summary { color: var(--dark); }
.home-faq .faq-q[open] { border-color: var(--dark); }
.home-faq .faq-a { padding: 0 26px 24px; color: #B7C2C8; }
.home-faq .faq-a p { padding: 0; margin: 0 0 .8em; }
.home-faq .faq-a > :last-child { margin-bottom: 0; }
.home-faq .faq-cta { display: none; }

/* ---------- Voir aussi ---------- */
.voisins { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.voisins a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 22px; background: #fff; border: 1px solid var(--couleur-bordure); border-radius: 14px; font: 600 16px/1.4 Sora, sans-serif; color: var(--dark); transition: .2s; }
.voisins a::after { content: "→"; color: var(--accent); }
.voisins a:hover { border-color: var(--accent); color: var(--dark); }
.voir-aussi .tag { margin-bottom: 30px; }

/* Corps éditorial d'un hub ou d'une page sans composition */
.page-texte { padding: var(--espace-section) 0; }

@media (max-width: 1100px) {
  .etapes, .voisins { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  .compo { grid-template-columns: 1fr; gap: 40px; }
  .compo .img { min-height: 320px; }
  .compo.image-texte-mobile .img { order: -1; }
}
@media (max-width: 640px) {
  .etapes, .voisins { grid-template-columns: 1fr; }
  .compo.texte-texte > div { padding: 28px; }
  .compo + .compo { margin-top: 60px; }
}

/* Le corps des hubs et pages simples suit la même largeur de conteneur (1500px) */
.page-texte .wrap-narrow { width: min(1500px, 100% - 32px); }
.page-texte .rich { max-width: none; }
.prestations .tag { margin-bottom: 30px; }
/* Compositions rédigées dans le contenu : listes et encadrés comme dans le gabarit */
.compo + .compo { margin-top: 100px; }