/* Bloc "Tiers" — CTA final + positionnement Wuli/Kèra/Fòrò, jamais de prix (contrainte
   utilisateur explicite). Contenu et choix visuels détaillés dans
   nafabeat-spec/algos/IHM/page_acceuil/IHM_PAGE_ACCUEIL_TIERS_algo.md.
   --cta-* restent des tokens locaux à ce bloc — même décision que #results/#prestige,
   /design-token n'est plus une étape de ce skill (retiré 2026-08-31). */
#cta {
  --cta-border: rgba(26,26,46,0.11);
  --cta-text-sec: rgba(26,26,46,0.66);
  --cta-card-bg: #FFFFFF;
  --cta-sand: #F2EFE8;
  --cta-sand-deep: #ECE3D1;
  background: var(--background-clair);
  padding: 90px 24px 90px;
  position: relative;
}
#cta .cta-inner { max-width: 1120px; margin: 0 auto; }
#cta .cta-header { max-width: 640px; margin: 0 0 56px; }
#cta .cta-eyebrow { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold-dark); font-weight: 700; }
#cta .cta-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3.4vw, 42px); color: var(--marine); margin-top: 14px; line-height: 1.18; }
#cta .cta-title em { font-style: italic; color: var(--gold); }
#cta .cta-intro { font-size: 15.5px; color: var(--cta-text-sec); line-height: 1.75; margin-top: 18px; }

#cta .cta-trust {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 22px; font-size: 13px; color: var(--marine); font-weight: 700;
}
#cta .cta-trust-item { display: inline-flex; align-items: center; gap: 7px; }
#cta .cta-trust-item svg { width: 15px; height: 15px; color: var(--gold-dark); flex-shrink: 0; }
#cta .cta-trust-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--cta-border); }

#cta .cta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }

#cta .cta-card {
  position: relative;
  background: var(--cta-card-bg);
  border: 1px solid rgba(26,26,46,0.18);
  border-radius: 16px;
  padding: 36px 30px 44px;
  display: flex; flex-direction: column;
  box-shadow: 0 10px 24px -18px rgba(26,26,46,0.22);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
#cta .cta-card:hover { transform: translateY(-4px); box-shadow: 0 16px 28px -18px rgba(26,26,46,0.24); border-color: rgba(202,138,4,0.3); }

/* Barres croissantes — écho visuel du titre "grandit avec vous", remplies progressivement
   selon le tier (1/2/3) plutôt qu'un simple numéro ou une puce décorative. */
#cta .cta-card-bars { display: flex; align-items: flex-end; gap: 3px; margin-bottom: 16px; }
#cta .cta-card-bars span { width: 4px; border-radius: 2px; background: rgba(26,26,46,0.14); }
#cta .cta-card-bars span:nth-child(1) { height: 8px; }
#cta .cta-card-bars span:nth-child(2) { height: 14px; }
#cta .cta-card-bars span:nth-child(3) { height: 20px; }
#cta .cta-card-bars span.is-filled { background: var(--gold-dark); }
#cta .cta-card--foro .cta-card-bars span { background: rgba(248,244,239,0.2); }
#cta .cta-card--foro .cta-card-bars span.is-filled { background: var(--gold-light); }

#cta .cta-card-name { font-family: var(--font-display); font-size: 24px; color: var(--marine); }
#cta .cta-card-tag { font-size: 12.5px; color: var(--cta-text-sec); margin-top: 4px; margin-bottom: 24px; }

#cta .cta-card-badge {
  position: absolute; top: -13px; left: 30px;
  background: var(--gold); color: var(--marine);
  font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  padding: 5px 12px; border-radius: 20px;
}

#cta .cta-card-list { list-style: none; display: flex; flex-direction: column; gap: 13px; }
#cta .cta-card-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--marine); line-height: 1.5; }
#cta .cta-card-list li svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; color: var(--gold-dark); }

/* Bouton flottant — même mécanique que .cta-card-badge (rectangle à coins arrondis à cheval
   sur le bord bas de la carte), plutôt qu'un bouton posé dans le flux. Fond opaque (jamais
   transparent) pour lire clairement qu'il soit sur la carte ou sur le fond crème de la
   section. Le padding-bottom de .cta-card (44px) réserve la place pour ce débordement. */
#cta .cta-card-btn {
  position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%);
  width: max-content; white-space: nowrap;
  background: var(--cta-card-bg); color: var(--marine); border: 1.5px solid var(--marine);
  border-radius: 10px; padding: 15px 32px; font-size: 13.5px; font-weight: 700; letter-spacing: 0.2px; cursor: pointer;
  box-shadow: 0 12px 22px -10px rgba(26,26,46,0.32);
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
#cta .cta-card-btn:hover { background: var(--marine); color: var(--text-cream); transform: translateX(-50%) translateY(-2px); box-shadow: 0 16px 28px -10px rgba(26,26,46,0.4); }

/* Kèra — recommandé. Distinction par fond sable + bordure + badge + bouton plein, sans
   élévation permanente (translateY cassait l'alignement des 3 cartes et poussait le badge
   à déborder du haut du bloc — testé puis retiré). */
#cta .cta-card--kera {
  border: 1.5px solid rgba(202,138,4,0.5); background: var(--cta-sand-deep);
  box-shadow: 0 14px 28px -20px rgba(202,138,4,0.4);
}
#cta .cta-card--kera:hover { border-color: var(--gold-dark); }
#cta .cta-card--kera .cta-card-btn { background: var(--marine); color: var(--text-cream); border-color: var(--marine); box-shadow: 0 14px 24px -8px rgba(26,26,46,0.4); }
#cta .cta-card--kera .cta-card-btn:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: var(--text-cream); }

/* Fòrò — carte premium, même principe que #results .r-card--hero (fond sombre au milieu de
   cartes claires) + halo ambiant propre à cette carte (calque flouté, pas un box-shadow —
   un box-shadow classique se lit comme une ombre neutre sur fond clair, pas comme une
   lueur colorée). Centré haut de carte pour ne pas déborder sur la description des
   fonctionnalités ni sur la carte Kèra voisine. */
#cta .cta-card--foro { background: var(--marine); border-color: rgba(226,168,50,0.3); z-index: 1; }
#cta .cta-card--foro::before {
  content: ''; position: absolute; z-index: -1;
  left: 14%; right: 14%; top: -34px; height: 90px;
  background: radial-gradient(ellipse at 50% 55%, rgba(226,168,50,0.65) 0%, rgba(226,168,50,0.25) 45%, transparent 78%);
  filter: blur(20px); pointer-events: none;
}
#cta .cta-card--foro:hover { border-color: rgba(226,168,50,0.55); }
#cta .cta-card--foro:hover::before { background: radial-gradient(ellipse at 50% 55%, rgba(226,168,50,0.78) 0%, rgba(226,168,50,0.3) 45%, transparent 78%); }
#cta .cta-card--foro .cta-card-name { color: var(--text-cream); }
#cta .cta-card--foro .cta-card-tag { color: var(--text-sec-dark); }
#cta .cta-card--foro .cta-card-list li { color: var(--text-cream); }
#cta .cta-card--foro .cta-card-list li svg { color: var(--gold-light); }
/* Bouton doré plein — écho du halo, distinct du marine plein de Kèra et du blanc/contour
   de Wuli, plutôt qu'un 3ème contour qui aurait rendu les 3 boutons trop semblables. */
#cta .cta-card--foro .cta-card-btn { background: var(--gold-light); color: var(--marine); border-color: var(--gold-light); box-shadow: 0 14px 24px -8px rgba(226,168,50,0.5); }
#cta .cta-card--foro .cta-card-btn:hover { background: var(--gold); border-color: var(--gold); color: var(--marine); }

/* Teaser engagement annuel — volontairement sans détail (ni chiffre, ni liste de
   fonctionnalités) pour susciter la curiosité plutôt que d'énumérer ; le détail se discute
   à l'échange commercial. */
/* margin-top compte double : le bouton flottant est en position absolute (hors flux), donc
   .cta-grid ne "voit" pas son débordement sous la carte (~46px : bottom:-22px + moitié de sa
   propre hauteur) — sans cette marge élargie, le bandeau touche/chevauche le bouton. */
#cta .cta-annual {
  display: flex; align-items: center; gap: 8px; margin: 68px auto 0;
  padding: 9px 18px; width: fit-content;
  background: var(--cta-sand); border: 1px solid rgba(202,138,4,0.22); border-radius: 30px;
  font-size: 12.5px; color: var(--marine); font-style: italic;
}
#cta .cta-annual svg { width: 14px; height: 14px; color: var(--gold-dark); flex-shrink: 0; }

#cta .cta-final {
  margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--cta-border);
  display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center;
}
#cta .cta-urgency {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--gold-dark); font-weight: 700;
}
#cta .cta-urgency-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold-dark); animation: pulse 2s infinite; }
#cta .cta-final-text { font-family: var(--font-display); font-size: clamp(20px, 2.2vw, 26px); color: var(--marine); }
#cta .cta-final .btn-primary { padding: 16px 36px; font-size: 14.5px; }

@media (max-width: 860px) {
  #cta .cta-grid { grid-template-columns: 1fr; row-gap: 40px; }
  #cta .cta-card--kera { order: -1; }
  #cta .cta-card--foro { margin-top: 12px; }
}