/* ============================================================
   ESPACEMENTS MOBILE & TABLETTE (≤ 1024px) — RÈGLES FIXES
   Toute la respiration verticale mobile/tablette est centralisée ici
   (chargé en dernier). Cf. AGENTS.md « Espacements mobile & tablette ».
   Les marges latérales sont gérées par --cp-gutter (01-settings).
   ============================================================ */
@media (max-width: 1024px) {

  /* 1. Rythme des sections : 56px mobile → 72px tablette */
  .cp-section-padding,
  .cp-stats-section,
  .cp-engagement-section,
  .cp-tools-section,
  .cp-contact-section,
  .cp-deploy-body-section,
  .cp-missions-section,
  .cp-vision-section,
  .cp-antennes-section,
  .cp-about-impact-section {
    padding-top: var(--cp-section-space) !important;
    padding-bottom: var(--cp-section-space) !important;
  }

  .cp-galerie-section {
    padding-top: var(--cp-section-space) !important;
  }

  /* 2. Débuts de section : surtitre → titre 12px, titre → introduction 16px */
  .cp-section-eyebrow,
  .cp-missions-eyebrow,
  .cp-vision-eyebrow,
  .cp-antennes-eyebrow,
  .cp-tools-guide-eyebrow {
    margin-bottom: 0.75rem !important;
  }

  .cp-section-title,
  .cp-missions-title,
  .cp-vision-title,
  .cp-antennes-main-title,
  .cp-tools-guide-title {
    margin-bottom: 1rem !important;
  }

  /* 3. Intérieur des cartes : 8 à 12px entre étiquette, titre et texte */
  .cp-tool-card__tag {
    display: inline-block;
    margin-bottom: 0.6rem !important;
  }

  .cp-event-mini-tag {
    margin-bottom: 0.5rem !important;
  }

  .cp-contact-card__title,
  h3.cp-contact-card__title {
    margin-bottom: 0.6rem !important;
  }

  .cp-mission-pill-title,
  .cp-missions-visual-tag,
  .cp-antennes-badge-box__title {
    margin-bottom: 0.5rem !important;
  }

  .cp-action-card-title {
    margin-bottom: 0.75rem !important;
  }

  .cp-stat-number-wrap {
    margin-bottom: 0.5rem !important;
  }

  .cp-stat-label {
    margin-bottom: 0.6rem !important;
  }

  /* 4. Listes de contacts : 12px entre deux liens (zones tactiles distinctes) */
  .cp-exec-contact,
  .cp-antenne-contacts {
    gap: 0.75rem !important;
  }

  /* 5. En-tête des articles : pastilles → titre 20px, titre → date 32px */
  .cp-page-hero .wp-block-post-terms.cp-page-subtitle {
    margin-bottom: 1.25rem !important;
  }
  /* En-tête d'article : géré pour toutes les tailles dans 06-templates/_single-post.css */
}

/* L'image à la une remonte moins sur mobile : 32px de chevauchement pour
   72px de marge basse du bandeau → toujours ≥ 40px entre le temps de lecture
   et l'image (elle le recouvrait). */
@media (max-width: 640px) {
  .cp-entry-content > .wp-block-post-featured-image {
    margin-top: -2rem !important;
  }
}