/* ==========================================================================
   contact-cta.css — la paire de contact seule
   --------------------------------------------------------------------------
   Extraction verbatim de `brand.css` (bloc « Paire de contact »), pour les
   8 pages blog historiques qui portent leur propre `<style>` inline et ne
   chargent aucune des feuilles partagées. Elles avaient jusqu'ici un bouton
   d'appel isolé (`.btn-cta` / `.btn-cta-article`) au lieu du composant unique
   décrit par `DESIGN.md`, et donc aucun repli SMS.

   Purement additif : aucune des 8 pages ne définit `.cta-pair`, `.btn-call`,
   `.btn-sms`, `.btn-lines` ni `.on-dark`, et toutes déclarent déjà les jetons
   utilisés ici (--r-lg, --terracotta, --terracotta-dk, --surface, --slate,
   --line, --muted).

   Requiert `brand.css` OU un `<style>` déclarant ces jetons. Ne jamais charger
   en même temps que `brand.css` : les règles y sont identiques mais dupliquées.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Paire de contact — un seul composant pour tout le site
   Deux boutons de même hauteur, chacun sur deux lignes : action puis détail.
   `auto-fit / minmax(248px, 1fr)` empêche toute compression : la grille passe
   à une colonne avant que le libellé ou le numéro ne puisse se couper.
   -------------------------------------------------------------------------- */
.cta-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(248px, 100%), 1fr));
  gap: 12px;
  max-width: 560px;
  margin-top: 24px;
}

.cta-pair.cta-pair-center { margin-left: auto; margin-right: auto; }

.btn-call,
.btn-sms {
  min-height: 64px;
  min-width: 0;
  border-radius: var(--r-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 20px;
  font-family: 'Sora', sans-serif;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease,
    box-shadow .2s ease, transform .1s ease;
}

.btn-call svg,
.btn-sms svg { flex-shrink: 0; }

.btn-call {
  background: var(--terracotta);
  color: #fff;
  box-shadow: 0 8px 26px -8px rgba(232, 118, 26, .7);
}

.btn-call:hover {
  background: var(--terracotta-dk);
  transform: translateY(-1px);
}

.btn-call:active { transform: translateY(0); }

.btn-sms {
  background: var(--surface);
  color: var(--slate);
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px -12px rgba(28, 43, 58, .55);
}

.btn-sms:hover {
  border-color: var(--terracotta);
  color: var(--terracotta-dk);
  transform: translateY(-1px);
}

.btn-sms:active { transform: translateY(0); }

.btn-lines {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.btn-lines b {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
}

.btn-lines span {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.btn-call .btn-lines span {
  color: rgba(255, 255, 255, .82);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

.btn-sms .btn-lines span { color: var(--muted); }

/* Variante sur fond sombre (hero, CTA final) */
.on-dark .btn-sms,
.hero .btn-sms {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .34);
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.on-dark .btn-sms .btn-lines span,
.hero .btn-sms .btn-lines span { color: rgba(255, 255, 255, .72); }

.on-dark .btn-sms:hover,
.hero .btn-sms:hover {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .6);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Compatibilité avec les 8 pages blog historiques
   Elles colorent et soulignent tous les liens de l'article :
   `.article-body a { color: var(--terracotta); text-decoration: underline }`,
   spécificité 0-1-1, qui l'emporte sur `.btn-call` / `.btn-sms` (0-1-0). Sans
   ce bloc, le bouton d'appel s'affiche en terracotta sur terracotta et les deux
   boutons sont soulignés — ce que `DESIGN.md` interdit explicitement.
   On repasse devant en 0-2-1, sans rien changer aux valeurs ci-dessus.
   -------------------------------------------------------------------------- */
.cta-pair a.btn-call,
.cta-pair a.btn-sms { text-decoration: none; }

.cta-pair a.btn-call { color: #fff; }
.cta-pair a.btn-sms { color: var(--slate); }
.cta-pair a.btn-sms:hover { color: var(--terracotta-dk); }

.on-dark .cta-pair a.btn-sms,
.on-dark .cta-pair a.btn-sms:hover,
.hero .cta-pair a.btn-sms,
.hero .cta-pair a.btn-sms:hover { color: #fff; }