/* -- Base commune --  */
@keyframes dfScrollUp { from { transform: translateY(0); } to { transform: translateY(-50%); } }

/* Conteneur : 3 colonnes sur PC, empilé sur mobile */
.df-encarts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;margin-bottom: 10px; }

.df-encart { font-family: 'Barlow', sans-serif; border-radius: 16px; overflow: hidden; height: 420px; transition: transform .2s, box-shadow .2s; }
.df-encart:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(229,8,126,.25); }

.df-cta { font-weight: 700; font-size: 15px; padding: 11px 22px; border-radius: 8px; text-decoration: none; transition: background .2s; }
.df-cta-pink { background: #E5087E; color: #fff; }
.df-cta-pink:hover { background: #FF2E9A; color: #fff; }
.df-cta-white { background: #fff; color: #16101E; }
.df-cta-white:hover { background: #FFC400; color: #16101E; }

/* Variantes de texte PC / mobile */
.df-mob { display: none; }
.df-pc  { display: inline; }

/* ── Encart 1 : Avis / Réassurance ── */
.df-avis { background: #1D1233; display: flex; flex-direction: column; }
.df-avis-head { padding: 20px 20px 12px; display: flex; align-items: center; justify-content: space-between; }
.df-avis-title { display: flex; flex-direction: column; gap: 2px; }
.df-avis-h { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 26px; color: #fff; letter-spacing: .5px; }
.df-avis-note { color: #FFB400; font-size: 16px; letter-spacing: 2px; }
.df-avis-note b { color: #fff; font-weight: 700; }
.df-avis-note em { color: #B7A9CC; font-size: 12px; font-style: normal; }
.df-avis-badge { width: 56px; height: 56px; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; border: 3px solid #FFB400; }
.df-avis-badge span { font-size: 9px; font-weight: 700; color: #1D1233; line-height: 1.1; }
.df-avis-badge i { font-size: 8px; color: #FFB400; font-style: normal; }
.df-avis-scroll { overflow: hidden; flex: 1; position: relative; padding: 0 20px; }
.df-avis-track { display: flex; flex-direction: column; gap: 10px; animation: dfScrollUp 22s linear infinite; }
.df-review { background: rgba(255,255,255,.07); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.df-review-stars { color: #FFB400; font-size: 12px; letter-spacing: 1px; }
.df-review-stars b { color: #B7A9CC; font-weight: 600; }
.df-review-txt { color: #EDE7F5; font-size: 13px; line-height: 1.4; }
.df-avis-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(transparent, #1D1233); pointer-events: none; }
.df-avis-chips { display: flex; gap: 8px; padding: 14px 20px 18px; }
.df-avis-chips span { background: rgba(229,8,126,.18); color: #FF63B5; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 20px; }

/* ── Encarts 2 & 3 : bannières image (Promos + Stock) ── */
.df-banner { position: relative; background: #16101E; }
.df-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.df-banner-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(14,10,20,.92) 0%, rgba(14,10,20,.35) 45%, transparent 70%); }
.df-banner-body { position: absolute; left: 20px; right: 20px; bottom: 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.df-banner-text { display: flex; flex-direction: column; gap: 10px; }
.df-banner-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 38px; line-height: 1; color: #fff; }
.df-banner-sub { color: #D8CCE8; font-size: 14px; }

/* Badge jaune (Promos) */
.df-tag-promo { position: absolute; top: 16px; right: 16px; background: #FFC400; color: #16101E; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 22px; padding: 6px 14px; border-radius: 8px; transform: rotate(3deg); }

/* Badge Stock Europe */
.df-tag-stock { position: absolute; top: 16px; right: 16px; display: flex; align-items: center; gap: 8px; background: rgba(14,10,20,.75); padding: 6px 12px; border-radius: 8px; }
.df-tag-stock .df-flag { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 16px; border-radius: 2px; background: #003399; color: #FFCC00; font-size: 7px; letter-spacing: 1px; font-style: normal; }
.df-tag-stock b { color: #fff; font-size: 12px; font-weight: 700; }

/* ═══════════════ MOBILE (≤ 767px) ═══════════════ */
@media (max-width: 767px) {
  .df-mob { display: inline; }
  .df-pc  { display: none; }

  .df-encarts { grid-template-columns: 1fr; gap: 14px; }

  .df-encart { border-radius: 14px; }
  .df-cta { font-size: 13px; padding: 10px 14px; white-space: nowrap; }

  /* Avis */
  .df-avis { height: 300px; }
  .df-avis-head { padding: 14px 14px 8px; }
  .df-avis-h { font-size: 20px; letter-spacing: 0; }
  .df-avis-note { font-size: 13px; }
  .df-avis-note em { font-size: 11px; }
  .df-avis-badge { width: 44px; height: 44px; border-width: 2px; }
  .df-avis-badge span { font-size: 7px; }
  .df-avis-badge i { font-size: 6px; }
  .df-avis-scroll { padding: 0 14px; }
  .df-avis-track { gap: 8px; }
  .df-review { border-radius: 8px; padding: 8px 10px; }
  .df-review-stars { font-size: 11px; }
  .df-review-txt { font-size: 12px; }
  .df-avis-fade { height: 32px; }
  .df-avis-chips { gap: 6px; padding: 10px 14px 14px; flex-wrap: wrap; }
  .df-avis-chips span { font-size: 11px; padding: 4px 9px; }

  /* Bannières */
  .df-banner { height: 220px; }
  .df-banner-overlay { background: linear-gradient(to top, rgba(14,10,20,.92) 0%, rgba(14,10,20,.3) 50%, transparent 75%); }
  .df-banner-body { left: 14px; right: 14px; bottom: 14px; flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .df-banner-text { gap: 2px; }
  .df-banner-title { font-size: 26px; }
  .df-banner-sub { font-size: 12px; }
  .df-tag-promo { top: 12px; right: 12px; font-size: 17px; padding: 4px 10px; border-radius: 6px; }
  .df-tag-stock { top: 12px; right: 12px; gap: 6px; padding: 4px 9px; border-radius: 6px; }
  .df-tag-stock .df-flag { width: 20px; height: 13px; font-size: 6px; }
  .df-tag-stock b { font-size: 10px; }
}