/* ══════════════════════════════════════════════════════════════════════
   TRUELLE-SERVICE — habillage du template templates/service.php
   Étend le système truelle.css (composants réutilisés au maximum :
   truelle-heros, truelle-ruban, truelle-chiffres, truelle-damier/tuile,
   truelle-guide/alerte, truelle-faq, truelle-bandeau, avis-card, estimator).
   Ce fichier n'ajoute QUE ce que truelle.css ne fournit pas déjà :
   rythme de sections, prose des blocs LLM, grille de prix en cartes,
   liens de sortie de page, extras de l'estimateur (cases à cocher).
   Racine de classes : .truelle-srv-
   ══════════════════════════════════════════════════════════════════════ */

/* ── Rythme des sections (alternance crème / crème-2, comme la home) ─── */
.truelle-srv-bande { background: var(--tr-creme-2); }

/* ── En-tête de section : réutilise .truelle-avantpropos, ajoute juste
      un repère visuel de bloc de contenu (numérotation discrète) ──────── */
.truelle-srv-lead { color: var(--tr-texte); }

/* ── Prose des blocs LLM (intro_service, description_detaillee,
      prix_indicatifs, quand_faire_appel) ─────────────────────────────── */
.truelle-srv-prose {
  max-width: 760px;
  margin: 0 auto;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--tr-texte);
}
.truelle-srv-prose p { margin: 0 0 18px; }
.truelle-srv-prose p:last-child { margin-bottom: 0; }
.truelle-srv-prose h3, .truelle-srv-prose h4 {
  color: var(--tr-encre);
  font-size: 19px;
  margin: 28px 0 12px;
}
.truelle-srv-prose h3:first-child, .truelle-srv-prose h4:first-child { margin-top: 0; }
.truelle-srv-prose ul, .truelle-srv-prose ol { margin: 0 0 18px; padding-left: 22px; }
.truelle-srv-prose li { margin-bottom: 8px; }
.truelle-srv-prose strong { color: var(--tr-encre); }
.truelle-srv-prose a { font-weight: 700; }

/* ── Hero service : réutilise truelle-heros / truelle-heros-vue tels
      quels ; seule la pastille flottante « stat » est spécifique ──────── */
.truelle-srv-hero-stat .truelle-flottante-picto { background: var(--tr-p-bleu); }

/* ── Grille de prix détaillée (remplace le tableau) ────────────────────
      Cartes blanches, prix en pilule ambrée, note discrète. ─────────── */
.truelle-srv-prix-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 16px;
}
.truelle-srv-prix-carte {
  background: var(--tr-blanc);
  border-radius: var(--tr-r-moyen);
  box-shadow: var(--tr-ombre-douce);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.truelle-srv-prix-nom {
  font-weight: 800;
  color: var(--tr-encre);
  font-size: 15px;
  line-height: 1.35;
}
.truelle-srv-prix-montant {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  background: var(--tr-ambre);
  border: 1px solid var(--tr-ambre-bord);
  color: var(--tr-orange-fonce);
  font-weight: 800;
  font-size: 15px;
  border-radius: var(--tr-r-pilule);
  padding: 5px 16px;
  white-space: nowrap;
}
.truelle-srv-prix-note {
  font-size: 13px;
  color: var(--tr-texte-doux);
  line-height: 1.5;
  margin: 0;
}

/* ── Critères de choix : truelle-damier / truelle-tuile pastel ────────
      + encart d'alerte centré sous la grille ─────────────────────────── */
.truelle-srv-alerte-wrap { max-width: 760px; margin: 34px auto 0; }

/* ── Pour aller plus loin (cluster + métier liés) ──────────────────────
      Grille souple : correcte à 1 ou 2 cartes. ─────────────────────── */
.truelle-srv-liens {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  max-width: 860px;
  margin: 0 auto;
}

/* ── Estimateur : complète les classes de _engine.php absentes de
      truelle.css (cases à cocher « options supplémentaires »). ───────── */
.estimator-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--tr-encre);
  padding: 10px 4px;
  cursor: pointer;
}
.estimator-check input[type="checkbox"] {
  width: 19px; height: 19px;
  accent-color: var(--tr-orange);
  flex: none;
  margin: 0;
}

/* ── Réactif ───────────────────────────────────────────────────────── */
@media (max-width: 639px) {
  .truelle-srv-prix-grille { grid-template-columns: 1fr; }
}