/* ===================================================================
   AF CTA – Styles autonomes (no Casper)
   Markup attendu :
     <section class="af-cta {{layout}} [af-cta--tight|--relaxed|--loose]">
       <div class="af-cta__inner">
         <div class="af-cta__wrap"> ... </div>
       </div>
     </section>
   Layouts : left | right | compact | fullwidth
   Ratios image : .af-cta__img--169 (16:9) | .af-cta__img--1x1 (carré)
   =================================================================== */

/* ===== Spacing vertical (safe) ===== */
.af-cta{
  --af-cta-space-y: 12px;        /* mobile par défaut */
  margin-block: var(--af-cta-space-y);
  margin-inline: auto;
  background: #f5f5f5;
  border-radius: 6px;
  max-width: 1100px;
  overflow: hidden;
}
@media (min-width: 720px){
  .af-cta{ --af-cta-space-y: 18px; } /* desktop par défaut */
}
/* Modificateurs d’espacement */
.af-cta--tight   { --af-cta-space-y: 6px;  }
.af-cta--relaxed { --af-cta-space-y: 16px; }
.af-cta--loose   { --af-cta-space-y: 22px; }

/* ===== Conteneur interne ===== */
.af-cta__inner{
  box-sizing: border-box;
  padding: 16px 20px;            /* valeurs stables → pas de “pop” au resize */
}
@media (min-width: 720px){
  .af-cta__inner{ padding: 16px 24px; }
}

/* ===== Structure ===== */
.af-cta__wrap{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}
/* Mobile: éviter l’espace “fantôme” dû au basis vertical */
.af-cta__body{
  flex: 1 1 auto;                /* ✅ pas de basis 360px en colonne */
  min-height: 0;
  text-align: left;
}
.af-cta__title{ margin: 0 0 .5rem; }
.af-cta__text { margin: 0 0 1rem; }
.af-cta__body > *:last-child{ margin-bottom: 0; }

/* ===== Media ===== */
.af-cta__media{ flex: 0 0 auto; }
/* Desktop/large par défaut : largeur contrôlée, ratio naturel */
.af-cta__img{
  display: block;
  width: clamp(180px, 28vw, 300px);
  height: auto;
  border-radius: 8px;
}
/* Ratios forcés (crop propre) */
.af-cta__img--169{ aspect-ratio: 16 / 9; object-fit: cover; }
.af-cta__img--1x1{ aspect-ratio: 1 / 1;  object-fit: cover; }

/* ===== Bouton ===== */
.af-cta__btn{
  display: inline-block;
  padding: 10px 18px;
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none;
  background: #35434D;
  color: #fff;
}
/* Taille de police explicite + variations */
.af-cta a.af-cta__btn{ font-size: 1.06rem; line-height: 1.2; }
@media (min-width: 720px){
  .af-cta a.af-cta__btn{ font-size: 1.12rem; }
}
.af-cta a.af-cta__btn.af-cta__btn--sm{ font-size: 0.95em; }  /* ~ -5% */
.af-cta a.af-cta__btn.af-cta__btn--lg{ font-size: 1.15em; }  /* ~ +15% */
@media (prefers-reduced-motion:no-preference){
  .af-cta__btn{ transition: filter .2s ease; }
  .af-cta__btn:hover{ filter: brightness(0.95); }
}

/* ===== Layouts (mobile-first) ===== */
.af-cta.left  .af-cta__wrap,
.af-cta.right .af-cta__wrap{ flex-direction: column; }

.af-cta.compact .af-cta__wrap{ justify-content: center; }
.af-cta.compact .af-cta__body{ max-width: 640px; margin: 0 auto; }

/* Fullwidth (image de fond) */
.af-cta.fullwidth .af-cta__wrap--fullwidth{
  --af-cta-overlay: rgba(0,0,0,.5);
  --af-cta-minh: 300px;
  background-image: var(--af-cta-bg);
  background-size: cover;
  background-position: center;
  color: #fff;
  min-height: var(--af-cta-minh);
  display: flex; justify-content: center; align-items: center; text-align: center;
}
.af-cta.fullwidth .af-cta__body--center{
  background: var(--af-cta-overlay);
  padding: 20px;
  border-radius: 8px;
}

/* ===== Mobile overrides (≤719px) ===== */
@media (max-width: 719px){
  /* Image = 90% de la grille, centrée */
  .af-cta__media{ width: 100%; display: flex; justify-content: center; }
  .af-cta__img{
    width: 90%;
    max-width: none;             /* annule le clamp desktop */
    height: auto;
    margin-inline: auto;
  }
}

/* ===== Desktop (≥720px) ===== */
@media (min-width: 720px){
  .af-cta.left  .af-cta__wrap{ flex-direction: row; }
  .af-cta.right .af-cta__wrap{ flex-direction: row-reverse; }
  .af-cta.left  .af-cta__body,
  .af-cta.right .af-cta__body{ flex: 1 1 360px; } /* basis confortable en largeur */
}

/* ===== Option : compresser le bloc suivant en mobile quand CTA est "tight" ===== */
@media (max-width: 719px){
  .af-cta--tight + *{ margin-top: 8px !important; }
}

/* ajoute af-cta--align sur la section */
.af-cta.af-cta--align{
  max-width: var(--container-width);
  margin-inline: auto;
}
.af-cta.af-cta--align .af-cta__inner{
  padding-inline: var(--container-gap);
}


/* ajoute af-cta--flush pour coller au même “rythme” horizontal */
.af-cta.af-cta--flush{
  max-width: min(var(--container-width), calc(100% - 2 * var(--container-gap)));
  margin-inline: auto;
}
.af-cta.af-cta--flush .af-cta__inner{
  padding-inline: var(--container-gap);
}