/* Plumber Deboucheur — v4-28 (2026-09-16). Charge en dernier.
   Reprend v4-27 et ajoute ce qu'il faut a la page WC reecrite : puces de
   banniere, etapes sur fond clair, texte suivi dans une carte de prix. */

/* ---------- Une seule taille de titre de section sur tout le site ---------- */
.h2,
.a4-h2,
.sec-h2,
.a4-split .a4-h2,
.a4-zone .a4-h2,
.a4-faq__col .a4-h2,
.a4-devis .a4-h2,
.a4-avis__tete .a4-h2,
.ftr__cta h2{
  font-size:clamp(30px,3.7vw,54px);
  line-height:1.06;
  font-weight:800;
  letter-spacing:-.018em;
}
.h3,
.a4-cas__t,
.a4-tarif h3{line-height:1.2}

/* ---------- La ligne d'amorce au-dessus du titre ---------- */
.a4-amorce{
  margin:0 0 6px;
  font-family:"Source Sans 3",system-ui,sans-serif;
  font-size:clamp(17px,1.35vw,22px);
  line-height:1.35;
  font-weight:600;
  font-style:italic;
  letter-spacing:0;
  color:var(--muted);
}
.bg-navy .a4-amorce,
.bg-cream .a4-amorce{color:var(--on-navy-2)}
.a4-amorce + .a4-h2{margin-top:0}

/* ---------- Qui paie ---------- */
.a4-payeurs--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.a4-payeurs .a4-payeur__corps .a4-payeur__txt{
  font-size:var(--t-17);
  line-height:1.62;
  color:var(--body);
}
.a4-payeurs .a4-payeur__corps .a4-payeur__txt b{
  font-family:"Archivo",sans-serif;
  font-weight:800;
  color:var(--navy-deep);
}
.a4-payeurs .a4-payeur__corps .a4-payeur__ex{
  margin-top:auto;
  padding-top:10px;
  font-size:15px;
  line-height:1.45;
  color:var(--muted);
}
@media (max-width:1080px){
  .a4-payeurs--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .a4-payeurs--3{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Banniere : la pastille seule, puis les trois preuves ---------- */
.a4-hero__pill{margin:0}
.a4-hero__cri .a4-surl{background-size:100% .2em}
.a4-hero__points{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.a4-hero__points li{position:relative;padding-left:29px;font-size:var(--t-17);line-height:1.5;color:var(--on-navy)}
.a4-hero__points strong{color:#fff}
.a4-hero__points li::before{content:"";position:absolute;left:0;top:.2em;width:19px;height:19px;border-radius:50%;background:rgba(255,255,255,.16)}
.a4-hero__points li::after{content:"";position:absolute;left:5.5px;top:.52em;width:8px;height:4px;border-left:2px solid var(--sand);border-bottom:2px solid var(--sand);transform:rotate(-45deg)}

/* ---------- Etapes posees sur une section claire ----------
   Les cartes restent blanches, mais il leur faut un filet pour se detacher,
   et le pointille passe en bleu nuit. */
.a4-etapes--clair li{border:1px solid var(--line-3)}
.a4-etapes--clair li:not(:last-child)::after{border-left-color:rgba(11,37,69,.35)}
.a4-texte-apres{margin:4px 0 0;font-size:var(--t-17);line-height:1.6;color:var(--body)}

/* ---------- Carte de prix : un texte suivi au lieu d'une liste ---------- */
.a4-tarif__txt{margin:0;font-size:var(--t-16);line-height:1.62;color:var(--body)}
.a4-tarif--vedette .a4-tarif__txt{color:var(--body)}
.bg-cream .a4-tarif .a4-tarif__txt{color:var(--body)}
.bg-cream .a4-tarif .a4-tarif__txt strong{color:var(--navy-deep)}

/* ---------- Le bloc avis peut redevenir clair ----------
   pdb2_avis( …, 'cream' ) sort la classe avis--clair : depuis que .bg-cream est
   passe en bleu nuit, il faut la remettre en blanc a la main pour garder
   l'alternance des fonds sur une page qui a deja beaucoup de sections foncees. */
.section.avis--clair{background:#fff;color:var(--body)}
.section.avis--clair .a4-h2,
.section.avis--clair h2,
.section.avis--clair h3,
.section.avis--clair .avis-note__score,
.section.avis--clair .avis-note__txt b,
.section.avis--clair .avis-card__qui b{color:var(--navy-deep)}
.section.avis--clair .a4-sstitre,
.section.avis--clair .avis-note__txt span,
.section.avis--clair .avis-note__logo,
.section.avis--clair .avis-card__qui span{color:var(--muted)}
.section.avis--clair .avis-card__txt{color:var(--body)}
.section.avis--clair .btn--ghost{border-color:var(--line-3);color:var(--navy-deep)}
.section.avis--clair .btn--ghost:hover{background:var(--cream);color:var(--navy-deep)}

/* ---------- Note de bas de section ---------- */
.a4-note{margin:clamp(14px,1.4vw,22px) 0 0;font-size:15.5px;line-height:1.6;color:var(--muted)}
.a4-note a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.a4-h2--meteo{margin-top:clamp(34px,3.4vw,60px)}

/* ---------- Photo panoramique dans le bloc image des pages services ------- */
.a4-video--rogne img{transform:scale(1.5);object-position:52% 50%!important}

/* ---------- Bloc « qui vient sonner » : garde pour les autres pages ------- */
.a4-mot{grid-template-columns:minmax(0,.3fr) minmax(0,1fr);align-items:center;gap:clamp(20px,2.4vw,40px)}
.a4-mot__photo{aspect-ratio:3/4;max-height:420px;border-radius:16px}
.a4-mot__photo img{object-position:50% 35%!important}

@media (max-width:900px){
  .a4-mot{grid-template-columns:minmax(0,1fr)}
  .a4-mot__photo{aspect-ratio:16/10;max-height:none}
}