/* ============================================================
   block: operators — betting-slip cards
   Each card is rendered as a parimutuel ticket: a perforated
   stub at the top, a stamped rank seal, ticket-typography for
   numerals, and a tear-off CTA at the foot.
   ============================================================ */

.operators {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 32px);
  counter-reset: ops;
}

/* — The slip — */
.operators__item {
  --slip-pad: clamp(18px, 2.4vw, 26px);
  position: relative;
  background: #fbf3dd;        /* slightly warmer than body, like newer card stock */
  border: 1px solid var(--ink);
  padding: 0 var(--slip-pad) var(--slip-pad);
  box-shadow: var(--shadow-paper);
  display: flex;
  flex-direction: column;
  /* Ticket grain */
  background-image:
    linear-gradient(180deg, rgba(255,250,232,0) 0, rgba(212,180,120,.08) 100%),
    var(--paper-grain);
  background-size: 100% 100%, 220px 220px;
  background-blend-mode: multiply, normal;
  transition: transform .25s ease, box-shadow .25s ease;
}
.operators__item:hover {
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 0 var(--ink), 0 18px 40px -16px rgba(22,20,14,.5);
}

/* — Perforated stub at top of slip — */
.operators__item::before {
  content: "";
  display: block;
  height: 36px;
  margin: 0 calc(var(--slip-pad) * -1);
  border-bottom: 1.5px dashed var(--rule-strong);
  background: linear-gradient(180deg, rgba(22, 20, 14, .04), transparent);
  position: relative;
}
/* Notches on the tear-line, left and right */
.operators__item > .operators__head {
  position: relative;
}
.operators__item > .operators__head::before,
.operators__item > .operators__head::after {
  content: "";
  position: absolute;
  top: -2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px dashed var(--rule-strong);
  transform: translateY(-50%);
  z-index: 2;
}
.operators__item > .operators__head::before { left: calc(var(--slip-pad) * -1 - 2px); }
.operators__item > .operators__head::after  { right: calc(var(--slip-pad) * -1 - 2px); }

/* Stub overlay : ticket header */
.operators__stub {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--slip-pad);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .18em;
  color: var(--ink-fade);
  text-transform: uppercase;
  pointer-events: none;
}
.operators__stub strong {
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--ink);
}

/* — Rank seal (stamped over the stub on the left) — */
.operators__rank {
  position: absolute;
  top: -22px;
  left: var(--slip-pad);
  width: 72px; height: 72px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 2.4rem;
  color: var(--paper);
  background: var(--rouge);
  border: 3px double var(--paper);
  outline: 1px solid var(--rouge);
  border-radius: 50%;
  transform: rotate(-7deg);
  box-shadow: 0 4px 0 0 rgba(22, 20, 14, .25);
  font-feature-settings: "smcp" 0, "lnum";
  z-index: 3;
  letter-spacing: -.02em;
}
.operators__rank::after {
  content: "N°";
  position: absolute;
  top: 4px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: .5rem;
  letter-spacing: .2em;
  color: rgba(255,250,232,.85);
}

/* — Logo & header strip — */
.operators__head {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 18px;
  padding-left: 80px;        /* leave room for the rank seal */
  margin-bottom: 12px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 14px;
  min-height: 80px;
}

.operators__logo-wrap {
  width: 110px; height: 60px;
  display: grid;
  place-items: center;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 8px 10px;
  flex: 0 0 110px;
}
.operators__logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: contrast(1.05);
}

.operators__brand-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.operators__name {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  font-weight: 400;
  color: var(--ink);
  margin: 0;
  letter-spacing: .015em;
  line-height: 1;
}
.operators__category {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rouge-deep);
  margin-top: 4px;
}

/* — Body — */
.operators__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.operators__meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Rating cartouche */
.operators__rating {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-display);
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 4px 10px 5px;
  letter-spacing: .01em;
}
.operators__rating-stars {
  color: var(--brass);
  font-size: .95rem;
  letter-spacing: 2px;
}
.operators__rating-score {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--ink);
  font-feature-settings: "tnum";
}
.operators__rating-score sub {
  color: var(--ash);
  font-family: var(--font-mono);
  font-size: .68rem;
  vertical-align: baseline;
}

/* Agrément ANJ chip */
.operators__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--turf);
  padding: 4px 10px 5px;
  border: 1px solid var(--turf-deep);
}
.operators__chip::before {
  content: "✓";
  color: var(--brass-bright);
  font-family: var(--font-display);
  font-size: .85rem;
}

/* Licence line */
.operators__licence {
  font-size: .92rem;
  color: var(--ink-soft);
  margin: 0;
  font-family: var(--font-body);
  font-style: italic;
}
.operators__licence-mark {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--turf-deep);
  background: rgba(26, 61, 44, .12);
  padding: 1px 6px 2px;
  border-bottom: 1px solid var(--turf);
  margin-right: 4px;
}

/* — Bonus block : the "offre du jour" ticket — */
.operators__bonus {
  display: block;
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding: 14px 18px 16px;
  border-left: 4px solid var(--brass);
  margin: 6px 0;
}
.operators__bonus::before {
  content: "OFFRE";
  position: absolute;
  top: 10px; right: 14px;
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .26em;
  color: var(--brass-bright);
  border: 1px solid var(--brass);
  padding: 1px 6px 2px;
}
.operators__bonus-label {
  display: block;
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass-bright);
  margin-bottom: 4px;
}
.operators__bonus-value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  line-height: 1.18;
  color: var(--paper);
  letter-spacing: .01em;
}
.operators__bonus-fine {
  display: block;
  font-family: var(--font-body);
  font-style: italic;
  font-size: .76rem;
  color: rgba(241, 232, 210, .65);
  margin-top: 6px;
}

/* — Description — */
.operators__desc {
  font-family: var(--font-body);
  font-size: .98rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

/* — Features bullet list — */
.operators__features {
  list-style: none;
  margin: 0;
  padding: 12px 0 0;
  border-top: 1px dashed var(--rule);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 22px;
}
.operators__feature {
  font-family: var(--font-body);
  font-size: .9rem;
  color: var(--ink-soft);
  padding-left: 18px;
  position: relative;
}
.operators__feature::before {
  content: "";
  position: absolute;
  left: 0; top: .6em;
  width: 10px; height: 1px;
  background: var(--rouge);
}

/* — Tear-off CTA strip — */
.operators__cta-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px dashed var(--rule-strong);
  position: relative;
}
.operators__cta-row::before,
.operators__cta-row::after {
  content: "";
  position: absolute;
  top: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px dashed var(--rule-strong);
  transform: translateY(-50%);
}
.operators__cta-row::before { left: -16px; }
.operators__cta-row::after  { right: -16px; }

/* — Note under operators list — */
.operators__note {
  text-align: center;
  margin-top: 32px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: .88rem;
  color: var(--ash);
  max-width: 64ch;
  margin-left: auto;
  margin-right: auto;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .operators { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .operators__item { padding: 0 18px 22px; }
  .operators__head {
    flex-direction: column;
    align-items: flex-start;
    padding-left: 0;
    padding-top: 56px;       /* room beneath the rank seal */
    gap: 12px;
  }
  .operators__rank {
    width: 60px; height: 60px;
    font-size: 1.9rem;
    top: -16px;
    left: 18px;
  }
  .operators__logo-wrap { width: 130px; height: 56px; flex-basis: auto; }
  .operators__features { grid-template-columns: 1fr; }
  .operators__bonus-value { font-size: 1.05rem; }
}