/* ==========================================================================
   Page « Dépannage climatisation » — compléments à style.css.
   Chargée uniquement par depannage-climatisation.html.
   ========================================================================== */

/* ---- Hero ---------------------------------------------------------------- */
.dp-hero { padding-block: 2.4rem 2.6rem; }
.dp-hero h1 { font-size: clamp(2.1rem, 7.4vw, 3.6rem); margin-bottom: .8rem; max-width: 18ch; }
.dp-sub { font-size: 1.1rem; line-height: 1.6; max-width: 46ch; margin-bottom: 1.6rem; }
.s-dark .dp-sub { color: #D6CFC1; }
.dp-sub strong { color: var(--gold-lt); font-weight: 600; }

.dp-actions { display: grid; gap: .65rem; max-width: 460px; }
.dp-cta { min-height: 56px; font-size: 1rem; width: 100%; }
.dp-cta svg { flex: none; }
.dp-tel-note { margin: .7rem 0 0; font-size: .86rem; }
.s-dark .dp-tel-note { color: #B9AF9E; }
.dp-tel-note a { color: var(--gold-lt); font-weight: 600; text-decoration: none; white-space: nowrap; }
.dp-tel-note a:hover { text-decoration: underline; }

.dp-proof {
  display: flex; flex-wrap: wrap; gap: .4rem 1.2rem;
  list-style: none; padding: 0; margin: 1.6rem 0 0;
  font-size: .84rem; color: #B9AF9E;
}
.dp-proof li { margin: 0; }
.dp-proof li::before { content: "◆"; color: var(--gold); font-size: .6em; margin-right: .5em; vertical-align: .15em; }
.dp-proof .dp-proof-key { color: var(--gold-lt); font-weight: 600; }

@media (min-width: 760px) {
  .dp-hero { padding-block: 3.6rem 3.8rem; }
  .dp-actions { grid-template-columns: 1fr 1fr; max-width: 620px; }
}

/* ---- Motifs de demande --------------------------------------------------- */
.dp-motifs {
  display: grid; gap: .6rem; grid-template-columns: 1fr;
  list-style: none; padding: 0; margin: 0 0 1.6rem;
}
.dp-motifs li {
  margin: 0; padding: .85rem 1rem;
  background: #fff; border: 1px solid var(--line-lt); border-radius: var(--radius);
  font-weight: 600; font-size: .95rem; color: var(--text);
}
.dp-motifs li span { display: block; font-weight: 400; font-size: .85rem; color: var(--text-2); margin-top: .15rem; }
@media (min-width: 620px) { .dp-motifs { grid-template-columns: 1fr 1fr; } }
@media (min-width: 940px) { .dp-motifs { grid-template-columns: repeat(3, 1fr); } }
.dp-equip { font-size: .92rem; color: var(--text-2); max-width: 70ch; }

/* ---- 3 étapes ------------------------------------------------------------ */
.dp-steps {
  display: grid; gap: 1rem; grid-template-columns: 1fr;
  list-style: none; padding: 0; margin: 0 0 1.8rem; counter-reset: dp;
}
.dp-steps li { margin: 0; padding: 1.2rem 1.2rem 1.2rem 3.6rem; position: relative;
  border: 1px solid var(--line-dk); border-radius: var(--radius); counter-increment: dp; }
.dp-steps li::before {
  content: counter(dp); position: absolute; left: 1.1rem; top: 1.05rem;
  width: 1.8rem; height: 1.8rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold); color: var(--ink); font-weight: 700; font-size: .9rem;
}
.dp-steps h3 { font-size: 1.15rem; margin: 0 0 .35rem; }
.dp-steps p { margin: 0; font-size: .92rem; }
@media (min-width: 860px) { .dp-steps { grid-template-columns: repeat(3, 1fr); } }
.dp-note { font-size: .86rem; max-width: 70ch; }
.s-dark .dp-note { color: #B9AF9E; }

/* ---- Particuliers & professionnels -------------------------------------- */
.dp-duo { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .dp-duo { grid-template-columns: 1fr 1fr; } }
.dp-duo .card h3 { font-size: 1.5rem; }
.dp-tag {
  display: inline-block; margin-bottom: .6rem; padding: .2rem .6rem;
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
  color: var(--gold-ink); border: 1px solid var(--gold-ink); border-radius: 999px;
}

/* ---- Preuves ------------------------------------------------------------- */
.dp-stats { display: grid; gap: 1px; grid-template-columns: 1fr 1fr; background: var(--line-dk);
  border: 1px solid var(--line-dk); border-radius: var(--radius); overflow: hidden; margin-bottom: 1.6rem; }
.dp-stats > div { background: var(--ink); padding: 1.1rem 1rem; text-align: center; }
@media (min-width: 760px) { .dp-stats { grid-template-columns: repeat(4, 1fr); } }
.dp-reasons { max-width: 70ch; margin: 0 auto 1.4rem; }
.dp-reasons li { margin-bottom: .5rem; }
.s-dark .dp-reasons li { color: #C6BEB0; }
.dp-rating { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .3rem .7rem; }
.dp-rating .rating-score { color: var(--gold-lt); }
.s-dark .dp-rating .rating-of { color: #B9AF9E; }
.dp-links { text-align: center; margin-top: 1.2rem; font-size: .92rem; }
.dp-links a { color: var(--gold-lt); }

/* ---- CTA final ----------------------------------------------------------- */
.dp-final { text-align: center; }
.dp-final h2 { font-size: clamp(1.7rem, 5.4vw, 2.6rem); }
.dp-final .dp-actions { margin-inline: auto; }
.dp-nowrap { white-space: nowrap; }

/* ---- Promesse de rappel (astérisque → conditions) ----------------------- */
.dp-promise { font-size: 1rem; line-height: 1.6; max-width: 52ch; margin: -.6rem 0 1.4rem;
  padding: .8rem 1rem; border-left: 2px solid var(--gold); background: rgba(255,255,255,.03); }
.s-dark .dp-promise { color: #D6CFC1; }
.dp-promise strong { color: var(--gold-lt); }
.dp-star { color: var(--gold-lt); text-decoration: none; font-weight: 700; padding: 0 .1em; }
.dp-flash { margin: .8rem 0 0; font-size: .9rem; font-weight: 600; letter-spacing: .01em; }
.s-dark .dp-flash { color: var(--gold-lt); }
.dp-cond { margin: 1.2rem 0 0; font-size: .76rem; line-height: 1.55; max-width: 72ch; }
.s-dark .dp-cond { color: #9C9384; }
.dp-final .dp-cond { margin-inline: auto; }
.dp-step-k { margin: 0 0 .35rem !important; font-size: .7rem !important; letter-spacing: .2em;
  text-transform: uppercase; font-weight: 700; color: var(--gold) !important; }
.dp-final-k { font-size: 1.1rem; font-weight: 600; margin-bottom: .5rem; }
.s-dark .dp-final-k { color: var(--gold-lt); }

/* ---- Réparation (section « en panne ? ») --------------------------------- */
.dp-repair { display: grid; gap: 1.1rem; grid-template-columns: 1fr; margin-top: 2rem; }
@media (min-width: 900px) { .dp-repair { grid-template-columns: repeat(3, 1fr); } }
.dp-repair .card h3 { font-size: 1.3rem; }
.dp-repair .card p { margin-bottom: 0; }

/* ---- Ce que David demande ------------------------------------------------ */
.dp-transmit { max-width: 640px; margin: 0 0 2rem; padding: 1.1rem 1.3rem;
  border: 1px solid var(--line-dk); border-left: 2px solid var(--gold); border-radius: var(--radius); }
.dp-transmit h3 { font-size: 1.15rem; margin: 0 0 .6rem; }
.dp-transmit ul { margin: 0; padding-left: 1.1rem; }
.dp-transmit li { margin-bottom: .35rem; font-size: .93rem; color: #C6BEB0; }
.dp-transmit li strong { color: var(--cream); font-weight: 600; }
.dp-transmit em { font-style: normal; color: var(--gold); }

/* ---- Secteurs d'intervention --------------------------------------------- */
.dp-sectors-note { font-size: .88rem; color: var(--text-2); margin: -1rem 0 1.2rem; max-width: 70ch; }
.dp-sectors { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .dp-sectors { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .dp-sectors { grid-template-columns: repeat(4, 1fr); } }
.dp-sector h3 { font-size: 1.25rem; }
.dp-sector p { margin-bottom: 0; line-height: 1.65; }
.dp-zone-end { margin: 1.8rem 0 1.4rem; max-width: 72ch; color: var(--text-2); }
.dp-zone-actions .btn-outline { min-height: 56px; }
@media (min-width: 760px) { .dp-zone-actions { grid-template-columns: 1fr 1fr; max-width: 620px; } }
#zone .sec-head { max-width: 860px; }

/* ==========================================================================
   Page « Dépannage pompe à chaleur » — compléments (mêmes composants).
   ========================================================================== */
/* ---- Fil d'Ariane --------------------------------------------------------- */
.dp-crumbs { margin: 0 0 1.1rem; font-size: .8rem; }
.dp-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .2rem .5rem; padding: 0; margin: 0; }
.dp-crumbs li { margin: 0; color: #B9AF9E; }
.dp-crumbs li + li::before { content: "›"; margin-right: .5rem; color: var(--gold); }
.dp-crumbs a { color: #D6CFC1; text-decoration: none; }
.dp-crumbs a:hover { color: var(--gold-lt); text-decoration: underline; }
.dp-crumbs [aria-current="page"] { color: var(--gold-lt); }

/* ---- Téléphone dans le texte / CTA final --------------------------------- */
.dp-inline-tel, .dp-final-tel a { color: var(--gold-lt); font-weight: 600; white-space: nowrap; }
.dp-final-tel { margin: 1rem 0 0; font-size: .95rem; }
.s-dark .dp-final-tel { color: #D6CFC1; }

/* ---- Marques -------------------------------------------------------------- */
.dp-brands { margin-top: 2.2rem; }
.dp-brands h3 { font-size: 1.2rem; margin: 0 0 .9rem; }
.dp-brands .brands { justify-content: flex-start; margin-bottom: .9rem; }
.dp-brands p { font-size: .92rem; color: var(--text-2); max-width: 70ch; margin: 0; }

/* ==========================================================================
   Dépannage climatisation (refonte du 12/10) : contact direct d'abord,
   David en option. Ajouts uniquement : aucune règle existante modifiée.
   ========================================================================== */
.dp-suite { margin: .9rem 0 0; font-size: .95rem; max-width: 52ch; }
.s-dark .dp-suite { color: #D6CFC1; }
.dp-david-opt { margin: .7rem 0 0; }
.dp-david-link {
  background: none; border: 0; padding: .35rem 0; cursor: pointer;
  font: inherit; font-size: .88rem; text-decoration: underline; text-underline-offset: 3px;
}
.s-dark .dp-david-link { color: #B9AF9E; }
.s-dark .dp-david-link:hover { color: var(--gold-lt); }
.dp-final .dp-david-opt { text-align: center; }
.dp-david-box {
  max-width: 640px; margin-top: 2rem; padding: 1.2rem 1.3rem;
  border: 1px solid var(--line-dk); border-left: 2px solid var(--gold); border-radius: var(--radius);
}
.dp-david-box h3 { font-size: 1.2rem; margin: 0 0 .5rem; }
.dp-david-box p { margin: 0 0 .6rem; font-size: .93rem; }
.dp-david-box .dp-david-note { font-size: .84rem; }
.s-dark .dp-david-box .dp-david-note { color: #B9AF9E; }
.dp-david-box .btn { margin-top: .4rem; }