/* ==========================================================================
   BALLON ROND — Habillage « menthe » (refonte visuelle)
   Chargé APRÈS styles.css. Pour revenir à l'ancien habillage sombre : retirer
   la ligne <link href="skin.css"> de index.html.

   Principe : les jetons de couleur sont remappés.
   - fond clair menthe, surfaces vert tendre, texte vert profond ;
   - l'« accent » (--lime) devient le vert profond de marque (boutons, sélection) et
     --on-lime devient le lime clair posé dessus ;
   - les îlots sombres (cartes héro) rétablissent des jetons « sur fond sombre ».
   ========================================================================== */
:root{
  --ov:11,93,63;
  --mint-bg:#F2FBE3;
  --mint-bg-2:#FBFFF1;
  --surface:#E4F6C9;
  --surface-2:#D6F0AC;
  --deep:#0B5D3F;
  --deep-2:#0F6A49;
  --deep-ink:#073B29;
  --soft-lime:#BDF57A;

  --ink:var(--mint-bg);
  --ink-900:var(--mint-bg);
  --ink-800:var(--surface);
  --ink-700:var(--surface-2);
  --ink-600:#C8E99A;
  --lime:var(--deep);
  --on-lime:var(--soft-lime);
  --green:#2FA84F;
  --orange:#E7791A;
  --cream:var(--surface);
  --cream-2:var(--surface-2);

  --on-ink:var(--deep-ink);
  --on-ink-mut:rgba(7,59,41,.68);
  --on-ink-faint:rgba(7,59,41,.54);
  --on-cream:var(--deep-ink);
  --on-cream-mut:rgba(7,59,41,.68);
  --line-ink:rgba(11,93,63,.13);
  --line-ink-strong:rgba(11,93,63,.28);
  --line-cream:rgba(11,93,63,.13);
  --crest-stroke:var(--deep);

  --r-md:20px; --r-lg:28px; --r-xl:36px;
}

/* ---- Fond ---- */
body,.device{background:var(--mint-bg)}
.app,.screen{background:linear-gradient(180deg,var(--mint-bg) 0%,var(--mint-bg-2) 100%);color:var(--on-ink)}
.sticky-cta{background:linear-gradient(to top,var(--mint-bg-2) 62%,rgba(251,255,241,0))}
.composer,.quick{background:var(--mint-bg-2)}
.sheet-backdrop{background:rgba(7,59,41,.45)}
.sheet{background:var(--mint-bg-2);border-top:0;box-shadow:0 -20px 50px -20px rgba(7,59,41,.35)}

/* ---- Typo : titres plus affirmés ---- */
.h1{font-weight:800;letter-spacing:-.03em}
.h2{font-weight:800;letter-spacing:-.025em}
.cap{letter-spacing:.12em}
.section-head .link{color:var(--deep);font-weight:700}

/* ---- Boutons ---- */
.btn{min-height:54px}
.btn-primary{background:var(--deep);color:var(--soft-lime)}
.btn-primary:hover{filter:none;background:var(--deep-2)}
.btn-secondary{background:var(--soft-lime);color:var(--deep-ink);border:0}
.btn-secondary:hover{background:#B2EE6C}
.btn-ghost{color:var(--on-ink-mut)}
.btn-danger{color:#C2412D;border-color:rgba(194,65,45,.4)}
.card .btn-secondary,.on-cream .btn-secondary{background:var(--soft-lime);color:var(--deep-ink);border:0}
.card .btn-secondary:hover{background:#B2EE6C}
.card-lime{background:var(--deep);color:var(--soft-lime)}

/* ---- Icônes d'en-tête : pastilles vert tendre ---- */
.icon-btn{border:0;background:var(--surface);color:var(--deep-ink)}
.icon-btn:hover{background:var(--surface-2)}
.icon-btn.plain{background:var(--surface)}
.topbar .icon-btn.plain[data-back],.topbar .icon-btn.plain[aria-label*="etour"],.topbar .icon-btn.plain[aria-label*="tape"]{background:transparent}
.icon-btn .dot{background:var(--orange);border-color:var(--mint-bg)}
.icon-btn .dot.dot-jaune{background:#F5B800}
.topbar{padding:10px 16px 12px}
.topbar .h2{font-size:26px}

/* ---- Cartes ---- */
.card,.card-ink,.list,.tile,.catcard,.mini,.post,.fmt-card,.flat-tile.ink{
  background:var(--surface);border:0;box-shadow:none;
}
.card{border-radius:var(--r-lg)}
.card-ink{border-radius:var(--r-lg)}
.list{border-radius:var(--r-lg)}
.list-row{border-bottom:1px solid rgba(11,93,63,.09)}
.card .meta,.card .lead,.next-strip .meta{color:var(--on-cream-mut)}
.card .cap{color:rgba(7,59,41,.6)}
.next-strip{background:var(--surface)}
.stat{background:var(--surface)}
.stats{background:rgba(11,93,63,.1)}

/* ---- Îlots sombres : jetons « sur fond sombre » rétablis ---- */
.hero-band,.flat-tile.lime,.hero-cta,.card-lime,.dark-card{
  --on-ink:#F4FBE8;
  --on-ink-mut:rgba(244,251,232,.74);
  --on-ink-faint:rgba(244,251,232,.6);
  --line-ink:rgba(244,251,232,.16);
  --line-ink-strong:rgba(244,251,232,.3);
  --lime:var(--soft-lime);
  --on-lime:var(--deep-ink);
  --ov:244,251,232;
  --ink:var(--deep);
  --ink-800:var(--deep-2);
  --cream:#F4FBE8;
  --on-cream:var(--deep-ink);
  color:var(--on-ink);
}
.hero-band{background:radial-gradient(130% 110% at 50% -15%,#17805A 0%,var(--deep) 60%);border-radius:0 0 var(--r-xl) var(--r-xl)}
.hero-band .badge-level{background:rgba(244,251,232,.14);color:#F4FBE8;box-shadow:none}
.flat-tile.lime,.hero-cta{background:var(--deep);color:#F4FBE8}
.flat-tile.lime .fi,.hero-cta .go{background:var(--soft-lime);color:var(--deep-ink)}
.flat-tile.ink{background:var(--surface);color:var(--deep-ink)}
.flat-tile.ink .fi{background:var(--deep);color:var(--soft-lime)}

/* ---- Tuiles / catégories : pastille profonde, icône lime ---- */
.tile,.catcard{border-radius:var(--r-lg)}
.tile .ti,.catcard .ti{background:var(--deep);color:var(--soft-lime);border-radius:50%}
.tile.sos .ti,.catcard.sos .ti{background:rgba(231,121,26,.18);color:var(--orange)}
.tile.sky .ti,.catcard.sky .ti{background:rgba(46,125,190,.16);color:#2E7DBE}
.tile.violet .ti,.catcard.violet .ti{background:rgba(120,90,200,.16);color:#6A4FC0}
.tile.dispo-on .ti{background:var(--deep);color:var(--soft-lime)}
.tile.has-dot::after{border-color:var(--surface)}
.tile b,.catcard b{font-weight:800}

/* ---- Puces, onglets segmentés, champs ---- */
.chip{background:var(--surface);border-color:transparent;color:var(--deep-ink)}
.chip[aria-pressed="true"]{background:var(--deep);color:var(--soft-lime)}
.chip.chip-check[aria-pressed="true"]::before{background:var(--soft-lime);color:var(--deep)}
.dchip{background:var(--surface);border-color:transparent}
.dchip[aria-pressed="true"]{background:var(--deep);color:var(--soft-lime);border-color:var(--deep)}
.dchip[aria-pressed="true"] small,.dchip[aria-pressed="true"] em{color:var(--soft-lime);opacity:.8}
.fmt-card[aria-pressed="true"]{background:var(--deep);border-color:var(--deep)}
.fmt-card[aria-pressed="true"] b,.fmt-card[aria-pressed="true"] small{color:var(--soft-lime)}
.fmt-card[aria-pressed="true"]::after{background:var(--soft-lime);color:var(--deep);box-shadow:0 0 0 2px var(--mint-bg)}
.seg{background:var(--surface);border:0}
.seg button{color:var(--on-ink-mut)}
.seg button[aria-selected="true"]{background:var(--deep);color:var(--soft-lime)}
.input,.searchbar{background:var(--surface);border-color:transparent}
.input:focus,.searchbar:focus-within{border-color:var(--deep);background:var(--surface)}
.searchbar{border-radius:var(--r-pill)}
.search-x{background:rgba(11,93,63,.12)}
.opt{background:var(--surface);border-color:transparent}
.opt[aria-pressed="true"]{background:var(--surface-2);border-color:var(--deep)}
.wheel-wrap{background:var(--surface);border-color:transparent}
.wheel-item.center{color:var(--deep)}
.switch{background:rgba(11,93,63,.2)}
.switch::after{background:#fff}
.switch[aria-checked="true"]{background:var(--soft-lime)}
.switch[aria-checked="true"]::after{background:var(--deep)}
input[type=range]::-webkit-slider-thumb{border-color:var(--mint-bg)}

/* ---- Avatars, badges ---- */
.avatar{background:var(--deep);color:var(--soft-lime)}
.avatar.lime{background:var(--soft-lime);color:var(--deep-ink)}
.badge-dispo{background:rgba(11,93,63,.1);color:var(--deep);box-shadow:none}
.badge-new{background:var(--deep);color:var(--soft-lime)}
.badge-confirm{background:var(--soft-lime);color:var(--deep-ink)}
.badge-pending{background:#FFE7C7;color:#8A4A00;box-shadow:none}
.badge-sos{background:var(--orange);color:#fff}
.badge-level,.card .badge-level,.card-ink .badge-level,.screen .badge-level,.sheet .badge-level{background:rgba(11,93,63,.09);color:var(--deep-ink);box-shadow:none}
.card .badge-dispo{background:rgba(11,93,63,.1);color:var(--deep)}
.card .badge-new{background:var(--deep);color:var(--soft-lime)}
.tag,.tag-chip{color:var(--deep)}
.tag-chip{background:rgba(11,93,63,.09);border-color:transparent}
.reply-chip{background:rgba(11,93,63,.08);color:var(--deep)}
.bar{background:rgba(11,93,63,.14)}
.bar i,.card .bar i{background:var(--deep)}
.ruban-lime{background:var(--deep);color:var(--soft-lime)}
.ruban-violet{background:var(--soft-lime);color:var(--deep-ink)}
.follow-btn{border-color:var(--deep);color:var(--deep)}
.card .follow-btn{border-color:var(--deep);color:var(--deep)}
.card-ink .bar i{background:var(--deep)}

/* ---- Barre d'onglets : 5 onglets inchangés, habillage clair ---- */
.tabbar{
  margin:0;padding:8px 10px calc(10px + env(safe-area-inset-bottom,0px));gap:0;border-radius:0;
  background:var(--mint-bg-2);border:0;border-top:1px solid rgba(11,93,63,.1);box-shadow:none;
}
.tab{color:var(--on-ink-faint);border-radius:var(--r-md)}
.tab span{font-weight:700}
.tab[aria-current="true"]{color:var(--deep);background:transparent}
.tab[aria-current="true"] span{font-weight:800}
.tab-create .tab-ico{background:var(--deep);color:var(--soft-lime);border-radius:16px;box-shadow:0 8px 18px -8px rgba(11,93,63,.7)}
.tab[aria-current="true"].tab-create .tab-ico{background:var(--deep)}
.tab .dot{background:var(--orange)}

/* ---- Accueil ---- */
.home-top{padding:16px 16px 10px}
.logo-word{color:var(--deep-ink)}
.flat-tile,.hero-cta{border-radius:var(--r-xl)}

/* ---- Divers ---- */
.toast{background:var(--deep);color:var(--soft-lime)}
.toast *{color:inherit}
.sos{background-color:var(--surface);background-image:linear-gradient(140deg,rgba(231,121,26,.22),rgba(231,121,26,.06));border-color:rgba(231,121,26,.4)}
.state-ico{background:var(--surface);border-color:transparent}
.state-ico.ok{background:var(--deep);color:var(--soft-lime)}
.bubble.them{background:var(--surface)}
.bubble.me{background:var(--deep);color:var(--soft-lime)}
.send{background:var(--deep);color:var(--soft-lime)}
.thumb,.art-img{background:var(--surface)}
.calday.has-ev{background:var(--surface)}
.calday.today{color:var(--deep);box-shadow:inset 0 0 0 1.5px var(--deep)}
.steps i{background:rgba(11,93,63,.14)}
.steps i.on{background:var(--deep)}
.tl-step.done .tl-dot{background:var(--deep);border-color:var(--deep);color:var(--soft-lime)}
.tl-step.current .tl-dot{background:var(--soft-lime);border-color:var(--deep);box-shadow:0 0 0 5px rgba(11,93,63,.12)}
.tl-step.current .tl-title{color:var(--deep)}
.spinner{border-top-color:var(--deep)}
.offline-bar{color:#fff}

/* ---- Retouches après premier passage ---- */
.hero-band{padding-top:14px!important}
.hero-band .badge,.hero-band .badge-level,.screen .hero-band .badge-level{background:rgba(244,251,232,.16);color:#F4FBE8;box-shadow:none}
.hero-band .meta,.hero-band .lead{color:rgba(244,251,232,.78)}
.tile.sky .ti,.catcard.sky .ti,.tile.violet .ti,.catcard.violet .ti{background:var(--deep);color:var(--soft-lime)}
.tile.sos .ti,.catcard.sos .ti{background:#FFD9AE;color:#B85A00}
.catcard.sos,.tile.sos{background-color:var(--surface)}
.topbar .h2{font-size:24px}

/* Carte d'en-tête des fiches (match, tournoi…) : même îlot profond que le héro */
.scroll > .card-ink:first-child,.scroll.pad > .card-ink:first-child{
  --on-ink:#F4FBE8;--on-ink-mut:rgba(244,251,232,.74);--on-ink-faint:rgba(244,251,232,.6);
  --line-ink:rgba(244,251,232,.16);--line-ink-strong:rgba(244,251,232,.3);--lime:var(--soft-lime);--on-lime:var(--deep-ink);--ov:244,251,232;
  background:radial-gradient(120% 140% at 50% -20%,#17805A 0%,var(--deep) 62%);color:#F4FBE8;border-radius:var(--r-xl);padding:20px;
}
.scroll > .card-ink:first-child .badge-level{background:rgba(244,251,232,.16);color:#F4FBE8;box-shadow:none}
.scroll > .card-ink:first-child .meta{color:rgba(244,251,232,.78)}

/* ==========================================================================
   Typographie et proportions des références (police ronde, titres francs)
   ========================================================================== */
:root{--f-display:'Plus Jakarta Sans','Space Grotesk',sans-serif;--f-body:'Plus Jakarta Sans','Space Grotesk',sans-serif}
body,.app{font-size:15px;letter-spacing:0}
.h1{font-size:34px;font-weight:800;letter-spacing:-.035em;line-height:1.05}
.h2{font-size:24px;font-weight:800;letter-spacing:-.03em}
.h3{font-size:17px;font-weight:700;letter-spacing:-.015em}
.cap{font-size:11px;font-weight:700;letter-spacing:.1em}
.section-head{margin:28px 0 14px}
.section-head .link{font-size:15px;font-weight:700;color:var(--deep)}
.topbar .h2{font-size:30px;letter-spacing:-.035em}
.icon-btn{width:44px;height:44px;background:var(--soft-lime);color:var(--deep-ink)}
.icon-btn:hover{background:#B2EE6C}
.icon-btn.plain{background:var(--soft-lime)}
.topbar .icon-btn.plain[data-back],.topbar .icon-btn.plain[aria-label*="etour"],.topbar .icon-btn.plain[aria-label*="tape"]{background:transparent}
.searchbar{height:56px;padding:0 10px 0 18px;background:#E9F8D2;border:1.5px solid #CBEC9E}
.search-input{font-size:16px;font-weight:500}
.btn{font-weight:700;font-size:16px;min-height:56px}
.btn-sm{min-height:44px;font-size:14px}
.chip{font-weight:600;font-size:14px;padding:11px 18px}
.chip-lg{padding:14px 20px;font-size:15px}
.card,.card-ink,.tile,.catcard,.list{border-radius:32px}
.tile,.catcard,.flat-tile{border-radius:32px}
.flat-tile,.hero-cta,.hero-band,.scroll > .card-ink:first-child{border-radius:40px}
.hero-band{border-radius:0 0 40px 40px}
.tab span{font-size:12px;font-weight:600}
.tab[aria-current="true"] span{font-weight:800}
.tabbar{padding-top:10px}
.list-row{padding:16px 18px}
.badge{font-family:var(--f-display);font-weight:800}
.tile b,.catcard b,.flat-tile b{font-weight:800;letter-spacing:-.02em}
.avatar,.stat-num,.counts b,.slot,.opt-title,.tl-title,.vs-name,.mini b,.urow b,.post-who b{font-family:var(--f-display)}

/* ==========================================================================
   ACCUEIL — reprise de la référence (carte héro, accès en pastilles, carte « à faire »)
   ========================================================================== */
.home-top .h3{font-size:19px;font-weight:800;letter-spacing:-.02em}
.home-top .meta{font-size:12.5px}
.hero-card{
  background:radial-gradient(120% 140% at 70% -30%,#17805A 0%,#0F5E47 60%);color:#F4FBE8;border-radius:40px;padding:22px 22px 22px;
  position:relative;overflow:hidden;
}
.hc-head h2{margin:0;font-size:24px;font-weight:800;letter-spacing:-.03em}
.hc-stats{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:14px;font-size:13px;font-weight:600;color:rgba(244,251,232,.82)}
.hc-stats span{display:inline-flex;align-items:center;gap:6px}
.hc-stats svg{color:var(--soft-lime);flex:none}
.hc-body{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:16px}
.hc-gauge{position:relative;width:150px;height:84px;flex:none}
.hc-gauge .gauge{position:absolute;inset:0;width:100%;height:100%}
.hc-gauge b{position:absolute;left:0;right:0;bottom:-2px;text-align:center;font-size:30px;font-weight:800;letter-spacing:-.03em;color:#fff}
.hc-btn{
  min-height:52px;padding:0 24px;border-radius:999px;background:var(--soft-lime);color:var(--deep-ink);
  font-weight:800;font-size:15px;white-space:nowrap;
}
.pill-row{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;margin-inline:-18px;padding:0 18px 4px}
.pill-row::-webkit-scrollbar{display:none}
.pill{
  position:relative;flex:none;display:inline-flex;align-items:center;gap:10px;padding:8px 20px 8px 8px;border-radius:999px;
  background:var(--surface);color:var(--deep-ink);
}
.pill .pi{width:44px;height:44px;border-radius:50%;background:var(--deep);color:var(--soft-lime);display:grid;place-items:center;flex:none}
.pill b{font-weight:700;font-size:15px;white-space:nowrap;letter-spacing:-.01em}
.pill.is-sos .pi{background:#FFD9AE;color:#B85A00}
.pill.has-dot::after{content:"";position:absolute;top:6px;right:8px;width:11px;height:11px;border-radius:50%;background:#F5B800;border:2px solid var(--surface)}
.task-card{
  display:flex;gap:14px;align-items:stretch;justify-content:space-between;padding:22px;border-radius:36px;
  background:var(--surface-2);color:var(--deep-ink);
}
.tk-text{display:flex;flex-direction:column;gap:12px;min-width:0}
.tk-text h3{margin:0;font-size:22px;font-weight:800;letter-spacing:-.03em}
.tk-pills{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:600;color:var(--on-ink-mut)}
.tk-pills span{display:inline-flex;align-items:center;gap:6px}
.tk-btn{
  align-self:flex-start;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;margin-top:4px;
  border-radius:999px;background:var(--deep);color:var(--soft-lime);font-weight:800;font-size:15px;
}
.tk-art{flex:none;width:112px;border-radius:28px;background:#C4E898;color:var(--deep);display:grid;place-items:center}
.home-top .h3{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ==========================================================================
   EXPLORER — reprise de l'écran « Workout » : grandes cartes verticales
   ========================================================================== */
.catgrid{gap:14px}
.catcard{flex-direction:column;align-items:flex-start;justify-content:space-between;gap:26px;min-height:150px;padding:20px;border-radius:32px}
.catcard .ti{width:56px;height:56px}
.catcard b{font-size:17px;font-weight:800;letter-spacing:-.02em}
.catcard small{font-size:13px;margin-top:3px}
.catgrid .catcard:last-child:nth-child(odd){grid-column:auto}
.catcard.sos,.tile.sos{background-image:none;border:0}
.catcard{min-height:140px}

/* ==========================================================================
   ACCUEIL v2 — barre « Trouver un match », carte compacte, pastilles « nuage »
   ========================================================================== */
.home-logo{flex:none;display:grid;place-items:center}
.home-top{gap:12px;padding:14px 16px 8px}
.find-bar{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 10px 10px 24px;min-height:68px;
  border-radius:999px;background:var(--surface);border:1.5px solid #C2E895;color:var(--deep-ink);
}
.find-bar b{display:block;font-size:18px;font-weight:800;letter-spacing:-.025em}
.find-bar small{display:block;font-size:12.5px;font-weight:500;color:var(--on-ink-mut);margin-top:1px}
.find-bar .fb-go{flex:none;width:48px;height:48px;border-radius:50%;background:var(--deep);color:var(--soft-lime);display:grid;place-items:center}
.find-bar:active{transform:scale(.99)}

.hero-mini{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:14px 14px 14px 18px;border-radius:32px;
  background:radial-gradient(120% 160% at 80% -40%,#17805A 0%,#0F5E47 62%);color:#F4FBE8;
}
.hero-mini:active{transform:scale(.99)}
.hm-gauge{position:relative;flex:none;width:78px;height:44px}
.hm-gauge .gauge{position:absolute;inset:0;width:100%;height:100%}
.hm-gauge b{position:absolute;left:0;right:0;bottom:-4px;text-align:center;font-size:17px;font-weight:800;letter-spacing:-.02em;color:#fff}
.hm-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hm-cap{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--soft-lime)}
.hm-text b{font-size:16px;font-weight:800;letter-spacing:-.02em;color:#fff}
.hm-text small{font-size:12.5px;font-weight:500;color:rgba(244,251,232,.78);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-go{flex:none;width:44px;height:44px;border-radius:50%;background:var(--soft-lime);color:var(--deep-ink);display:grid;place-items:center}

/* Pastilles : exactement le motif de la référence (3 couleurs, icône pleine, texte à côté) */
.pill-cloud{display:flex;flex-wrap:wrap;gap:10px}
.pill{
  position:relative;flex:none;display:inline-flex;align-items:center;gap:9px;padding:0 20px 0 16px;height:50px;border-radius:999px;
  background:#B1E57C;color:#0F3B2B;
}
.pill:active{transform:scale(.97)}
.pill svg{flex:none}
.pill b{font-weight:600;font-size:16px;white-space:nowrap;letter-spacing:-.01em}
.pill.pl-lime{background:#B1E57C;color:#0F3B2B}
.pill.pl-lime svg{color:#0F3B2B}
.pill.pl-dark{background:#133C2E;color:#E6F8D2}
.pill.pl-dark svg{color:#B6F26B}
.pill.pl-mid{background:#1FB36C;color:#0B3A28}
.pill.pl-mid svg{color:#D4F7A0}
.pill.has-dot::after{content:"";position:absolute;top:3px;right:6px;width:12px;height:12px;border-radius:50%;background:#F5B800;border:2px solid var(--mint-bg-2)}

.task-card{padding:18px 18px 18px 22px;border-radius:32px}
.tk-text h3{font-size:20px}
.tk-art{width:92px;border-radius:24px}
.tk-art svg{width:44px;height:44px}

/* Icônes d'en-tête : glyphes pleins */
.icon-btn svg{display:block}

/* ==========================================================================
   ACCUEIL v3 — séparateur, blocs unis de même taille, icônes d'en-tête plus discrètes
   ========================================================================== */
.sep{display:flex;align-items:center;gap:12px;margin:6px 0 2px}
.sep i{flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(11,93,63,.22))}
.sep i:last-child{background:linear-gradient(270deg,transparent,rgba(11,93,63,.22))}
.sep span{width:30px;height:30px;border-radius:50%;background:var(--surface-2);color:var(--deep);display:grid;place-items:center}
.blocs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.blocs .pill{width:100%;height:60px;justify-content:flex-start;gap:10px;padding:0 14px;border-radius:22px;background:#133C2E;color:#E6F8D2}
.blocs .pill svg{color:#B6F26B}
.blocs .pill b{font-weight:700;font-size:14.5px;line-height:1.15;white-space:normal;text-align:left}
.blocs .pill.on{background:var(--soft-lime);color:var(--deep-ink)}
.blocs .pill.on svg{color:var(--deep)}
.blocs .pill.has-dot::after{top:6px;right:8px;border-color:#133C2E}

.home-top .icon-btn,.topbar .icon-btn:not([data-back]){width:38px;height:38px}
.home-top .icon-btn svg,.topbar .icon-btn svg{width:19px;height:19px}
.home-top,.topbar{gap:8px}
.home-top .icon-btn,.topbar .icon-btn.plain:not([data-back]){background:var(--surface-2)}
.topbar .icon-btn.plain[data-back],.topbar .icon-btn.plain[aria-label*="etour"],.topbar .icon-btn.plain[aria-label*="tape"]{background:transparent;width:38px}
.sep span{width:auto;height:auto;background:none;display:flex;gap:5px}
.sep span b{width:7px;height:7px;border-radius:50%;background:var(--deep);opacity:.45}
.sep span b:nth-child(2){opacity:.8}

/* Blocs plus clairs (vert moyen de la référence) ; « disponible » = seulement l'étoile qui s'éclaire */
.blocs .pill{background:#2DB777;color:#06301F}
.blocs .pill svg{color:#E9FFC8}
.blocs .pill.on{background:#2DB777;color:#06301F}
.blocs .pill.on svg{color:#FFF59A;filter:drop-shadow(0 0 4px rgba(255,245,154,.7))}
.blocs .pill.has-dot::after{border-color:#2DB777}

/* Blocs de l'accueil : même fond que « Trouver un match », texte et icônes en vert sombre */
.blocs .pill,.blocs .pill.on{background:var(--surface);border:1.5px solid #C2E895;color:#133C2E}
.blocs .pill svg{color:#133C2E}
.blocs .pill.on svg{color:#F2B705;filter:none}
.blocs .pill.has-dot::after{border-color:var(--surface)}

/* Accueil : en-tête (salutation, recherche, prochain match) regroupé dans .home-head */
.home-head{display:flex;flex-direction:column;gap:12px;padding:0 16px 10px}
.home-head .home-top{padding:14px 0 4px}
.home-body{padding-top:8px}

/* ---- Accueil : carrousel des prochains matchs, jauge lisible, blocs plus grands ---- */
.hm-track{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hm-track::-webkit-scrollbar{display:none}
.hm-track .hero-mini{flex:0 0 100%;scroll-snap-align:center}
.hm-gauge{display:flex;flex-direction:column;align-items:center;width:84px;height:auto;gap:3px}
.hm-gauge .gauge{position:static;width:84px;height:47px}
.hm-gauge b{position:static;font-size:15px;line-height:1;letter-spacing:-.01em}
.sep .pager{display:flex;align-items:center;gap:7px}
.sep .pager .pg{width:8px;height:8px;border-radius:50%;background:var(--deep);opacity:.35;padding:0;transition:width .2s,opacity .2s}
.sep .pager .pg.on{width:24px;border-radius:5px;opacity:1}
.blocs{gap:12px}
.blocs .pill{height:92px;border-radius:30px;padding:0 18px;gap:14px}
.blocs .pill svg{width:28px;height:28px;stroke-width:1.7}
.blocs .pill b{font-size:16.5px}
.blocs .pill.is-team svg{box-sizing:content-box;width:20px;height:20px;padding:5px;border-radius:50%;background:#fff;border:2px solid #ADFF2F;color:#133C2E}

/* ---- Accueil v4 : grands blocs, petits blocs, fil « Dans la communauté » ---- */
.bigrow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bigbloc{position:relative;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;height:116px;padding:16px 18px;border-radius:28px;text-align:left;background:var(--surface);color:var(--deep-ink)}
.bigbloc b{font-size:19px;font-weight:800;letter-spacing:-.025em;line-height:1.1}
.bigbloc .bb-ico{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(11,93,63,.12);color:var(--deep)}
.bigbloc:active,.minibloc:active{transform:scale(.98)}
.minirow{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.minibloc{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;height:80px;padding:6px 4px;border-radius:22px;background:var(--surface);color:var(--deep-ink);text-align:center}
.minibloc b{font-size:12.5px;font-weight:600;line-height:1.15}
.minibloc svg{color:var(--deep)}
.minibloc.has-dot::after{content:"";position:absolute;top:8px;right:10px;width:10px;height:10px;border-radius:50%;background:#F5B800}
.flux{display:flex;flex-direction:column;gap:8px}
.flux-row{display:flex;align-items:center;gap:12px;width:100%;height:50px;padding:0 16px 0 9px;border-radius:999px;background:var(--surface);color:var(--deep-ink);text-align:left}
.flux-row .grow{font-size:15px;font-weight:500}
.flux-row small{flex:none;font-size:12.5px;color:var(--on-ink-mut)}
.flux-av{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(11,93,63,.14);color:var(--deep);font-size:13px;font-weight:800}