/* ══════════════════════════════════════════════════════════════════════
   TRUELLE-PROFESSION — habillage du template PROFESSION (page métier)
   Système « truelle » (voir assets/css/truelle.css). Ce fichier ne fait
   qu'ÉTENDRE le système pour les besoins propres à la page métier :
   scission texte/encart urgence, grille de tarifs en cartes, petits
   compléments (badge département, CTA retour cluster, cases à cocher
   de l'estimateur). Tout le reste réutilise les composants existants.
   Préfixe de classes : .truelle-pro-
   ══════════════════════════════════════════════════════════════════════ */

/* ── Intro / prose (blocs LLM) ────────────────────────────────────────── */
.truelle-pro-prose { max-width: 74ch; font-size: 16.5px; }
.truelle-pro-prose p:last-child { margin-bottom: 0; }

/* ── Scission « quand appeler » + encart urgence ──────────────────────── */
.truelle-pro-split {
  display: grid;
  grid-template-columns: 1.5fr .95fr;
  gap: 40px;
  align-items: start;
}
.truelle-pro-urgence {
  position: sticky; top: 24px;
  background: linear-gradient(155deg, var(--tr-p-peche), var(--tr-ambre) 130%);
  border: 1.5px solid var(--tr-ambre-bord);
  border-radius: var(--tr-r-carte);
  padding: 28px 26px;
}
.truelle-pro-urgence-picto {
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--tr-blanc); font-size: 24px;
  box-shadow: 0 6px 14px rgba(31, 36, 48, .08);
  margin-bottom: 16px;
}
.truelle-pro-urgence h3 { font-size: 19px; margin-bottom: 10px; }
.truelle-pro-urgence p { font-size: 14.5px; margin: 0 0 20px; color: #6B4E12; }
.truelle-pro-urgence .truelle-bouton { width: 100%; justify-content: center; padding: 13px 20px; font-size: 14.5px; }

/* ── Grille tarifaire détaillée (cartes, remplace le tableau) ─────────── */
.truelle-pro-tarif-intro { margin-bottom: 34px; }
.truelle-pro-tarif-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* Cartes pastel à rond blanc + chiffre coloré — même langage que les cartes
   « case study » de la maquette (cf. .truelle-chiffre sur la home) */
.truelle-pro-tarif-card {
  border-radius: var(--tr-r-carte);
  padding: 26px 26px 24px;
}
.truelle-pro-tarif-card::before {
  content: '€';
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--tr-blanc);
  box-shadow: 0 6px 14px rgba(31, 36, 48, .08);
  font-size: 20px; font-weight: 800;
  margin-bottom: 14px;
}
.truelle-pro-tarif-card h3 { font-size: 15.5px; margin-bottom: 8px; line-height: 1.3; }
.truelle-pro-tarif-price { font-size: 26px; font-weight: 800; margin-bottom: 8px; letter-spacing: -.02em; line-height: 1.05; }
.truelle-pro-tarif-note { font-size: 13.5px; color: var(--tr-texte); margin: 0; line-height: 1.5; }
.truelle-pro-tarif-card--vert   { background: var(--tr-p-vert); }
.truelle-pro-tarif-card--peche  { background: var(--tr-p-peche); }
.truelle-pro-tarif-card--bleu   { background: var(--tr-p-bleu); }
.truelle-pro-tarif-card--violet { background: var(--tr-p-violet); }
.truelle-pro-tarif-card--vert   .truelle-pro-tarif-price, .truelle-pro-tarif-card--vert::before   { color: var(--tr-vert); }
.truelle-pro-tarif-card--peche  .truelle-pro-tarif-price, .truelle-pro-tarif-card--peche::before  { color: var(--tr-orange-fonce); }
.truelle-pro-tarif-card--bleu   .truelle-pro-tarif-price, .truelle-pro-tarif-card--bleu::before   { color: #2563AC; }
.truelle-pro-tarif-card--violet .truelle-pro-tarif-price, .truelle-pro-tarif-card--violet::before { color: #6D4FC1; }

/* ── Compétences : tuiles en damier compact (réutilise .truelle-tuile) ── */
.truelle-pro-competences { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.truelle-pro-competences .truelle-tuile { cursor: default; }
.truelle-pro-competences .truelle-tuile p { color: var(--tr-encre); font-weight: 700; font-size: 15px; margin: 0; }

/* ── Villes : badge département dans la pastille ──────────────────────── */
.truelle-pro-pastille-cp {
  display: inline-block; margin-left: 8px;
  background: var(--tr-creme); color: var(--tr-texte-doux);
  border-radius: var(--tr-r-pilule);
  font-size: 11.5px; font-weight: 800;
  padding: 2px 9px;
}

/* ── CTA retour vers le cluster parent ────────────────────────────────── */
.truelle-pro-cluster-cta {
  max-width: 640px; margin: 0 auto; text-align: center;
}
.truelle-pro-cluster-cta .truelle-tuile-picto { margin: 0 auto 16px; }
.truelle-pro-cluster-cta .truelle-bouton { margin-top: 20px; }

/* ── Estimateur : cases à cocher des options (non stylées dans truelle.css) ── */
.estimator-check {
  display: flex; align-items: center; gap: 10px;
  background: var(--tr-creme);
  border: 1.5px solid #EADFC8;
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 10px;
  font-size: 14.5px; font-weight: 700; color: var(--tr-encre);
  cursor: pointer;
}
.estimator-check input { width: 18px; height: 18px; accent-color: var(--tr-orange); flex: none; }
.estimator-check:last-child { margin-bottom: 0; }

/* ── Réactif ───────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .truelle-pro-split { grid-template-columns: 1fr; }
  .truelle-pro-urgence { position: static; }
  .truelle-pro-tarif-grid { grid-template-columns: repeat(2, 1fr); }
  .truelle-pro-competences { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .truelle-pro-tarif-grid { grid-template-columns: 1fr; }
  .truelle-pro-competences { grid-template-columns: 1fr; }
}