/* Variante « particuliers » du bloc extérieurs de la page haute pression (maquette services) :
   mêmes classes pk-* que le bloc pros, avec trois tuiles au lieu de quatre. */
.pk-tuiles.pk-tuiles--3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
@media (max-width:1000px){ .pk-tuiles.pk-tuiles--3{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:520px){ .pk-tuiles.pk-tuiles--3{ grid-template-columns:1fr; } }
/* la tête du bloc occupe toute la largeur (règle « pleine largeur ») */
.pk-tete .prose{ max-width:none; }

/* ---------- « Combien coûte… » : facteurs du tarif à gauche, carte d'action à droite ---------- */
.cout{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:28px 40px; align-items:start; }
.cout-facteurs{ list-style:none; margin:20px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.cout-facteurs li{
  display:flex; align-items:center; gap:12px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; font-weight:700; color:var(--ink);
}
.cout-facteurs li::before{
  content:'✓'; flex:none; width:28px; height:28px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--foam); color:var(--water); font-weight:800;
}
.cout-carte{ background:var(--ink); color:var(--paper); border-radius:var(--radius); padding:28px 26px; box-shadow:var(--shadow); }
.cout-carte h3{ margin:0 0 10px; font-family:var(--display); font-weight:500; font-size:21px; color:var(--paper); }
.cout-carte p{ margin:0 0 18px; color:rgba(244,247,251,.88); font-size:16px; }
.cout-carte strong{ color:var(--paper); }
.cout-carte .btn{ width:100%; justify-content:center; }
@media (max-width:860px){ .cout{ grid-template-columns:1fr; } }
@media (max-width:520px){ .cout-facteurs{ grid-template-columns:1fr; } }

/* ---------- Carte « particuliers » du bloc extérieur (12/10/2026) : pastilles cliquables ----------
   Un bouton radio par surface (sans JavaScript) : le texte de la surface choisie s'affiche dessous. */
.pkc-carte{background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:26px 28px; display:grid; gap:18px;}
.pkc-tete h2{margin:0 0 10px;}
.pkc-tete h2 em{font-style:normal; color:var(--water);}
.pkc-lede{margin:0; font-size:17px; line-height:1.65; color:var(--ink-soft);}
.pkc-surfaces{position:relative;}
.pkc-radio{position:absolute; opacity:0; pointer-events:none;}
.pkc-onglets{display:flex; flex-wrap:wrap; gap:10px;}
.pkc-onglets label{display:inline-flex; align-items:center; gap:10px; cursor:pointer; background:var(--foam);
  border:2px solid transparent; border-radius:999px; padding:6px 18px 6px 6px; font-weight:800; color:var(--ink);}
.pkc-ico{flex:none; width:34px; height:34px; border-radius:50%; background:#fff; color:var(--water); display:grid; place-items:center;}
.pkc-ico svg{width:20px; height:20px;}
.pkc-panneau{display:none; margin-top:14px; padding:16px 18px; background:var(--paper); border-radius:12px; border-left:4px solid var(--water);}
.pkc-panneau h3{margin:0 0 4px; font-family:var(--display); font-weight:600; font-size:19px;}
.pkc-panneau p{margin:0; color:var(--ink-soft); font-size:16px;}
#pkc0:checked ~ .pkc-onglets label:nth-child(1), #pkc1:checked ~ .pkc-onglets label:nth-child(2), #pkc2:checked ~ .pkc-onglets label:nth-child(3){
  border-color:var(--water); background:#fff; box-shadow:var(--shadow);}
#pkc0:checked ~ .pkc-p0, #pkc1:checked ~ .pkc-p1, #pkc2:checked ~ .pkc-p2{display:block;}
.pkc-radio:focus-visible ~ .pkc-onglets{outline:2px solid var(--ink); outline-offset:4px; border-radius:12px;}
.pkc-ligne{margin:0; padding:12px 16px; border-left:4px solid var(--spark); background:var(--paper); border-radius:0 10px 10px 0; color:var(--ink-soft); font-size:15.5px;}
.pkc-ligne strong{color:var(--ink);}
.pkc-bas{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px; align-items:center;}
.pkc-note{margin:0; flex:1 1 340px; font-size:14.5px; color:var(--ink-soft);}
.pkc-actions{display:flex; flex-wrap:wrap; gap:10px;}
@media (max-width:480px){ .pkc-carte{padding:20px 18px;} .pkc-actions .btn{width:100%; justify-content:center;} }

/* ---------- photo avant/après de l'abri (12/10/2026) : cadre au rapport de la photo, jamais rognée ---------- */
.ext-photo .ext-reveal{ aspect-ratio:1179 / 1460; height:auto; max-width:min(400px, 100%); margin:0 auto; }
.ext-photo .ext-reveal .reveal-layer.layer-dirty,
.ext-photo .ext-reveal .reveal-layer.layer-clean{ background:#e6edf4; }