/* ============================================================
   DÉFIS V2 — scopé #sec-defis
   Hero récap · série · sections quotidien / hebdo / permanent
   ============================================================ */
@keyframes df-wob { 0%,100%{transform:rotate(-2deg);} 50%{transform:rotate(2deg) scale(1.04);} }
@keyframes df-claim { 0%,100%{transform:rotate(6deg) translateY(0);} 50%{transform:rotate(6deg) translateY(-3px);} }

#sec-defis.sec { padding: 0 0 16px; }
#sec-defis * { box-sizing: border-box; }
#sec-defis { font-family: var(--fb); }

/* ---- HERO ---- */
#sec-defis .hero { padding:18px 18px 4px; }
#sec-defis .hero .card { position:relative; transform:rotate(-1deg); }
#sec-defis .hero .card::before { content:''; position:absolute; top:7px; left:7px; right:-7px; bottom:-7px; background:var(--ink); }
#sec-defis .hero .bd { position:relative; border:4px solid var(--ink); background:#FF2E93; color:var(--paper); padding:18px 16px; overflow:hidden; }
#sec-defis .hero .ghost { position:absolute; top:-18px; right:-16px; width:120px; height:120px; opacity:.25; } #sec-defis .hero .ghost img { width:100%; height:100%; }
#sec-defis .hero .lbl { font-family:var(--fb); font-weight:700; font-size:10px; letter-spacing:2px; opacity:.85; }
#sec-defis .hero .count { font-family:var(--fd); font-size:52px; line-height:46px; margin:4px 0 2px; }
#sec-defis .hero .count .tot { font-size:24px; opacity:.7; }
#sec-defis .hero .sub { font-family:var(--fb); font-weight:700; font-size:11px; opacity:.9; }
#sec-defis .hero .rew { margin-top:14px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
#sec-defis .hero .rew .chip { display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border:2.5px solid var(--ink); background:var(--paper); color:var(--ink); box-shadow:3px 3px 0 var(--ink); font-family:var(--fd); font-size:13px; }
#sec-defis .hero .rew .chip img { width:14px; height:14px; }
#sec-defis .hero .rew .claim { margin-left:auto; display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border:3px solid var(--ink); background:#FFD600; color:var(--ink); box-shadow:3px 3px 0 var(--ink); font-family:var(--fd); font-size:14px; letter-spacing:1px; cursor:pointer; animation:df-wob 1.4s ease-in-out infinite; }

/* ---- MIX DU JOUR (défi communauté) — brutalist plein violet ---- */
#sec-defis .ddj { position:relative; margin:12px 0 0; cursor:pointer; transform:rotate(1deg); -webkit-tap-highlight-color:transparent; }
#sec-defis .ddj::before { content:''; position:absolute; top:6px; left:6px; right:-6px; bottom:-6px; background:var(--ink); }
#sec-defis .ddj .bd { position:relative; border:4px solid var(--ink); background:#9D4EDD; color:#fff; padding:13px; display:flex; align-items:center; gap:12px; transition:transform .12s ease, box-shadow .12s ease; }
#sec-defis .ddj:hover .bd { transform:translate(-1px,-1px); }
#sec-defis .ddj:active .bd { transform:translate(4px,4px); }
#sec-defis .ddj:focus-visible { outline:none; }
#sec-defis .ddj:focus-visible .bd { box-shadow:0 0 0 3px #FFD600; }
#sec-defis .ddj .em { width:52px; height:52px; flex-shrink:0; border:3px solid var(--ink); background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:3px 3px 0 var(--ink); transform:rotate(-6deg); }
#sec-defis .ddj .em img { width:36px; height:36px; }
#sec-defis .ddj .tx { flex:1; min-width:0; }
#sec-defis .ddj .nm { font-family:var(--fd); font-size:20px; line-height:20px; letter-spacing:.5px; }
#sec-defis .ddj .d { font-family:var(--fb); font-weight:700; font-size:11px; margin-top:4px; line-height:1.3; color:rgba(255,255,255,0.92); }
#sec-defis .ddj .go { flex-shrink:0; align-self:stretch; display:flex; align-items:center; padding:0 12px; border:3px solid var(--ink); background:#FFD600; color:#0A0A0A; font-family:var(--fd); font-size:13px; letter-spacing:.5px; box-shadow:3px 3px 0 var(--ink); }
/* MIX DU JOUR déjà fait aujourd'hui : état "complété" (vert + check) */
#sec-defis .ddj.done .bd { background:#2F9E6B; }
#sec-defis .ddj.done .go { background:#5BE885; }

/* ---- TIMER de section — badge brutalist ---- */
#sec-defis .shead .timer { position:relative; margin-left:auto; display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border:3px solid var(--ink); background:var(--paper); box-shadow:2px 2px 0 var(--ink); font-family:var(--fd); font-size:13px; letter-spacing:.5px; color:#0A0A0A; white-space:nowrap; }
#sec-defis .shead .timer img { width:15px; height:15px; }
#sec-defis .shead .timer b { font-family:var(--fd); font-weight:400; }
#sec-defis .shead .timer.daily { background:#FFD600; }
#sec-defis .shead .timer.weekly { background:#5BD8E5; }

/* ---- STREAK ---- */
#sec-defis .streak { margin:14px 18px 0; position:relative; }
#sec-defis .streak::before { content:''; position:absolute; top:5px; left:5px; right:-5px; bottom:-5px; background:var(--ink); }
#sec-defis .streak .bd { position:relative; border:3px solid var(--ink); background:#FFD600; color:#0A0A0A; padding:11px 13px; display:flex; align-items:center; gap:11px; }
#sec-defis .streak .em { width:38px; height:38px; flex-shrink:0; } #sec-defis .streak .em img { width:100%; height:100%; }
#sec-defis .streak .tx { flex:1; min-width:0; } #sec-defis .streak .tx .nm { font-family:var(--fd); font-size:16px; letter-spacing:.5px; } #sec-defis .streak .tx .d { font-family:var(--fb); font-weight:700; font-size:10px; color: rgba(10,10,10,0.7); }
#sec-defis .streak .days { display:flex; gap:4px; flex-shrink:0; }
#sec-defis .streak .days i { width:16px; height:16px; border:2.5px solid var(--ink); background:var(--paper); display:block; }
#sec-defis .streak .days i.on { background:#FF5252; }

/* ---- SECTIONS ---- */
#sec-defis .section { margin-top:8px; }
#sec-defis .shead { display:flex; align-items:center; gap:10px; padding:22px 18px 12px; }
#sec-defis .stk { position:relative; }
#sec-defis .stk::before { content:''; position:absolute; top:3px; left:3px; right:-3px; bottom:-3px; background:var(--ink); }
#sec-defis .stk .b { position:relative; display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border:3px solid var(--ink); font-family:var(--fd); font-size:14px; letter-spacing:1px; }
#sec-defis .stk .b img { width:16px; height:16px; }
#sec-defis .stk.daily .b { background:#FFD600; color:#0A0A0A; } #sec-defis .stk.weekly .b { background:#5BD8E5; color:#0A0A0A; } #sec-defis .stk.perm .b { background:#5BE885; color:#0A0A0A; } #sec-defis .stk.event .b { background:#9D4EDD; color:#FFF; }
#sec-defis .sinfo { margin-left:auto; font-family:var(--fb); font-weight:700; font-size:10px; letter-spacing:.5px; color: rgba(10,10,10,0.6); }
#sec-defis .sinfo.urgent { color:#FF5252; }

/* ---- SECTION VIDE (tout récupéré) ---- */
#sec-defis .defi-empty { margin:0 18px; display:flex; align-items:center; justify-content:center; gap:8px; border:3px dashed var(--ink); background:color-mix(in srgb, #5BE885 14%, var(--paper)); padding:14px; font-family:var(--fd); font-size:13px; letter-spacing:.5px; color:rgba(10,10,10,0.65); }
#sec-defis .defi-empty img { width:20px; height:20px; }

/* ---- CARTE DÉFI ---- */
#sec-defis .ds { padding:0 18px; display:flex; flex-direction:column; gap:13px; }
#sec-defis .defi { position:relative; }
#sec-defis .defi::before { content:''; position:absolute; top:5px; left:5px; right:-5px; bottom:-5px; background:var(--ink); }
#sec-defis .defi .bd { position:relative; border:3px solid var(--ink); background:var(--paper); padding:13px; display:flex; gap:12px; }
#sec-defis .defi .em { width:50px; height:50px; flex-shrink:0; border:3px solid var(--ink); background:var(--paper); display:flex; align-items:center; justify-content:center; box-shadow:3px 3px 0 var(--ink); transform:rotate(-3deg); }
#sec-defis .defi .em img { width:34px; height:34px; }
#sec-defis .defi .meta { flex:1; min-width:0; }
#sec-defis .defi .nm { font-family:var(--fd); font-size:18px; line-height:18px; letter-spacing:.5px; }
#sec-defis .defi .ds2 { font-family:var(--fb); font-weight:700; font-size:10px; color: rgba(10,10,10,0.65); margin:3px 0 9px; line-height:1.35; }
#sec-defis .pbar { position:relative; height:18px; border:3px solid var(--ink); background:var(--paper); overflow:hidden; }
#sec-defis .pbar .f { position:absolute; inset:0 auto 0 0; background:#5BE885; width:100%; transition:width .4s ease; }
#sec-defis .pbar .f.anim-fill {
  background: #5BE885 linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
  background-size: 200% 100%;
  animation: df-shine 1.5s infinite linear;
}
@keyframes df-shine { 0% { background-position: -100% 0; } 100% { background-position: 200% 0; } }
#sec-defis .pbar .t { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--fd); font-size:10px; letter-spacing:.5px; color:#0A0A0A; mix-blend-mode:hard-light; }
#sec-defis .defi .bot { display:flex; align-items:center; gap:7px; margin-top:9px; }
#sec-defis .defi .bot .r { display:inline-flex; align-items:center; gap:4px; padding:3px 7px; border:2.5px solid var(--ink); font-family:var(--fd); font-size:12px; box-shadow:2px 2px 0 var(--ink); }
#sec-defis .defi .bot .r.xp { background:#FF2E93; color:var(--paper); } #sec-defis .defi .bot .r.co { background:#FFD600; color:#0A0A0A; }
#sec-defis .defi .bot .r img { width:12px; height:12px; }
#sec-defis .corner { position:absolute; top:-9px; right:-7px; transform:rotate(6deg); padding:3px 8px; border:2.5px solid var(--ink); font-family:var(--fd); font-size:10px; letter-spacing:.5px; box-shadow:2px 2px 0 var(--ink); z-index:3; }
#sec-defis .corner.claim { background:#FFD600; color:#0A0A0A; animation:df-claim 1.2s ease-in-out infinite; }
@keyframes df-pulse { 0% { transform: rotate(6deg) scale(1); } 100% { transform: rotate(6deg) scale(1.15); } }
#sec-defis .corner.pulse { animation: df-pulse 0.6s infinite alternate; }
#sec-defis .corner.done { background:#5BE885; color:#0A0A0A; } #sec-defis .corner.lock { background:var(--paper); color:var(--ink); opacity:0.7; } #sec-defis .corner.x2 { background:#9D4EDD; color:#FFF; }
#sec-defis .defi.done .bd { background:color-mix(in srgb, #5BE885 10%, var(--paper)); }
#sec-defis .defi.claimable .bd { background:color-mix(in srgb, #FFD600 20%, var(--paper)); cursor: pointer; transition: transform 0.2s ease; }
#sec-defis .defi.claimable:hover .bd { transform: scale(1.02); }
#sec-defis .defi.claimable .em { transform: rotate(10deg); transition: transform 0.2s ease; }
#sec-defis .defi.claimable:hover .em { transform: rotate(-10deg) scale(1.1); }
#sec-defis .defi.locked .bd { opacity:0.6; } #sec-defis .defi.locked .em img { filter:grayscale(.7) opacity(.55); } #sec-defis .defi.locked .nm { color: rgba(10,10,10,0.5); }