/* =========================================================
   pages.css — styles des sections de pages internes MTLOC
   (pages matériau + pages villes + page béton/pierre)
   Réutilise les tokens couleur définis dans styles.css :root
   ========================================================= */

/* ---- Intro éditoriale ---- */
.bp-intro { padding: var(--section-py) 0; background: var(--white); }
.bp-intro .container { max-width: 840px; }
.bp-lead { font-size: 1.28rem; line-height: 1.65; color: var(--text); font-weight: 600; margin-bottom: 26px; }
.bp-intro p { font-size: 1.06rem; line-height: 1.85; color: var(--text-light); margin-bottom: 20px; }
.bp-intro p:last-child { margin-bottom: 0; }
.bp-intro p strong { color: var(--blue-dark); font-weight: 700; }

/* ---- Grille "éléments / familles" ---- */
.bp-elements { padding: var(--section-py) 0; background: var(--gray-bg); }
.bp-elements-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 48px; }
.bp-element { display: flex; gap: 18px; background: var(--white); border: 1px solid var(--gray-border); border-radius: 14px; padding: 26px; }
.bp-element-icon { flex-shrink: 0; width: 52px; height: 52px; border-radius: 12px; background: var(--orange-light); color: var(--orange); display: flex; align-items: center; justify-content: center; }
.bp-element h3 { font-size: 1.15rem; color: var(--blue-dark); margin: 0 0 8px; }
.bp-element p { font-size: 0.97rem; line-height: 1.65; color: var(--text-light); margin: 0; }
.bp-weight { display: inline-block; margin-top: 12px; font-size: 0.8rem; font-weight: 700; color: var(--blue); background: var(--gray-light); padding: 4px 11px; border-radius: 20px; letter-spacing: 0.2px; }

/* ---- Processus / étapes ---- */
.bp-steps { padding: var(--section-py) 0; background: var(--white); }
.bp-steps-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; margin-top: 50px; }
.bp-step { text-align: center; }
.bp-step-num { width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%; background: var(--blue-dark); color: var(--white); font-size: 1.35rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.bp-step h4 { font-size: 1.02rem; color: var(--blue-dark); margin: 0 0 8px; }
.bp-step p { font-size: 0.9rem; line-height: 1.55; color: var(--text-light); margin: 0; }

/* ---- Bande matériel (fond sombre) ---- */
.bp-gear { padding: var(--section-py) 0; background: var(--blue-dark); color: var(--white); }
.bp-gear .section-title { color: var(--white); }
.bp-gear .section-label { color: var(--orange); }
.bp-gear .section-subtitle { color: rgba(255,255,255,0.72); }
.bp-gear-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 44px; margin: 44px auto 0; max-width: 920px; }
.bp-gear-item { display: flex; gap: 15px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
.bp-gear-item svg { flex-shrink: 0; color: var(--orange); margin-top: 3px; }
.bp-gear-item strong { display: block; font-size: 1.03rem; margin-bottom: 5px; color: #fff; }
.bp-gear-item span { font-size: 0.94rem; line-height: 1.6; color: rgba(255,255,255,0.75); }

/* ---- Bande "plus grand parc" (fond orange) ---- */
.bp-parc { padding: 74px 0; background: var(--orange); color: var(--white); text-align: center; }
.bp-parc .container { max-width: 760px; }
.bp-parc .bp-parc-kicker { text-transform: uppercase; letter-spacing: 1.5px; font-size: 0.8rem; font-weight: 700; opacity: 0.9; }
.bp-parc h2 { font-size: 2.05rem; margin: 12px 0 18px; color: var(--white); line-height: 1.2; }
.bp-parc p { font-size: 1.12rem; line-height: 1.7; margin: 0; color: rgba(255,255,255,0.96); }

/* ---- FAQ (accordéon) ---- */
.bp-faq { padding: var(--section-py) 0; background: var(--gray-bg); }
.bp-faq-list { max-width: 840px; margin: 46px auto 0; }
.bp-faq-item { background: var(--white); border: 1px solid var(--gray-border); border-radius: 12px; margin-bottom: 14px; overflow: hidden; }
.bp-faq-item summary { cursor: pointer; padding: 22px 24px; font-weight: 700; color: var(--blue-dark); font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.bp-faq-item summary::-webkit-details-marker { display: none; }
.bp-faq-item summary::after { content: "+"; font-size: 1.6rem; line-height: 1; color: var(--orange); font-weight: 400; flex-shrink: 0; }
.bp-faq-item[open] summary::after { content: "−"; }
.bp-faq-answer { padding: 0 24px 24px; color: var(--text-light); line-height: 1.78; font-size: 0.99rem; }

/* ---- Lien "en savoir plus" dans une carte élément (pages villes) ---- */
.bp-element--link { transition: border-color .15s ease, box-shadow .15s ease; }
.bp-element--link:hover { border-color: var(--orange); box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
.bp-more { display: inline-block; margin-top: 14px; color: var(--orange); font-weight: 700; font-size: 0.9rem; text-decoration: none; }
.bp-more:hover { text-decoration: underline; }

/* ---- Bloc texte localisé (pages villes) ---- */
.bp-local { padding: var(--section-py) 0; background: var(--white); }
.bp-local .container { max-width: 840px; }
.bp-local h2 { color: var(--blue-dark); font-size: 1.7rem; margin: 0 0 22px; }
.bp-local p { font-size: 1.04rem; line-height: 1.85; color: var(--text-light); margin-bottom: 18px; }
.bp-local p strong { color: var(--blue-dark); font-weight: 700; }

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .bp-elements-grid { grid-template-columns: 1fr; }
    .bp-steps-grid { grid-template-columns: 1fr; gap: 30px; }
    .bp-gear-grid { grid-template-columns: 1fr; gap: 0; }
    .bp-parc h2 { font-size: 1.55rem; }
    .bp-lead { font-size: 1.15rem; }
    .bp-local h2 { font-size: 1.4rem; }
}