/* v1.38 (Phase 3) : [jtls_offer_cards] — cartes d'offres dynamiques. Mobile d'abord (375 px), contraste AA,
   jetons de design partagés (jtls-design-tokens). Autonome : utilisable dans une page, un widget ou Mon espace sans la
   feuille de « Nos offres ». */
.jtls-offer-cards { font-family: var(--jtls-font-body); color: var(--jtls-text); line-height: 1.5; }
.jtls-offer-cards * { box-sizing: border-box; }
.jtls-offer-cards .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.jtls-offer-cards ul { list-style: none; margin: 0; padding: 0; }
.jtls-oc-list { display: grid; grid-template-columns: 1fr; gap: 16px; }

.jtls-oc-card {
    position: relative; display: flex; flex-direction: column; gap: 8px;
    background: var(--jtls-white); border: 1px solid var(--jtls-border); border-radius: var(--jtls-radius-lg);
    box-shadow: var(--jtls-shadow-sm); padding: 22px 18px 18px;
}
.jtls-oc-card.is-highlighted { border: 2px solid var(--jtls-accent); background: var(--jtls-accent-light); box-shadow: var(--jtls-shadow-md); }
.jtls-oc-card.is-current { border: 2px solid var(--jtls-success); }

.jtls-oc-badge {
    position: absolute; top: -12px; left: 16px; display: inline-block;
    background: var(--jtls-accent); color: var(--jtls-navy); font-size: .72rem; font-weight: 800;
    padding: 3px 12px; border-radius: var(--jtls-radius-full);
}
.jtls-oc-badge.is-current { background: var(--jtls-success-light); color: #1b6b60; border: 1px solid var(--jtls-success); }
.jtls-oc-head { display: flex; align-items: center; gap: 10px; }
.jtls-oc-icon { font-size: 24px; line-height: 1; }
.jtls-offer-cards .jtls-oc-name { margin: 0; font-family: var(--jtls-font-heading); font-size: 1.08rem; font-weight: 800; color: var(--jtls-navy); line-height: 1.2; }
.jtls-oc-price { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; }
.jtls-oc-price strong { font-family: var(--jtls-font-heading); font-size: 1.35rem; font-weight: 800; color: var(--jtls-navy); }
.jtls-oc-installments { font-size: .85rem; font-weight: 700; color: var(--jtls-primary-dark); }
.jtls-oc-price-note { margin: -4px 0 0; font-size: .75rem; color: var(--jtls-text-muted); }
.jtls-oc-tagline { margin: 0; font-size: .88rem; color: var(--jtls-text-muted); }
.jtls-oc-includes { margin: 4px 0 0; font-size: .8rem; font-weight: 700; color: var(--jtls-navy); }
.jtls-oc-benefits { display: flex; flex-direction: column; gap: 5px; margin: 0; flex: 1; }
.jtls-oc-benefits li { position: relative; padding-left: 20px; font-size: .86rem; color: #3a3a3a; }
.jtls-oc-benefits li::before { content: "✓"; position: absolute; left: 0; color: var(--jtls-success); font-weight: 800; }
.jtls-oc-credit { margin: 0; padding: 6px 10px; border-radius: var(--jtls-radius-sm); background: var(--jtls-success-light); color: #1b6b60; font-size: .8rem; font-weight: 700; }
.jtls-oc-cta { margin-top: auto; padding-top: 6px; }

/* Boutons (mêmes classes que « Nos offres », redéfinies ici pour fonctionner sans offers.css). */
.jtls-offer-cards .jtls-offer-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 44px;
    padding: 11px 18px; border-radius: var(--jtls-radius-md); border: 2px solid transparent;
    font-family: var(--jtls-font-heading); font-weight: 700; font-size: .92rem; text-decoration: none; cursor: pointer;
}
.jtls-offer-cards .jtls-offer-btn:focus-visible { outline: 3px solid var(--jtls-navy); outline-offset: 2px; }
.jtls-offer-cards .jtls-offer-btn.is-primary { background: var(--jtls-accent); color: var(--jtls-navy); }
.jtls-offer-cards .jtls-offer-btn.is-marine { background: var(--jtls-navy); color: var(--jtls-white); }
.jtls-offer-cards .jtls-offer-btn.is-secondary { background: var(--jtls-white); color: var(--jtls-primary-dark); border-color: var(--jtls-primary-dark); }
.jtls-offer-cards .jtls-offer-btn:hover { filter: brightness(.96); }
.jtls-oc-state { display: block; text-align: center; padding: 11px 14px; border-radius: var(--jtls-radius-md); background: var(--jtls-bg-gray); color: #4a4a4a; font-weight: 700; font-size: .88rem; }
.jtls-oc-card.is-current .jtls-oc-state, .jtls-oc-card.is-included .jtls-oc-state { background: var(--jtls-success-light); color: #1b6b60; }

.jtls-oc-compare { margin: 14px 0 0; text-align: center; }
.jtls-oc-compare .jtls-offer-btn { width: auto; padding-left: 26px; padding-right: 26px; }
.jtls-oc-compare-link { color: var(--jtls-primary-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Grille : 3 colonnes sur grand écran, dans l'ordre du catalogue. */
@media (min-width: 900px) {
    .jtls-offer-cards.is-grid .jtls-oc-list { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
    .jtls-offer-cards.is-grid .jtls-oc-card { order: var(--jtls-oc-order, 0); }
}

/* Compact : une ligne par offre (nom + prix à gauche, bouton à droite dès 520 px). */
.jtls-offer-cards.is-compact .jtls-oc-list { gap: 10px; }
.jtls-offer-cards.is-compact .jtls-oc-card { padding: 16px 14px 14px; gap: 6px; }
.jtls-offer-cards.is-compact .jtls-oc-price strong { font-size: 1.1rem; }
@media (min-width: 520px) {
    .jtls-offer-cards.is-compact .jtls-oc-card { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "head cta" "price cta" "credit cta"; align-items: center; column-gap: 16px; }
    .jtls-offer-cards.is-compact .jtls-oc-head { grid-area: head; }
    .jtls-offer-cards.is-compact .jtls-oc-price { grid-area: price; }
    .jtls-offer-cards.is-compact .jtls-oc-credit { grid-area: credit; }
    .jtls-offer-cards.is-compact .jtls-oc-cta { grid-area: cta; padding-top: 0; min-width: 190px; }
}

/* Page « Nos offres » : cartes seulement sous 761 px (au-delà, le tableau comparatif). */
@media (min-width: 761px) {
    .jtls-offer-cards.is-mobile-only { display: none; }
}