/*
 * CHAT'MALLOW — retouches post-livraison (chargé après dist/css/app-css.css,
 * hors build Vite).
 */

/* ---- Qui suis-je : photos sticky + marge de la 2e photo ---- */
@media (min-width: 1024px) {
  .cm-about { overflow: clip; }
  .cm-about .about-media {
    position: sticky;
    top: calc(var(--nav-height) + 3rem);
    align-self: start;
    margin-bottom: 4rem;
  }
  .cm-about .about-second { right: 0; }
}

/* ---- Contact & Tarifs : formulaire sticky ---- */
@media (min-width: 1024px) {
  .cm-contact-form-col {
    position: sticky;
    top: var(--cm-sticky-top, calc(var(--nav-height) + 2rem));
  }
}

/* ---- Contact & Tarifs : layout mobile ---- */
.cm-contact-grid > * { min-width: 0; }
@media (max-width: 640px) {
  .cm-contact-grid .card { padding: 1.25rem; }
  .cm-contact-grid .price-table th,
  .cm-contact-grid .price-table td { padding: .7rem .75rem; font-size: .95rem; }
  .cm-contact-grid .contact-list li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
}

/* ---- Étapes numérotées en mobile ---- */
@media (max-width: 767px) {
  .step { align-items: center; gap: 1rem; }
  .step-num { font-size: 4rem; line-height: 1; min-width: 3rem; text-align: center; }
  .step-text { padding-top: 0; }
}

/* ---- En-têtes avec silhouette en mobile ---- */
@media (max-width: 1023px) {
  .cm-hero-van h1 { text-wrap: wrap; max-width: none; width: 100%; }
  .cm-hero-van h1 + img,
  .cm-hero-van .hero-in.d2.mt-8 { display: block; margin-inline: auto; }
}