/* Blocs d'appel à l'action des articles (2026-10-13) — injectés par scripts/inject-ctas.mjs.
   Autonomes : n'utilisent que des couleurs fixes de la charte (orange #C2410C sur blanc / blanc sur orange),
   lisibles en thème clair et sombre. Cibles tactiles ≥ 44 px. */

.sx-cta-inline{
  margin:32px 0;padding:18px 20px;border-radius:14px;
  background:#FFF7F2;border:1px solid #FBD5BF;border-left:5px solid #C2410C;
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;color:#1F2937;
}
.sx-cta-inline__text{flex:1 1 280px;margin:0;font-size:15.5px;line-height:1.5;color:#1F2937}
.sx-cta-inline__text strong{color:#9A3412}
.sx-cta-inline__btns{display:flex;flex-wrap:wrap;gap:10px}

/* Conteneur des pages « génériques » (outils, comparatifs) : bloc final avant le pied de page */
.sx-cta-wrap{max-width:900px;margin:0 auto;padding:8px 24px 56px}
.sx-cta-wrap .sx-cta-end{margin:24px 0 0}

.sx-cta-end{
  margin:44px 0 12px;border-radius:18px;overflow:hidden;
  background:#C2410C;color:#fff;
}
.sx-cta-end__main{padding:34px 32px 26px;text-align:center}
.sx-cta-end__main h3{margin:0 0 10px;font-size:23px;font-weight:700;letter-spacing:-.02em;color:#fff}
.sx-cta-end__main p{margin:0 auto 20px;max-width:560px;font-size:15.5px;line-height:1.55;color:rgba(255,255,255,.92)}
.sx-cta-end__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.sx-cta-end__main .sx-cta-end__note{margin:16px auto 0;font-size:13px;color:rgba(255,255,255,.82);text-align:center}
.sx-cta-end__note a{color:#fff;font-weight:700;text-decoration:underline}
.sx-cta-end__alt{
  list-style:none;margin:0;padding:14px 20px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 26px;
  background:rgba(0,0,0,.14);border-top:1px solid rgba(255,255,255,.18);
}
.sx-cta-end__alt a{display:inline-block;padding:8px 2px;font-size:14px;font-weight:600;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.45)}
.sx-cta-end__alt a:hover{border-bottom-color:#fff}

/* Boutons (communs) */
.sx-cta-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:11px 22px;border-radius:11px;
  font-size:15px;font-weight:700;line-height:1.2;text-decoration:none;text-align:center;
  transition:transform .15s,box-shadow .15s,background .15s;
}
.sx-cta-btn:hover{transform:translateY(-2px)}
.sx-cta-btn:focus-visible{outline:3px solid #FDBA74;outline-offset:2px}
.sx-cta-btn--primary{background:#fff;color:#9A3412;box-shadow:0 8px 22px rgba(0,0,0,.18)}
.sx-cta-btn--ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.85)}
.sx-cta-btn--ghost:hover{background:rgba(255,255,255,.12)}

/* Variante dans le bandeau clair (inline) : boutons pleins orange / contour orange */
.sx-cta-inline .sx-cta-btn--primary{background:#C2410C;color:#fff;box-shadow:0 6px 16px rgba(194,65,12,.28)}
.sx-cta-inline .sx-cta-btn--ghost{background:#fff;color:#9A3412;border:2px solid #C2410C}
.sx-cta-inline .sx-cta-btn--ghost:hover{background:#FFF1E8}

/* Maillage interne : liste de guides liés, avant le bloc final */
.sx-guides{margin:32px 0 8px;padding:20px 22px;border:1px solid #E5E7EB;border-radius:14px;background:#fff}
.sx-guides h3{margin:0 0 10px;font-size:16px;font-weight:700;color:#111827}
.sx-guides ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:2px 24px}
.sx-guides li{margin:0}
.sx-guides a{display:block;padding:7px 0;font-size:14.5px;line-height:1.4;color:#9A3412;text-decoration:none;border-bottom:1px solid #F3F4F6}
.sx-guides a:hover{text-decoration:underline}
:root[data-theme="dark"] .sx-guides{background:#161616;border-color:#2A2A2A}
:root[data-theme="dark"] .sx-guides h3{color:#F3F4F6}
:root[data-theme="dark"] .sx-guides a{color:#FDBA74;border-bottom-color:#2A2A2A}

/* Colonne latérale : second bouton sous le bouton d'essai */
.sidebar-cta a + a{margin-top:8px;background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.8)}

@media (max-width:640px){
  .sx-cta-end__main{padding:26px 18px 20px}
  .sx-cta-end__main h3{font-size:20px}
  .sx-cta-end__btns,.sx-cta-inline__btns{flex-direction:column;align-items:stretch;width:100%}
  .sx-cta-inline{padding:16px}
}
@media (prefers-reduced-motion:reduce){.sx-cta-btn{transition:none}.sx-cta-btn:hover{transform:none}}