/* =========================================================
   SPO — 20-components.css (GLOBAL) — 2026-01-22
   Rôle : composants réutilisables (boutons, cartes, badges, chips…)
   SAFE / additif
   ========================================================= */

/* =========================================================
   Boutons SPO
   ========================================================= */
.spo-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid transparent;
  text-decoration:none;
  font-weight:900;
  line-height:1;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease, color .12s ease;
  -webkit-tap-highlight-color: transparent;
}

/* Primary */
.spo-btn--primary,
.spo-btn-primary{
  background: var(--spo-primary, #0F2A44);
  color:#fff !important;
  border-color: rgba(15,42,68,.22);
  box-shadow:0 12px 20px rgba(15,42,68,.18);
}
.spo-btn--primary:hover,
.spo-btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 26px rgba(15,42,68,.22);
}
.spo-btn--primary:active,
.spo-btn-primary:active{ transform:translateY(0); }

/* Ghost LIGHT (par défaut) */
.spo-btn--ghost,
.spo-btn-ghost{
  background: rgba(255,255,255,.98) !important;
  color: rgba(15,42,68,.94) !important;
  border:1px solid rgba(15,42,68,.22) !important;
  box-shadow:0 10px 18px rgba(15,42,68,.08) !important;
}
.spo-btn--ghost:hover,
.spo-btn-ghost:hover{
  transform:translateY(-1px);
  border-color: rgba(15,42,68,.32) !important;
  box-shadow:0 14px 24px rgba(15,42,68,.10) !important;
}

/* Ghost DARK (pour zones sombres) */
.spo-btn--ghost-dark,
.spo-btn-ghost-dark,
.spo-btn--ghostDark,
.spo-btn-ghostDark{
  background: rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.96) !important;
  border:1px solid rgba(255,255,255,.26) !important;
  box-shadow:0 10px 18px rgba(0,0,0,.22) !important;
}
.spo-btn--ghost-dark:hover,
.spo-btn-ghost-dark:hover,
.spo-btn--ghostDark:hover,
.spo-btn-ghostDark:hover{
  transform:translateY(-1px);
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(255,255,255,.34) !important;
}

/* Support */
.spo-btn--support{
  background: rgba(201,162,39,.14) !important;
  color: rgba(15,42,68,.96) !important;
  border:1px solid rgba(201,162,39,.55) !important;
  box-shadow:0 12px 20px rgba(15,42,68,.10) !important;
}
.spo-btn--support:hover{
  background: rgba(201,162,39,.18) !important;
  border-color: rgba(201,162,39,.70) !important;
  transform:translateY(-1px);
}

/* =========================================================
   ÉCRASER ListingHive/HivePress boutons partout (dans le front)
   Objectif : cohérence + lisibilité.
   ========================================================= */
.hp-button,
.hp-form :is(button, input[type="submit"]),
.wp-element-button,
.wp-block-button__link{
  border-radius:999px !important;
  font-weight:900 !important;
}

.hp-button--primary,
.hp-form :is(button[type="submit"], input[type="submit"]){
  background: var(--spo-primary, #0F2A44) !important;
  color:#fff !important;
  border:1px solid rgba(15,42,68,.22) !important;
  box-shadow:0 12px 20px rgba(15,42,68,.18) !important;
}

/* =========================================================
   Badges
   ========================================================= */
.spo-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  background: rgba(15,42,68,.04);
  border:1px solid rgba(15,42,68,.10);
  color: rgba(15,42,68,.92);
  font-weight:800;
  font-size:13px;
  text-decoration:none;
}

/* =========================================================
   Chips (recherches populaires)
   ========================================================= */
.spo-chip{
  display:inline-flex;
  align-items:center;
  padding:8px 10px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(15,42,68,.14);
  color: rgba(15,42,68,.92);
  text-decoration:none;
  font-weight:800;
  font-size:13px;
}
.spo-chip:hover{
  border-color: rgba(15,42,68,.22);
  box-shadow:0 10px 18px rgba(15,42,68,.08);
  transform:translateY(-1px);
}

/* =========================================================
   Cartes (aside, blocs réutilisables)
   ========================================================= */
.spo-card{
  background: rgba(255,255,255,.96);
  border:1px solid var(--spo-border, rgba(15,42,68,.12));
  border-radius: var(--spo-radius, 18px);
  box-shadow: var(--spo-shadow, 0 14px 34px rgba(15,42,68,.10));
  padding:14px;
}
.spo-card__head{ margin:0 0 10px; }
.spo-card__title{
  margin:0 0 4px;
  font-size:16px;
  font-weight:900;
  color: var(--spo-primary, #0F2A44);
  display:flex;
  align-items:center;
  gap:10px;
}
.spo-card__desc{
  margin:0;
  color: rgba(15,42,68,.82);
  line-height:1.55;
}

/* Listes “bullets” propres */
.spo-bullets{
  margin:10px 0 0;
  padding-left:1.1rem;
}
.spo-bullets li{ margin:6px 0; }

/* Privacy box */
.spo-privacyBox{
  margin-top:12px;
  padding:12px;
  border-radius:16px;
  background: rgba(15,42,68,.04);
  border:1px solid rgba(15,42,68,.12);
}
.spo-privacyBox__head{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  color: var(--spo-primary, #0F2A44);
  margin:0 0 6px;
}
.spo-privacyBox__text{ margin:0; line-height:1.6; }

/* Pre (modèles) */
.spo-pre{
  margin:10px 0 0;
  padding:12px;
  border-radius:14px;
  background:#0B1E31;
  color:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.12);
  overflow:auto;
  font-size:13px;
  line-height:1.55;
}