/* ==========================================================================
   Bloc « Parkings et exterieurs professionnels » (page nettoyage exterieur)
   Chantier 10, 07/10/2026. Classes prefixees pk- ; charge sur cette page
   seulement. Ne redefinit rien de style.css / pages.css : memes variables.
   Visible pour le public « pros » uniquement (data-public-seulement sur la
   section, regle dans proposition-accueil.css).
   ========================================================================== */

/* ---------- tete : titre + texte a gauche, publics vises a droite ---------- */
.pk-tete{display:grid; gap:18px 40px; align-items:end;}
.pk-tete .prose{max-width:none;}
@media (min-width:900px){
  .pk-tete{grid-template-columns:minmax(0,1fr) auto;}
  .pk-tete .prose{max-width:74ch;}
}
.pk-publics{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px;
}
@media (min-width:900px){ .pk-publics{flex-direction:column; align-items:flex-end;} }
.pk-publics li{
  font-weight:700; font-size:14px; color:var(--water-dark);
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:7px 14px; white-space:nowrap;
}

/* ---------- tuiles par type de surface ---------- */
.pk-tuiles{
  list-style:none; margin:28px 0 0; padding:0;
  display:grid; gap:16px;
  grid-template-columns:repeat(4, minmax(0,1fr));
}
@media (max-width:1000px){ .pk-tuiles{grid-template-columns:repeat(2, minmax(0,1fr));} }
@media (max-width:520px){ .pk-tuiles{grid-template-columns:1fr; gap:12px;} }
.pk-tuile{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 20px 22px; box-shadow:var(--shadow);
  border-top:4px solid var(--water);
}
.pk-tuile h3{
  font-family:var(--display); font-weight:500; font-size:19px; line-height:1.2;
  margin:12px 0 6px; color:var(--ink);
}
.pk-tuile p{margin:0; color:var(--ink-soft); font-size:15.5px;}
.pk-icone{
  width:42px; height:42px; border-radius:11px; background:var(--foam);
  display:grid; place-items:center; color:var(--water);
}
.pk-icone svg{width:24px; height:24px;}
/* telephone : tuile en ligne (icone a gauche) pour ne pas allonger la page */
@media (max-width:520px){
  .pk-tuile{
    display:grid; grid-template-columns:42px minmax(0,1fr); gap:2px 14px;
    padding:16px 16px 18px;
  }
  .pk-icone{grid-row:1 / span 2;}
  .pk-tuile h3{margin:0 0 4px; font-size:18px;}
  .pk-tuile p{font-size:15px;}
}

/* ---------- bas : rythme d'intervention + appel a l'action ---------- */
.pk-bas{
  margin-top:20px; display:grid; gap:16px;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
@media (max-width:860px){ .pk-bas{grid-template-columns:1fr;} }

.pk-rythme{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 22px 20px;
}
.pk-rythme-titre,
.pk-appel-titre{
  font-family:var(--display); font-weight:600; font-size:21px; line-height:1.2;
  margin:0 0 14px;
}
.pk-rythme-choix{
  display:grid; gap:12px; grid-template-columns:repeat(2, minmax(0,1fr));
}
@media (max-width:420px){ .pk-rythme-choix{grid-template-columns:1fr;} }
.pk-rythme-choix > div{
  background:var(--paper); border-radius:11px; padding:14px 16px;
  border-left:4px solid var(--spark);
}
.pk-rythme-choix > div + div{border-left-color:var(--rust);}
.pk-rythme-choix p{margin:0; color:var(--ink-soft); font-size:15px;}
.pk-rythme-choix .pk-rythme-nom{
  font-weight:800; color:var(--ink); font-size:16px; margin-bottom:4px;
}
.pk-note{
  margin:14px 0 0; font-size:14.5px; color:var(--ink-soft);
}

.pk-appel{
  background:var(--water-dark); color:var(--paper);
  border-radius:var(--radius); padding:22px;
  display:flex; flex-direction:column; justify-content:center;
}
.pk-appel p{margin:0; color:rgba(244,247,251,0.86); font-size:16px;}
.pk-appel .pk-appel-titre{color:var(--paper); font-size:21px; margin-bottom:8px;}
.pk-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px;}
@media (max-width:480px){
  .pk-actions .btn{width:100%; justify-content:center;}
}