/* ============================================================
   Signal Alpha — Encadré partenaire « bon plan »  ·  .sab
   ------------------------------------------------------------
   À installer UNE FOIS pour tout le site :
   Apparence → Personnaliser → CSS additionnel (ou snippet WPCode).
   Chaque encadré n'est ensuite qu'un bloc « HTML personnalisé »
   d'environ 20 lignes, sans aucun style inline.
   Polices : Poppins / DM Sans — déjà chargées par le thème.

   Structure :
   .sab > .sab-card > [.sab-flag] + .sab-logo + .sab-body + .sab-action
   Variante mise en avant : classe .sab--choix + ligne .sab-flag.
   Éléments optionnels (supprimables) : étoiles, bonus, avis, mention.
   ============================================================ */

.sab {
  --sab-terra: #B85832;
  --sab-terra-2: #D36D4C;
  --sab-amber: #D17F26;
  --sab-gold: #DEA646;
  --sab-ink: #42413E;
  --sab-soft: #6E665B;
  --sab-line: rgba(184, 88, 50, .14);
  --sab-tint: #FCF9F2;
  --sab-grad: linear-gradient(120deg, #D17F26 0%, #C96438 55%, #B85832 100%);
  container-type: inline-size;
  margin: 32px 0;
  font-family: 'DM Sans', sans-serif;
}
.sab *, .sab *::before, .sab *::after { box-sizing: border-box; }
.sab p, .sab ul { margin: 0; padding: 0; }

.sab-card {
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr) 198px;
  background: #fff;
  border: 1px solid var(--sab-line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(178, 88, 18, .05);
}

/* ---------- Bandeau « Le choix Signal Alpha » ---------- */
.sab-flag {
  display: none;
  grid-column: 1 / -1;
  padding: 8px 16px;
  background: var(--sab-grad);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  text-align: center;
}
.sab--choix .sab-flag { display: block; }
.sab--choix .sab-card { border-color: rgba(184, 88, 50, .30); box-shadow: 0 6px 22px rgba(178, 88, 18, .12); }

/* ---------- 1. Colonne logo ---------- */
.sab-logo {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 9px;
  padding: 20px 16px;
  background: var(--sab-tint);
  border-right: 1px solid var(--sab-line);
  text-align: center;
}
.sab-logo img, .sab-logo image-slot { max-width: 128px; max-height: 56px; width: auto; height: auto; }
.sab-logo-text { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 19px; line-height: 1.15; color: var(--sab-ink); }
.sab-stars {
  font-size: 15px; letter-spacing: 2px; line-height: 1;
  background: linear-gradient(90deg, var(--sab-gold) var(--fill, 100%), #E8DCC2 var(--fill, 100%));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.sab-score { font-size: 12.5px; color: var(--sab-soft); margin-top: -4px; }

/* ---------- 2. Colonne offre ---------- */
.sab-body { padding: 18px 22px; display: flex; flex-direction: column; gap: 10px; }
.sab-name {
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 17px; color: var(--sab-ink);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
}
.sab-tag { font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sab-amber); }
.sab .sab-points { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.sab-points li { position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.45; color: var(--sab-ink); }
.sab-points li::before { content: "✓"; position: absolute; left: 0; top: 0; font-family: 'Poppins', sans-serif; font-weight: 700; color: var(--sab-amber); }
.sab-points b { font-weight: 700; color: var(--sab-terra-2); }
.sab .sab-fit { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--sab-line); font-size: 14.5px; line-height: 1.5; color: var(--sab-soft); }
.sab-fit-k { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--sab-amber); margin-right: 6px; }

/* ---------- 3. Colonne action ---------- */
.sab-action {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  padding: 18px 20px;
  border-left: 1px solid var(--sab-line);
  text-align: center;
}
.sab-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--sab-grad);
  color: #fff !important;
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 15px; line-height: 1.2;
  text-decoration: none !important;
  box-shadow: 0 3px 12px rgba(184, 88, 50, .24);
  transition: transform .18s, box-shadow .18s, filter .18s;
}
.sab-btn:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 6px 16px rgba(184, 88, 50, .32); }
.sab-bonus {
  display: inline-block; max-width: 100%;
  padding: 4px 12px; border-radius: 999px;
  background: rgba(222, 166, 70, .16);
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 12.5px; line-height: 1.4;
  color: #96650F;
}
.sab a.sab-review {
  font-size: 13.5px; color: var(--sab-soft);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(110, 102, 91, .4);
}
.sab a.sab-review:hover { color: var(--sab-terra-2); }
.sab-mention { font-size: 11px; letter-spacing: .04em; color: #AFA290; }

/* ---------- Réactif (selon la largeur du conteneur) ---------- */
/* ≤ 679 px : logo + offre côte à côte, actions en pied de carte */
@container (max-width: 679px) {
  .sab-card { grid-template-columns: 136px minmax(0, 1fr); }
  .sab-logo { padding: 16px 12px; }
  .sab-logo img, .sab-logo image-slot { max-width: 108px; }
  .sab-action {
    grid-column: 1 / -1;
    flex-direction: row; flex-wrap: wrap;
    border-left: 0; border-top: 1px solid var(--sab-line);
    padding: 14px 18px; gap: 8px 16px;
  }
  .sab-btn { width: auto; padding: 11px 26px; }
}
/* ≤ 429 px : tout empilé, bouton pleine largeur */
@container (max-width: 429px) {
  .sab-card { grid-template-columns: 1fr; }
  .sab-logo { flex-direction: row; gap: 12px; padding: 14px 16px; border-right: 0; border-bottom: 1px solid var(--sab-line); }
  .sab-score { margin-top: 0; }
  .sab-action { flex-direction: column; gap: 9px; }
  .sab-btn { width: 100%; }
}

/* Secours pour navigateurs sans container queries (dégradation douce) */
@supports not (container-type: inline-size) {
  @media (max-width: 720px) {
    .sab-card { grid-template-columns: 136px minmax(0, 1fr); }
    .sab-action { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; justify-content: center; border-left: 0; border-top: 1px solid var(--sab-line); }
    .sab-btn { width: auto; }
  }
  @media (max-width: 480px) {
    .sab-card { grid-template-columns: 1fr; }
    .sab-logo { flex-direction: row; border-right: 0; border-bottom: 1px solid var(--sab-line); }
    .sab-btn { width: 100%; }
  }
}