/* ═══════════════════════════════════════════════════════════
   Bannières CTA — présence assumée, contenu centré.
   Une annonce doit se voir : c'est ce qui la distingue de
   l'éditorial, et c'est ce que la loi demande.
   Pas de dégradé : la présence vient du contraste et du volume.
   ═══════════════════════════════════════════════════════════ */

.cta{
  display:block;position:relative;overflow:hidden;text-align:center;
  margin:3.4rem 0;
  border:2px solid var(--terre);
  box-shadow:0 6px 26px rgba(30,30,28,.10);
  transition:transform .22s ease, box-shadow .22s ease;
}
.cta:hover{transform:translateY(-3px);box-shadow:0 14px 38px rgba(30,30,28,.17)}

/* pastille Annonce — discrète mais toujours lisible */
.pub{
  position:absolute;top:0;right:0;z-index:3;
  font-size:.54rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fond);background:var(--terre);padding:.4em .9em .35em;
}
.cta-dark{border-color:var(--anthra)}
.cta-dark .pub{background:var(--anthra);color:var(--fond)}

/* le bouton : c'est lui qu'on doit voir de loin */
.btn{
  display:inline-block;margin-top:.4rem;
  background:var(--anthra);color:#fff;
  font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:1.05em 2.4em;
}
.cta:hover .btn{background:var(--terre-f)}
.btn-or{background:var(--terre-f)}
.btn-sauge{background:#fff;color:var(--anthra)}
.btn-w{background:#fff;color:var(--anthra)}

/* ── B1 : image à gauche, texte centré ── */
.cta1{
  background:var(--sauge-p);padding:2.2rem;
  display:grid;grid-template-columns:190px 1fr;gap:2rem;align-items:center;
}
.cta1 img{aspect-ratio:1;object-fit:cover;width:100%}
.badge{
  display:inline-block;background:var(--sauge);color:#fff;
  font-size:.56rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  padding:.4em .95em;margin-bottom:.9rem;
}
.cta1 .h{font-family:var(--serif);font-size:1.6rem;font-weight:600;line-height:1.2;margin:0 0 .5rem}
.cta1 .s{font-size:.98rem;color:var(--anthra-2);margin:0 0 1.3rem}

/* ── B2 : pile centrée ── */
.cta2{background:#fff;padding:2.4rem 2rem}
.cta2 img{width:170px;aspect-ratio:1;object-fit:cover;margin:0 auto 1.2rem}
.cta2 .h{font-family:var(--serif);font-size:1.45rem;font-weight:600;margin:0 0 1.3rem;line-height:1.25}
.pills{display:flex;gap:1.6rem;flex-wrap:wrap;justify-content:center;margin-bottom:1.5rem}
.pill{
  font-size:1.02rem;font-weight:600;color:var(--anthra);
  border-top:2px solid var(--dore);padding-top:.5rem;min-width:6rem;
}

/* ── B3 : sombre, pile centrée ── */
.cta3{background:var(--anthra);color:#fff;padding:2.4rem 2rem}
.cta3 img{width:150px;aspect-ratio:1;object-fit:cover;margin:0 auto 1.2rem}
.cta3 .h{font-family:var(--serif);font-size:1.4rem;font-weight:600;margin:0 0 1.5rem;color:#fff}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-bottom:1.6rem;max-width:520px;margin-left:auto;margin-right:auto}
.facts .n{font-size:1.35rem;font-weight:600;color:#fff;font-family:var(--serif)}
.facts .l{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sauge-m);margin-top:.3rem}

/* ── B4 : terre cuite, pile centrée ── */
.cta4{background:var(--terre-f);color:#fff;padding:2.6rem 2rem;border-color:var(--terre-f)}
.cta4 .pub{background:#fff;color:var(--terre-f)}
.cta4 img{width:150px;aspect-ratio:1;object-fit:cover;margin:0 auto 1.3rem;border:3px solid rgba(255,255,255,.5)}
.cta4 .h{font-family:var(--serif);font-size:1.6rem;font-weight:600;margin:0 0 .6rem;color:#fff}
.cta4 .s{font-size:.96rem;opacity:.95;margin:0 0 1.5rem}

/* ── mobile ── */
@media (max-width:600px){
  .cta1{grid-template-columns:1fr;padding:1.8rem 1.4rem}
  .cta1 img{max-width:200px;margin:0 auto}
  .facts{grid-template-columns:1fr;gap:.9rem}
  .btn{padding:1em 1.9em;font-size:.7rem}
  .pills{gap:1.1rem}
}