/* Accueil — refonte visuelle.
   Suit l'accent du thème actif (var(--accent)), donc l'orange par défaut
   comme le bleu « Abysses ». Animations : transform/opacity/stroke, coupées
   par prefers-reduced-motion. Les visuels ajoutés sont décoratifs. */

.home-wrap{position:relative;isolation:isolate}
.home-wrap::before{content:'';position:absolute;z-index:-1;left:-20px;right:-20px;top:-40px;height:420px;pointer-events:none;background:radial-gradient(70% 60% at 85% 10%,rgba(var(--accent-rgb),.2),transparent 70%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23fff' stroke-opacity='.07' stroke-width='1.2'/%3E%3C/svg%3E") 0 0/28px 50px;-webkit-mask-image:linear-gradient(to bottom,#000 20%,transparent);mask-image:linear-gradient(to bottom,#000 20%,transparent)}

/* ── En-tête avec avatar ── */
.home-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:6px 2px 16px}
.home-head-copy{min-width:0;padding-bottom:6px}
.home-kicker{letter-spacing:2.4px}
.home-title{font-size:40px;line-height:.95;text-transform:uppercase;letter-spacing:.2px;overflow-wrap:anywhere}
.home-date{font-size:12px;margin-top:8px}
.home-hero-av{position:relative;flex:0 0 108px;width:108px;height:124px;margin:-6px -4px 0 0}
.home-hero-hex{position:absolute;left:50%;bottom:6px;width:96px;height:106px;transform:translateX(-50%);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--rank,var(--accent)) 38%,transparent),color-mix(in srgb,var(--accent) 14%,#0b0b0e) 70%)}
.home-hero-hex::before{content:'';position:absolute;inset:0;clip-path:inherit;background:linear-gradient(160deg,var(--rank,var(--accent)),transparent 45%,transparent 60%,var(--accent));-webkit-mask:linear-gradient(#000 0 0);opacity:.85}
.home-hero-hex::after{content:'';position:absolute;inset:2px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--rank,var(--accent)) 28%,#101014),#0b0b0e 75%)}
.home-hero-fx{position:absolute;z-index:1;left:50%;bottom:4px;width:200px;height:232px;transform:translateX(-50%) scale(.52);transform-origin:50% 100%;pointer-events:none}
.home-hero-fx .char-fx{inset:0;width:200px;height:232px;overflow:visible}
.home-hero-av img{position:absolute;z-index:2;left:50%;bottom:4px;height:118px;width:auto;transform:translateX(-50%);filter:drop-shadow(0 8px 10px rgba(0,0,0,.7));animation:homeFloat 4.6s ease-in-out infinite}

/* ── Bouton principal ── */
.home-start{min-height:84px;padding:18px 18px 18px 20px;border-radius:22px;background:radial-gradient(120% 140% at 100% 0%,rgba(255,255,255,.28),transparent 50%),linear-gradient(135deg,color-mix(in srgb,var(--accent) 72%,#fff),var(--accent) 45%,color-mix(in srgb,var(--accent) 70%,#000));box-shadow:0 16px 36px rgba(var(--accent-rgb),.38),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .25s cubic-bezier(.16,1,.3,1)}
.home-start:active{transform:scale(.985)}
.home-start-hex{position:absolute;inset:0;opacity:.16;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E") 0 0/28px 50px;-webkit-mask-image:linear-gradient(100deg,transparent 30%,#000);mask-image:linear-gradient(100deg,transparent 30%,#000);animation:homeHexDrift 18s linear infinite}
.home-start-copy b{font-size:25px;line-height:1;text-transform:uppercase;letter-spacing:.3px}
.home-start-copy span{font-size:12px;color:rgba(255,255,255,.86);margin-top:6px}
.home-start-arrow{width:52px;height:52px;flex:0 0 52px;background:rgba(255,255,255,.95);box-shadow:0 8px 20px rgba(0,0,0,.25)}
.home-start-arrow::before{content:'';position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(255,255,255,.55);animation:homePing 2.4s cubic-bezier(.16,1,.3,1) infinite}
.home-start-arrow svg{width:22px;height:22px;margin-left:3px;fill:var(--accent)}

/* ── Cartes ── */
.home-card{position:relative;overflow:hidden;border-radius:20px;border:1px solid rgba(255,255,255,.07);background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.01) 55%),var(--bg2);box-shadow:0 12px 30px rgba(0,0,0,.28)}
.home-card::before{content:'';position:absolute;left:16px;right:16px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.55),transparent)}
.home-card-label{font-size:10px;letter-spacing:1.6px;color:color-mix(in srgb,var(--accent) 55%,var(--muted))}

/* Semaine : anneau + 7 jours */
.home-week-top{display:flex;align-items:center;gap:10px}
.home-week-ring{position:relative;flex:0 0 46px;width:46px;height:46px}
.home-week-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.home-week-ring circle{fill:none;stroke-width:11;stroke-linecap:round}
.home-ring-track{stroke:rgba(255,255,255,.08)}
.home-ring-fill{stroke:var(--accent);stroke-dasharray:calc(var(--p,0)*100) 100;filter:drop-shadow(0 0 5px rgba(var(--accent-rgb),.7))}
.home-week-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:16px;color:var(--accent)}
.home-week .home-card-value{font-size:34px}
.home-week-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:12px}
.home-week-days i{height:8px;border-radius:4px;background:rgba(255,255,255,.08)}
.home-week-days i.later{background:rgba(255,255,255,.04)}
.home-week-days i.on{background:linear-gradient(90deg,var(--accent),var(--accent2));box-shadow:0 0 10px rgba(var(--accent-rgb),.6)}
.home-week-days i.today{outline:1.5px solid rgba(var(--accent-rgb),.75);outline-offset:2px}

/* Rang */
.home-rank-card{background:radial-gradient(110% 90% at 0% 0%,color-mix(in srgb,var(--rank) 20%,transparent),transparent 60%),linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.01) 55%),var(--bg2)}
.home-rank-badge{width:46px;height:46px;flex:0 0 46px;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--rank) 70%,transparent));animation:homeBadge 4s ease-in-out infinite}
.home-rank-name{font-size:19px}
.home-rank-card .home-progress{position:relative;height:7px}
.home-rank-card .home-progress i{position:relative;box-shadow:0 0 12px color-mix(in srgb,var(--rank) 70%,transparent)}
.home-rank-card .home-progress i::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-100%);animation:homeBarShine 3.2s ease-in-out infinite 1s}
.home-progress{height:7px}

/* Dernière séance / meilleure performance */
.home-tile{padding-left:68px;min-height:84px}
.home-tile-icon{position:absolute;left:15px;top:50%;display:grid;place-items:center;width:40px;height:40px;margin-top:-20px;border-radius:13px;background:rgba(var(--accent-rgb),.12);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.35)}
.home-tile-icon svg{width:21px;height:21px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.home-tile-best .home-tile-icon{background:radial-gradient(circle at 35% 30%,rgba(255,214,120,.35),rgba(var(--accent-rgb),.16) 70%);box-shadow:inset 0 0 0 1px rgba(255,214,120,.45),0 0 18px rgba(255,200,90,.18)}
.home-tile-best .home-tile-icon svg{stroke:#ffd27a}
.home-tile .home-card-label{margin-bottom:6px}
.home-points{font-size:22px;color:#fff;padding:5px 10px;border-radius:12px;background:rgba(var(--accent-rgb),.16);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.35)}

/* Près de toi : nom et détails sur deux lignes */
.home-person-main{display:flex;flex-direction:column;gap:2px}
.home-person-name{display:flex;align-items:center;gap:6px;font-size:16px}
.home-person .lb-mini-av{border-radius:13px}
.home-person-tag{border-radius:8px}

/* Entrée en scène */
.home-wrap>*{animation:homeRise .6s cubic-bezier(.16,1,.3,1) both}
.home-wrap>:nth-child(2){animation-delay:.05s}.home-wrap>:nth-child(3){animation-delay:.1s}.home-wrap>:nth-child(4){animation-delay:.15s}.home-wrap>:nth-child(5){animation-delay:.2s}.home-wrap>:nth-child(6){animation-delay:.25s}.home-wrap>:nth-child(7){animation-delay:.3s}.home-wrap>:nth-child(n+8){animation-delay:.35s}
.home-ring-fill{animation:homeRing 1.2s cubic-bezier(.16,1,.3,1) both .3s}
.home-week-days i{animation:homePop .4s cubic-bezier(.16,1,.3,1) both}
.home-week-days i:nth-child(2){animation-delay:.04s}.home-week-days i:nth-child(3){animation-delay:.08s}.home-week-days i:nth-child(4){animation-delay:.12s}.home-week-days i:nth-child(5){animation-delay:.16s}.home-week-days i:nth-child(6){animation-delay:.2s}.home-week-days i:nth-child(7){animation-delay:.24s}

@keyframes homeFloat{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-4px)}}
@keyframes homeHexDrift{to{background-position:0 50px}}
@keyframes homePing{0%{transform:scale(.85);opacity:.9}80%,100%{transform:scale(1.25);opacity:0}}
@keyframes homeBadge{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes homeBarShine{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
@keyframes homeRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes homeRing{from{stroke-dasharray:0 100}}
@keyframes homePop{from{opacity:0;transform:scaleX(.3)}to{opacity:1;transform:none}}

@media(max-width:350px){
  .home-title{font-size:32px}
  .home-hero-av{flex-basis:88px;width:88px;height:104px}
  .home-hero-hex{width:80px;height:90px}
  .home-hero-av img{height:98px}
  .home-hero-fx{transform:translateX(-50%) scale(.44)}
}
@media(prefers-reduced-motion:reduce){
  .home-wrap *,.home-wrap::before,.home-wrap *::before,.home-wrap *::after{animation:none!important;transition:none!important}
}