/* ══════════════════════════════════════════════════════════════
   cta.css — composants partagés « boutons » et « blocs CTA »
   Chargé après styles.css. S'appuie sur les variables de palette
   définies dans le :root de chaque page (--n --c --b --bp --bl
   --cd --cdd --fd) et sur le bouton des pages « hub » (.btn-hub).
   ══════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────
   Bouton de contenu (police display) : .btn + --fill / --inv
   Utilisé par les pages articles et les pages univers
   (boudoir, baptême, couple, famille, grossesse, gironde…).
   ────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--fd);
  font-size: var(--fs-2xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--n);
  border: 1px solid var(--b);
  padding: 1.1rem 3rem;
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  transition: background 0.35s ease, color 0.35s ease;
}
.btn:hover { background: var(--n); color: var(--c); }
.btn--fill { background: var(--n); color: var(--c); }
.btn--fill:hover { background: transparent; color: var(--n); }
.btn--inv { color: var(--c); border-color: rgba(245,240,232,0.4); }
.btn--inv:hover { background: var(--c); color: var(--n); }

/* ──────────────────────────────────────────────
   Bouton d'article éditorial : .cha-btn / .arg-btn / .atv2-btn
   (mêmes déclarations sur toutes les pages concernées)
   ────────────────────────────────────────────── */
.cha-btn,
.arg-btn,
.atv2-btn {
  display: inline-block !important;
  font-family: var(--fd) !important;
  font-size: var(--fs-2xs) !important;
  font-weight: 400 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: var(--n) !important;
  border: 1px solid var(--b) !important;
  padding: 1.1rem 3rem !important;
  text-decoration: none !important;
  background: transparent !important;
  transition: background 0.35s ease, color 0.35s ease;
}
.cha-btn:hover,
.arg-btn:hover,
.atv2-btn:hover {
  background: var(--n) !important;
  color: var(--c) !important;
  text-decoration: none !important;
}
.arg-btn--inv,
.atv2-btn--dark { color: var(--c) !important; border-color: var(--bp) !important; }
.arg-btn--inv:hover,
.atv2-btn--dark:hover { background: var(--c) !important; color: var(--n) !important; }

/* ──────────────────────────────────────────────
   Bouton des cartes tarifs : .tp-card__cta
   ────────────────────────────────────────────── */
.tp-card__cta {
  display: inline-block !important;
  margin-top: 3rem !important;
  font-family: var(--fd) !important;
  font-size: var(--fs-2xs) !important;
  font-weight: 400 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 1rem 2.2rem !important;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.tp-card--light .tp-card__cta { color: var(--c) !important; border: 1px solid rgba(245,240,232,0.25) !important; background: transparent !important; }
.tp-card--light .tp-card__cta:hover { border-color: var(--bp) !important; background: rgba(245,240,232,0.05) !important; text-decoration: none !important; }
.tp-card--featured .tp-card__cta { color: var(--c) !important; background: var(--n) !important; border: 1px solid var(--n) !important; }
.tp-card--featured .tp-card__cta:hover { background: var(--b) !important; border-color: var(--b) !important; text-decoration: none !important; }
.tp-card__cta--argentique { margin-top: 0 !important; flex-shrink: 0; color: var(--bp) !important; border-color: rgba(201,185,170,0.3) !important; background: transparent !important; white-space: nowrap; }
.tp-card__cta--argentique:hover { color: var(--c) !important; border-color: rgba(245,240,232,0.5) !important; background: rgba(245,240,232,0.05) !important; }

/* ──────────────────────────────────────────────
   Bloc CTA final des pages tarifs : .tp-cta
   (les ajustements responsive restent dans les pages)
   ────────────────────────────────────────────── */
.tp-cta {
  background: var(--cd);
  padding: 9rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  max-width: none;
  width: 100%;
  margin: 0;
}
.tp-cta__ghost {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
}
.tp-cta__ghost span {
  font-family: var(--fd);
  font-size: 22vw;
  font-weight: 300;
  font-style: italic;
  color: transparent;
  -webkit-text-stroke: 1px var(--cdd);
  white-space: nowrap;
  line-height: 1;
  user-select: none;
}
.tp-cta__inner { position: relative; z-index: 2; max-width: 620px; margin: 0 auto; }
.tp-cta__h2 {
  font-family: var(--fd) !important;
  font-weight: 300 !important;
  font-size: var(--fs-3xl) !important;
  line-height: 1.05 !important;
  color: var(--n) !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 1.4rem !important;
}
.tp-cta__h2 em { color: var(--b) !important; font-style: italic !important; }
.tp-cta__sub {
  font-size: var(--fs-sm) !important;
  line-height: 1.8 !important;
  color: var(--b) !important;
  max-width: 46ch !important;
  margin: 0 auto 3rem !important;
}

/* ──────────────────────────────────────────────
   Bloc CTA final des pages « hub » : mar-cta / phub-cta / thub-cta
   ────────────────────────────────────────────── */
.mar .mar-cta,
.phub .phub-cta,
.thub .thub-cta { background: var(--n); color: var(--c); text-align: center; padding: 8rem 2rem; }
.mar .mar-cta .mar-h2,
.phub .phub-cta .phub-h2,
.thub .thub-cta .thub-h2 { color: var(--c); }
.mar .mar-cta .mar-h2 em,
.phub .phub-cta .phub-h2 em,
.thub .thub-cta .thub-h2 em { color: var(--bp); }
.mar .mar-cta__text,
.phub .phub-cta__text,
.thub .thub-cta__text {
  font-family: var(--fd);
  font-style: italic;
  font-weight: 300;
  font-size: var(--fs-md);
  line-height: 1.85;
  color: var(--bp);
  max-width: 52ch;
  margin: 1.8rem auto 2.8rem;
}
.mar .mar-cta__actions,
.phub .phub-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }