/* ==========================================================================
   BALLON ROND — Variante « vert sombre » de la refonte (même mise en page que skin.css)
   Activée avec ?theme=sombre, désactivée avec ?theme=menthe (choix mémorisé sur l'appareil).
   Chargée APRÈS skin.css : elle ne fait que remplacer les couleurs.
   ========================================================================== */
:root{
  --ov:245,239,230;
  --mint-bg:#243A36;
  --mint-bg-2:#1F332F;
  --surface:#2F4743;
  --surface-2:#37524D;
  --deep:#C6FF40;
  --deep-2:#C6FF40;
  --deep-ink:#F5F6EE;
  --soft-lime:#16210E;

  --ink:#243A36;
  --ink-900:#1F332F;
  --ink-800:#2F4743;
  --ink-700:#37524D;
  --ink-600:#446142;
  --lime:#C6FF40;
  --on-lime:#16210E;
  --green:#66CC00;
  --orange:#FFB366;
  --cream:#2F4743;
  --cream-2:#37524D;
  --on-ink:#F5F6EE;
  --on-ink-mut:rgba(245,246,238,.68);
  --on-ink-faint:rgba(245,246,238,.54);
  --on-cream:#F5F6EE;
  --on-cream-mut:rgba(245,246,238,.68);
  --line-ink:rgba(245,246,238,.13);
  --line-ink-strong:rgba(245,246,238,.26);
  --line-cream:rgba(245,246,238,.13);
  --crest-stroke:#C6FF40;
}
body,.device{background:#243A36}
.app,.screen{background:linear-gradient(180deg,#243A36 0%,#1F332F 100%);color:#F5F6EE}
.sticky-cta{background:linear-gradient(to top,#1F332F 62%,rgba(11,51,48,0))}
.composer,.quick{background:#1F332F}
.sheet-backdrop{background:rgba(6,25,23,.6)}
.sheet{background:#1F332F;box-shadow:0 -20px 50px -20px rgba(0,0,0,.6)}

/* Boutons et pastilles d'en-tête */
.btn-primary{background:#C6FF40;color:#16210E}
.btn-primary:hover{background:#C6FF40}
.btn-secondary,.card .btn-secondary,.on-cream .btn-secondary{background:transparent;color:#F5F6EE;border:1.5px solid rgba(245,246,238,.28)}
.btn-secondary:hover,.card .btn-secondary:hover{background:rgba(245,246,238,.08)}
.icon-btn,.icon-btn.plain,.home-top .icon-btn,.topbar .icon-btn.plain:not([data-back]){background:rgba(245,246,238,.1);color:#F5F6EE}
.icon-btn:hover{background:rgba(245,246,238,.16)}
.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{border-color:#243A36}

/* Cartes, puces, champs */
.card,.card-ink,.list,.tile,.catcard,.mini,.post,.fmt-card,.flat-tile.ink,.stat,.next-strip{background:#2F4743;color:#F5F6EE}
.card .meta,.card .lead,.next-strip .meta{color:rgba(245,246,238,.68)}
.card .cap{color:rgba(245,246,238,.6)}
.stats{background:rgba(245,246,238,.1)}
.chip,.dchip,.opt,.seg,.input,.searchbar,.wheel-wrap{background:rgba(245,246,238,.07);border-color:transparent;color:#F5F6EE}
.chip[aria-pressed="true"],.dchip[aria-pressed="true"],.seg button[aria-selected="true"]{background:#C6FF40;color:#16210E;border-color:#C6FF40}
.dchip[aria-pressed="true"] small,.dchip[aria-pressed="true"] em{color:#16210E}
.opt[aria-pressed="true"]{background:rgba(198,255,64,.1);border-color:#C6FF40}
.fmt-card[aria-pressed="true"]{background:#C6FF40;border-color:#C6FF40}
.fmt-card[aria-pressed="true"] b,.fmt-card[aria-pressed="true"] small{color:#16210E}
.input:focus,.searchbar:focus-within{border-color:#C6FF40;background:rgba(198,255,64,.06)}
.wheel-item.center,.tag,.tag-chip,.section-head .link,.badge-dispo,.card .badge-dispo,.follow-btn,.card .follow-btn,.reply-chip{color:#C6FF40}
.follow-btn,.card .follow-btn{border-color:#C6FF40}
.badge-dispo,.card .badge-dispo{background:rgba(198,255,64,.14)}
.badge-new,.card .badge-new{background:#C6FF40;color:#16210E}
.badge-confirm{background:#66CC00;color:#16210E}
.badge-pending{background:rgba(255,179,102,.16);color:#FFB366}
.badge-level,.card .badge-level,.card-ink .badge-level,.screen .badge-level,.sheet .badge-level{background:rgba(245,246,238,.1);color:#F5F6EE}
.avatar{background:#446142;color:#F5F6EE}
.avatar.lime{background:#C6FF40;color:#16210E}
.switch{background:rgba(245,246,238,.2)}
.switch[aria-checked="true"]{background:#C6FF40}
.switch[aria-checked="true"]::after{background:#16210E}
.bubble.them{background:rgba(245,246,238,.09)}
.bubble.me,.send{background:#C6FF40;color:#16210E}
.steps i{background:rgba(245,246,238,.16)}
.steps i.on,.bar i,.card .bar i{background:#C6FF40}
.ruban-lime{background:#C6FF40;color:#16210E}
.toast{background:#F5F6EE;color:#243A36}
.tile .ti,.catcard .ti{background:rgba(198,255,64,.14);color:#C6FF40}
.tile.sky .ti,.catcard.sky .ti,.tile.violet .ti,.catcard.violet .ti{background:rgba(198,255,64,.14);color:#C6FF40}
.sos{background-color:#2F4743}

/* Îlots (cartes d'en-tête) : jetons « sur fond sombre » */
.hero-band,.flat-tile.lime,.hero-cta,.card-lime,.dark-card,.scroll > .card-ink:first-child{
  --lime:#C6FF40;--on-lime:#16210E;--soft-lime:#C6FF40;--on-ink:#F5F6EE;
  background:linear-gradient(135deg,#37524D 0%,#2F4743 100%);
}
.hero-band .badge,.hero-band .badge-level{background:rgba(245,246,238,.14);color:#F5F6EE}

/* Barre d'onglets */
.tabbar{background:#1F332F;border-top-color:rgba(245,246,238,.1)}
.tab[aria-current="true"]{color:#C6FF40}
.tab-create .tab-ico{background:#C6FF40;color:#16210E;box-shadow:0 8px 18px -8px rgba(198,255,64,.6)}

/* Accueil */
.find-bar{background:#2F4743;border:1.5px solid rgba(245,246,238,.14);color:#F5F6EE}
.find-bar .fb-go{background:#C6FF40;color:#16210E}
.find-bar small{color:rgba(245,246,238,.66)}
.hero-mini{--soft-lime:#C6FF40;background:linear-gradient(135deg,#37524D 0%,#2F4743 100%)}
.hm-go{background:#C6FF40;color:#16210E}
.hm-cap{color:#C6FF40}
.sep i{background:linear-gradient(90deg,transparent,rgba(245,246,238,.24))}
.sep i:last-child{background:linear-gradient(270deg,transparent,rgba(245,246,238,.24))}
.sep span b{background:#C6FF40}
.blocs .pill,.blocs .pill.on{background:#2F4743;border:1.5px solid rgba(245,246,238,.12);color:#F5F6EE}
.blocs .pill svg{color:#C6FF40}
.blocs .pill.on svg{color:#C6FF40}
.blocs .pill.has-dot::after{border-color:#2F4743}
.pill.pl-lime{background:#C6FF40;color:#16210E}
.pill.pl-dark{background:#2F4743;color:#F5F6EE}

/* ---- Dark : plus d'orange (SOS et alertes en bleu ciel), pager lime ---- */
:root{--orange:#6EC1FF}
.sep .pager .pg{background:#C6FF40}
.sos{background-image:linear-gradient(140deg,rgba(110,193,255,.22),rgba(110,193,255,.06));border:1px solid rgba(110,193,255,.42)}
.sos .link{color:#6EC1FF}
.badge-sos{background:#6EC1FF;color:#06243A}
.badge-pending{background:rgba(110,193,255,.16);color:#6EC1FF}
.state-ico.warn{background:rgba(110,193,255,.14);color:#6EC1FF;border-color:rgba(110,193,255,.3)}
.offline-bar{background:#6EC1FF;color:#06243A}
.tile.sos .ti,.catcard.sos .ti,.pill.is-sos .pi{background:rgba(110,193,255,.18);color:#6EC1FF}
.like-btn.on,.cm-meta .on{color:#FF6B8A}
.icon-btn .dot,.tab .dot{background:#C6FF40}
.hm-cap{color:#C6FF40}
.hm-gauge b{color:#fff}
.blocs .pill.on svg{color:#C6FF40}

/* ---- Accueil v4 (sombre) ---- */
.bigbloc,.minibloc,.flux-row{background:rgba(245,246,238,.06);border:1.5px solid rgba(245,246,238,.1);color:#F5F6EE}
.bigbloc .bb-ico{background:rgba(198,255,64,.12);color:#BFEE48}
.minibloc svg{color:#BFEE48}
.minibloc.on svg{color:#C6FF40}
.bigbloc.is-sos{background:rgba(255,120,80,.1);border:1.5px solid #B8705A}
.bigbloc.is-sos .bb-ico{background:rgba(255,100,60,.28);color:#FF7A50}
.minibloc.has-dot::after{background:#C6FF40}
.flux-row small{color:rgba(245,246,238,.6)}
.flux-av{background:rgba(198,255,64,.14);color:#BFEE48}
.flux-av.sos{background:rgba(255,100,60,.22);color:#FF7A50}
.flux-row:nth-child(2) .flux-av:not(.sos){background:rgba(190,170,90,.22);color:#D9C46A}
.bigbloc b{font-size:17.5px;white-space:nowrap}
.flux-row .grow{font-size:14.5px}
.flux-row small{font-size:12px}

/* Petits blocs : icône et texte alignés à l'identique d'un bloc à l'autre */
.minibloc{justify-content:flex-start;gap:9px;height:98px;padding:15px 4px 8px}
.minibloc .mb-ico{display:grid;place-items:center;height:30px}
.minibloc .mb-ico svg{width:28px;height:28px;stroke-width:1.7}
.minibloc b{display:flex;align-items:center;justify-content:center;min-height:2.3em;font-size:12.5px;font-weight:600;line-height:1.15}

/* Petits blocs : icône plus grande, texte plus petit et collé à l'icône */
.minibloc{gap:3px;height:96px;padding:16px 4px 8px}
.minibloc .mb-ico{height:34px}
.minibloc .mb-ico svg{width:32px;height:32px}
.minibloc b{min-height:0;font-size:11px;font-weight:600;line-height:1.15;margin-top:2px}

/* ==========================================================================
   DIRECTION COULEUR (captures) — « même thème, plus vivant »
   Fond #243A36 · Nav #1F332F · Carte #2F4743 · Carte verte #2D6249 · Texte #F5F6EE · Texte 2 #A8B8B2
   Lime #C6FF40 (action, actif, anneau) · Corail #F27B52 (SOS uniquement) · Pastille icône #446142
   ========================================================================== */
:root{
  --band:#2D6249;
  --pastille:#446142;
  --coral:#F27B52;
  --carte:#2F4743;
  --txt2:#A8B8B2;
  --on-ink-mut:#A8B8B2;
  --on-ink-faint:rgba(168,184,178,.8);
  --on-cream-mut:#A8B8B2;
  --line-ink:rgba(245,246,238,.12);
}
body,.device{background:#243A36}
.app,.screen{
  background:
    radial-gradient(90% 38% at 100% 0%,rgba(74,150,104,.30) 0%,rgba(74,150,104,0) 70%),
    radial-gradient(70% 30% at 0% 38%,rgba(74,150,104,.10) 0%,rgba(74,150,104,0) 70%),
    #243A36;
  color:#F5F6EE;
}
.sticky-cta{background:linear-gradient(to top,#243A36 62%,rgba(36,58,54,0))}
.composer,.quick{background:#243A36}
.sheet{background:#27403B;border-top:1px solid rgba(245,246,238,.1)}

/* Cartes translucides */
.card,.card-ink,.list,.tile,.catcard,.mini,.post,.fmt-card,.flat-tile.ink,.stat,.next-strip,.bigbloc,.minibloc,.find-bar,.opt,.chip,.dchip,.input,.searchbar,.wheel-wrap,.seg{
  background:linear-gradient(150deg,rgba(245,246,238,.09) 0%,rgba(245,246,238,.045) 100%);
  border:1px solid rgba(245,246,238,.11);
  color:#F5F6EE;
}
.card,.card-ink,.list,.catcard,.tile,.post{border-radius:30px}
.list{overflow:hidden}
.list-row{border-bottom:1px solid rgba(245,246,238,.09)}
.chip,.dchip,.opt,.input,.searchbar,.wheel-wrap{border-radius:999px}
.opt{border-radius:22px}
.dchip{border-radius:20px}
.wheel-wrap{border-radius:22px}
.input{border-radius:18px}
textarea.input{border-radius:22px}
.chip[aria-pressed="true"],.dchip[aria-pressed="true"],.seg button[aria-selected="true"]{background:#C6FF40;border-color:#C6FF40;color:#16210E}
.opt[aria-pressed="true"]{background:rgba(198,255,64,.1);border-color:#C6FF40}
.seg{padding:5px;border-radius:999px}
.seg button{color:#A8B8B2;font-weight:700}

/* Boutons */
.btn-primary{background:#C6FF40;color:#16210E}
.btn-primary:hover{background:#C6FF40}
.btn-secondary,.card .btn-secondary{background:transparent;color:#F5F6EE;border:1.5px solid rgba(245,246,238,.28)}
.icon-btn,.icon-btn.plain,.home-top .icon-btn,.topbar .icon-btn.plain:not([data-back]){
  background:linear-gradient(150deg,rgba(245,246,238,.1),rgba(245,246,238,.05));border:1px solid rgba(245,246,238,.14);color:#F5F6EE;
}
.topbar .icon-btn.plain[data-back],.topbar .icon-btn.plain[aria-label*="etour"],.topbar .icon-btn.plain[aria-label*="tape"]{background:transparent;border-color:transparent}
.topbar{padding:14px 18px 12px}
.topbar .h2{font-size:34px;font-weight:800;letter-spacing:-.035em}

/* Icônes sur pastille teintée (lime 14 % sur carte) */
.tile .ti,.catcard .ti,.bigbloc .bb-ico,.minibloc .mb-ico,.pill .pi{background:#446142;color:#C6FF40}
.catcard .ti{width:56px;height:56px;border-radius:50%}
.catcard b{font-size:19px;font-weight:800}
.catcard small{color:#A8B8B2}
.catcard.sos .ti,.tile.sos .ti{background:rgba(242,123,82,.22);color:#F27B52}
.sheet .list-row > span:first-child:not(.grow){width:46px;height:46px;border-radius:50%;background:#446142;color:#C6FF40;display:grid;place-items:center;flex:none}
.sheet .list-row > span:first-child svg{width:22px;height:22px}
.list-row .val,.meta,.lead{color:#A8B8B2}

/* Barre d'onglets flottante */
.tabbar{
  margin:0 12px calc(12px + env(safe-area-inset-bottom,0px));border-radius:40px;padding:8px 8px;
  background:#1F332F;border:1px solid rgba(245,246,238,.12);box-shadow:0 18px 40px -18px rgba(0,0,0,.6);
}
.tab{color:#A8B8B2;border-radius:28px}
.tab[aria-current="true"]{color:#C6FF40;background:transparent}
.tab-create .tab-ico{width:54px;height:54px;border-radius:20px;background:#C6FF40;color:#16210E;margin-top:-18px;box-shadow:0 10px 24px -8px rgba(198,255,64,.55)}
.tab .dot{background:#C6FF40;border:2px solid #1F332F}

/* Badges, divers */
.badge-new,.card .badge-new{background:#C6FF40;color:#16210E}
.badge-dispo,.card .badge-dispo{background:rgba(198,255,64,.14);color:#C6FF40}
.badge-sos{background:#F27B52;color:#fff}
.sos{background-image:linear-gradient(140deg,rgba(242,123,82,.22),rgba(242,123,82,.06));border:1px solid rgba(242,123,82,.45)}
.sos .link{color:#F27B52}
:root{--orange:#F27B52}
.badge-pending{background:rgba(242,123,82,.16);color:#F27B52}
.state-ico{background:linear-gradient(150deg,rgba(245,246,238,.1),rgba(245,246,238,.05));border:1px solid rgba(245,246,238,.14);color:#A8B8B2;width:70px;height:70px}
.toast{background:#F5F6EE;color:#243A36}
.hero-band{background:linear-gradient(135deg,#3A7757 0%,#2D6249 100%);border-radius:30px;margin:6px 16px 0;padding:18px!important}
.hero-band .badge,.hero-band .badge-level{background:rgba(22,33,14,.35);color:#F5F6EE}

/* ==========================================================================
   ACCUEIL — spécifications détaillées
   ========================================================================== */
.glow{position:absolute;width:380px;height:380px;border-radius:50%;pointer-events:none;z-index:0}
.glow.g1{left:-70px;top:130px;background:radial-gradient(circle,rgba(198,255,64,.09) 0%,transparent 65%)}
.glow.g2{right:-130px;top:-110px;background:radial-gradient(circle,rgba(94,214,160,.2) 0%,transparent 65%)}
.scroll.home{position:relative;z-index:1;padding:0 18px 120px}
.hh{display:flex;align-items:center;gap:8px;padding:16px 0 14px}
.hh h1{flex:1;min-width:0;margin:0;font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hh .icon-btn{width:36px;height:36px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1)}
.hh .icon-btn svg{width:18px;height:18px}
.hsep{height:1px;margin:0 -18px 16px;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.22) 50%,transparent 100%)}
.home-stack{display:flex;flex-direction:column;gap:12px}

/* Carte « Prochain match » */
.hm-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.hm-track::-webkit-scrollbar{display:none}
.pm-card{
  position:relative;flex:0 0 100%;scroll-snap-align:center;display:block;width:100%;text-align:left;overflow:hidden;
  padding:20px;border-radius:36px;color:#F5F6EE;
  background:linear-gradient(200deg,#3A8A63 0%,#2B6249 48%,#245240 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 18px 40px rgba(8,24,18,.45);
}
.pm-fili{position:absolute;right:-80px;bottom:-90px;width:260px;height:260px;opacity:.13;pointer-events:none}
.pm-cap{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#C6FF40}
.pm-cap i{width:7px;height:7px;border-radius:50%;background:#C6FF40;animation:dotPulse 1.6s ease-in-out infinite}
@keyframes dotPulse{0%,100%{opacity:1}50%{opacity:.3}}
.pm-gauge{position:absolute;top:16px;right:18px;width:96px;height:56px}
.pm-gauge .gauge{position:absolute;inset:0;width:100%;height:100%}
.pm-gauge b{position:absolute;left:0;right:0;bottom:-2px;text-align:center;font-size:19px;font-weight:800;color:#fff;line-height:1}
.gs{fill:#C6FF40;transform-box:view-box;transform-origin:50% 91%;animation:gseg .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.2s + .05s * var(--i))}
.gs.off{fill:rgba(198,255,64,.22);animation:none}
@keyframes gseg{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
.pm-date{display:block;margin-top:14px;font-size:14px;font-weight:600;color:#C5DDCE}
.pm-time{display:block;margin-top:2px;font-size:68px;font-weight:800;letter-spacing:-.04em;line-height:.95;font-variant-numeric:tabular-nums}
.pm-time.pm-none{font-size:30px;line-height:1.1;margin-top:18px;letter-spacing:-.03em}
.pm-bot{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:14px}
.pm-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.pm-vs{font-size:15px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-start{font-size:12.5px;font-weight:700;color:#C6FF40}
.pm-go{flex:none;width:48px;height:48px;border-radius:50%;background:#C6FF40;color:#14261F;display:grid;place-items:center}
.pager{display:flex;justify-content:center;gap:7px;margin-top:12px}
.pager .pg{width:8px;height:8px;border-radius:50%;background:#C6FF40;opacity:.35;padding:0;transition:width .2s,opacity .2s}
.pager .pg.on{width:24px;border-radius:5px;opacity:1}

/* Cartes et tuiles */
.find-bar,.bigbloc,.minibloc{
  background:linear-gradient(180deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.03) 100%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 10px 22px rgba(8,24,18,.34);
}
.find-bar{height:72px;min-height:72px;padding:0 12px 0 24px;border-radius:36px;display:flex;align-items:center;gap:12px;width:100%;text-align:left;color:#F5F6EE}
.find-bar b{display:block;font-size:19px;font-weight:800;letter-spacing:-.02em}
.find-bar small{display:block;font-size:12.5px;font-weight:500;color:#A8B8B2}
.find-bar .fb-go{flex:none;width:48px;height:48px;border-radius:50%;background:#C6FF40;color:#14261F;display:grid;place-items:center}
.bigrow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bigbloc{height:112px;padding:16px;border-radius:28px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;text-align:left;color:#F5F6EE}
.bigbloc b{font-size:17.5px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.bigbloc .bb-ico{width:38px;height:38px;border-radius:50%;background:#446142;color:#C6FF40;display:grid;place-items:center}
.bigbloc.is-sos{background:#3D3F37;border:1.5px solid #A8705C;animation:sosGlow 2.8s ease-out infinite}
.bigbloc.is-sos .bb-ico{background:rgba(242,123,82,.22);color:#F27B52}
@keyframes sosGlow{0%{box-shadow:0 0 0 0 rgba(242,123,82,.38)}70%{box-shadow:0 0 0 12px rgba(242,123,82,0)}100%{box-shadow:0 0 0 0 rgba(242,123,82,0)}}
.minirow{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.minibloc{height:104px;padding:12px 4px 8px;border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;text-align:center;color:#F5F6EE}
.minibloc .mb-ico{width:40px;height:40px;border-radius:50%;background:#446142;color:#C6FF40;display:grid;place-items:center;height:40px}
.minibloc .mb-ico svg{width:22px;height:22px;stroke-width:1.8}
.minibloc b{font-size:12.5px;font-weight:600;line-height:1.15;min-height:0;margin:0;display:block}
.minibloc.on .mb-ico{color:#C6FF40}
.minibloc.has-dot::after{content:"";position:absolute;top:8px;right:12px;width:10px;height:10px;border-radius:50%;background:#C6FF40;border:2px solid #2B3F3B}

/* Navigation flottante */
.tabbar{
  position:absolute;left:14px;right:14px;bottom:16px;height:70px;margin:0;padding:0 8px;border-radius:35px;z-index:50;
  align-items:center;background:rgba(27,46,42,.82);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.1);box-shadow:0 14px 32px rgba(5,16,12,.45),inset 0 1px 0 rgba(255,255,255,.05);
}
.tab{color:#9AA9A4;padding:6px 2px}
.tab span{font-size:11px}
.tab[aria-current="true"]{color:#C6FF40}
.tab-create .tab-ico{width:56px;height:56px;border-radius:20px;background:#C6FF40;color:#14261F;margin-top:-31px;box-shadow:0 0 16px rgba(198,255,64,.2),0 8px 18px rgba(8,24,18,.4)}

/* Entrées en cascade */
.rise{animation:rise .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0s)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .rise,.gs,.pm-cap i,.bigbloc.is-sos{animation:none!important}
}
/* En-têtes : titre 28 px, boutons ronds 36 px (4 boutons tiennent à côté de « Communauté ») */
.topbar .h2{font-size:28px;white-space:nowrap}
.topbar .icon-btn:not([data-back]){width:36px;height:36px}
.topbar .icon-btn svg{width:18px;height:18px}
.topbar{gap:8px}

/* ==========================================================================
   Blason d'équipe : pastille ronde (plus de rectangle fluo), partout dans l'app
   ========================================================================== */
.crest-badge{flex:none;display:grid;place-items:center;border-radius:50%;background:#446142;color:#C6FF40;font-family:var(--f-display);font-weight:800;letter-spacing:-.02em;line-height:1;overflow:hidden}
.crest-badge b{font-weight:800}
.crest-badge.crest-40,.crest-badge.crest-44{width:42px;height:42px;font-size:14px}
.crest-badge.crest-52{width:52px;height:52px;font-size:17px}
.crest-badge.crest-72{width:76px;height:76px;font-size:25px}
.crest-badge.long{letter-spacing:-.05em}
.crest-badge.long.crest-40,.crest-badge.long.crest-44{font-size:12px}
.crest-badge.long.crest-52{font-size:15px}
.crest-badge.long.crest-72{font-size:21px}
.crest-badge.sos{background:rgba(242,123,82,.22);color:#F27B52}
.hero-band .crest-badge{background:rgba(22,33,14,.32)}

/* Pages à fiche : espace entre l'en-tête vert et les chiffres */
.hero-band{margin:6px 16px 14px!important}

/* Bouton fixe en bas : jamais caché derrière la barre d'onglets */
.has-tabs .sticky-cta{padding-bottom:104px;background:linear-gradient(to top,#243A36 55%,rgba(36,58,54,0))}
.has-tabs .screen .scroll:not(.home){padding-bottom:116px}
.has-tabs .screen .scroll:not(.home){padding-bottom:116px!important}

/* Fluidité : pas de flou en direct sous la barre, pulsation SOS sur un pseudo-élément (GPU), couches promues */
.tabbar{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(27,46,42,.97)!important}
.bigbloc.is-sos{animation:none!important;position:relative}
.bigbloc.is-sos::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:2px solid rgba(242,123,82,.5);pointer-events:none;animation:sosRing 2.8s ease-out infinite;will-change:transform,opacity}
@keyframes sosRing{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.07);opacity:0}100%{transform:scale(1.07);opacity:0}}
.screen.enter,.screen.leave{will-change:transform,opacity}
.screen.enter{animation-duration:.2s}
.pm-card,.find-bar,.bigbloc,.minibloc{transition:transform .12s ease}
@media (prefers-reduced-motion:reduce){.bigbloc.is-sos::after{animation:none!important}}

/* Carte « Aucun match prévu » : contenu complet, jamais coupé */
.pm-vide{min-height:176px;display:flex;flex-direction:column;justify-content:space-between;padding-bottom:20px}
.pm-vide .pm-time{margin-top:12px}
.pm-vide .pm-bot{margin-top:16px}
.pm-vide .pm-vs{white-space:normal}
/* Boutons fixes sur les écrans à barre d'onglets : sobres (contour lime) plutôt qu'un grand bloc plein */
.has-tabs .sticky-cta .btn-primary{background:rgba(255,255,255,.07);border:1.5px solid rgba(198,255,64,.55);color:#C6FF40;min-height:52px}
.has-tabs .sticky-cta .btn-primary:hover{background:rgba(198,255,64,.1)}

/* Anneau « DANS 10 h » (remplace l'arc segmenté) */
.pm-ring{position:absolute;top:16px;right:18px;width:64px;height:64px;display:grid;place-items:center}
.pm-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.pm-ring circle{fill:none;stroke-width:6;stroke-linecap:round}
.rg-t{stroke:rgba(245,246,238,.18)}
.rg-a{stroke:#C6FF40;stroke-dasharray:157.08;stroke-dashoffset:calc(157.08 * (1 - var(--f,.5)));animation:ringFill .9s cubic-bezier(.2,.8,.2,1) .15s both}
@keyframes ringFill{from{stroke-dashoffset:157.08}}
.rg-tx{position:relative;display:flex;flex-direction:column;align-items:center;line-height:1}
.rg-tx small{font-size:10px;font-weight:800;letter-spacing:.14em;color:#C5DDCE}
.rg-tx b{margin-top:2px;font-size:17px;font-weight:800;color:#fff;letter-spacing:-.02em}
.pm-card .pm-date{margin-top:20px}
@media (prefers-reduced-motion:reduce){.rg-a{animation:none!important}}

/* Carte d'en-tête d'une fiche (ex. aperçu du blason) : même vert que le Prochain match, jamais fluo */
.scroll > .card-ink:first-child,.scroll.pad > .card-ink:first-child{
  background:linear-gradient(200deg,#3A8A63 0%,#2B6249 55%,#245240 100%)!important;color:#F5F6EE;border:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 14px 30px rgba(8,24,18,.4);
}
.scroll > .card-ink:first-child .meta,.scroll.pad > .card-ink:first-child .meta{color:rgba(245,246,238,.78)}
.scroll > .card-ink:first-child .cap,.scroll.pad > .card-ink:first-child .cap{color:#C6FF40}

/* ==========================================================================
   Corrections
   ========================================================================== */
/* Étoile « Je suis dispo » active : pleine, dans la même teinte lime que les autres icônes */
.minibloc.on .mb-ico{color:#C6FF40}
.blocs .pill.on svg{color:#C6FF40}

/* Fond : un seul dégradé discret, teinté lime (couleur d'accent), plus de tache verte en haut à droite */
.app,.screen{
  background:
    radial-gradient(120% 55% at 100% 0%,rgba(198,255,64,.07) 0%,rgba(198,255,64,.03) 45%,rgba(198,255,64,0) 75%),
    #243A36;
}
.glow.g2{display:none}
.glow.g1{opacity:.7}

/* Compétences : libellé puis étiquettes dessous */
.comp-row{flex-direction:column;align-items:flex-start;gap:10px}
.comp-chips{display:flex;flex-wrap:wrap;gap:8px}
.comp-chips .chip{padding:8px 14px;font-size:13px;font-weight:600;background:rgba(245,246,238,.07);border:1px solid rgba(245,246,238,.12);color:#F5F6EE}

/* Légendes de carte : « Équipe actuelle · tu es capitaine » sur une seule ligne */
.card .cap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.08em}

/* Réactivité du toucher : pas de délai de double-tap, pas de zone de défilement autour d'une carte seule */
button,[data-nav],[data-act],[data-tab],a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.hm-track.solo{overflow:visible;scroll-snap-type:none}
/* Les animations de l'accueil se mettent en pause quand un autre écran est ouvert par-dessus */
.screen:not(:last-child) .pm-cap i,.screen:not(:last-child) .bigbloc.is-sos::after,.screen:not(:last-child) .rg-a,.screen:not(:last-child) .gs{animation-play-state:paused!important}

/* Fond uni sur toutes les pages : aucun dégradé ni lueur (palette : fond #243A36) */
body,.device,.app{background:#243A36!important}
.glow{display:none!important}
.screen.enter,.screen.leave{will-change:auto}

/* Explorer : mêmes pastilles et mêmes icônes (contour fin, lime sur pastille) que les tuiles de l'accueil */
.catcard .ti{width:44px;height:44px;background:#446142;color:#C6FF40}
.catcard .ti svg{width:22px;height:22px;stroke-width:1.8}
.catcard{min-height:128px;gap:20px}
.sheet .list-row > span:first-child:not(.grow){width:44px;height:44px}
.sheet .list-row > span:first-child svg{stroke-width:1.8}

/* Explorer : exactement les mêmes couleurs de pastille et d'icône que l'accueil, sur les 6 blocs */
.catcard .ti,.catcard.violet .ti,.catcard.sky .ti,.catcard.sos .ti{background:#446142!important;color:#C6FF40!important}

/* ==========================================================================
   Pastilles d'icônes : une seule recette partout (accueil, Explorer, listes, fenêtres)
   ========================================================================== */
:root{--ico:#BFEE48;--pastille:#446142}
.bigbloc .bb-ico,.minibloc .mb-ico,.catcard .ti,.rowico,.sheet .list-row > span:first-child:not(.grow),.pill .pi{
  width:42px;height:42px;border-radius:50%;background:var(--pastille)!important;color:var(--ico)!important;display:grid;place-items:center;flex:none
}
.bigbloc .bb-ico svg,.minibloc .mb-ico svg,.catcard .ti svg,.rowico svg,.sheet .list-row > span:first-child svg{width:22px;height:22px;stroke-width:1.8}
.minibloc.on .mb-ico{color:var(--ico)!important}
.catcard .ti,.catcard.violet .ti,.catcard.sky .ti,.catcard.sos .ti{background:var(--pastille)!important;color:var(--ico)!important}
.list-row .rowico{margin-right:0}

/* ==========================================================================
   Fondus et mouvements doux (sans exagérer)
   ========================================================================== */
button,.card,.list-row,.chip,.dchip,.opt,.catcard,.minibloc,.bigbloc,.find-bar,.pm-card,.tr-act{
  transition:transform .22s cubic-bezier(.22,.7,.3,1),background-color .25s ease,border-color .25s ease,opacity .25s ease,color .25s ease,box-shadow .3s ease;
}
button:active,.catcard:active,.minibloc:active,.bigbloc:active,.find-bar:active,.pm-card:active,.tr-act:active{transform:scale(.975)}
.screen.enter{animation:screenIn .32s cubic-bezier(.22,.7,.3,1) both}
.screen.leave{animation:screenOut .24s ease both}
@keyframes screenIn{from{opacity:0;transform:translateY(10px) scale(.995)}to{opacity:1;transform:none}}
@keyframes screenOut{to{opacity:0;transform:translateY(-4px)}}
.screen.enter .catcard,.screen.enter .list > *,.screen.enter .card,.screen.enter .tr-act{animation:softRise .5s cubic-bezier(.22,.7,.3,1) both}
.screen.enter .catcard:nth-child(1){animation-delay:.03s}.screen.enter .catcard:nth-child(2){animation-delay:.07s}
.screen.enter .catcard:nth-child(3){animation-delay:.11s}.screen.enter .catcard:nth-child(4){animation-delay:.15s}
.screen.enter .catcard:nth-child(5){animation-delay:.19s}.screen.enter .catcard:nth-child(6){animation-delay:.23s}
@keyframes softRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sheet{animation:sheetUp .34s cubic-bezier(.22,.7,.3,1)}
.sheet-backdrop{animation:fadeIn .28s ease}
.tab{transition:color .25s ease,transform .25s cubic-bezier(.22,.7,.3,1)}
.tab[aria-current="true"] .tab-ico{transform:translateY(-1px)}
.toast{animation:toastIn .34s cubic-bezier(.22,.7,.3,1)}
.chip,.dchip,.seg button{transition:background-color .28s ease,color .28s ease,border-color .28s ease,transform .2s ease}
@media (prefers-reduced-motion:reduce){
  .screen.enter,.screen.leave,.screen.enter .catcard,.screen.enter .list > *,.screen.enter .card,.screen.enter .tr-act{animation:none!important}
}

/* ==========================================================================
   Terrains : carte plus propre + fiche complète
   ========================================================================== */
.carte-terrains{height:430px;border-radius:30px;overflow:hidden;background:#1b2e2a;border:1px solid rgba(245,246,238,.1);box-shadow:0 14px 30px rgba(8,24,18,.35)}
.leaflet-container{background:#1b2e2a;font-family:var(--f-body)}
.leaflet-control-zoom{border:0!important;border-radius:16px;overflow:hidden;box-shadow:0 6px 16px rgba(5,16,12,.45)!important}
.leaflet-bar a{background:rgba(31,51,47,.95)!important;color:#F5F6EE!important;border:0!important;width:36px!important;height:36px!important;line-height:36px!important;font-size:18px}
.leaflet-bar a:hover{background:#2F4743!important}
.leaflet-control-attribution{background:rgba(31,51,47,.75)!important;color:rgba(245,246,238,.6)!important;font-size:10px;border-radius:10px 0 0 0}
.leaflet-tooltip{background:#1F332F;color:#F5F6EE;border:1px solid rgba(245,246,238,.14);border-radius:12px;font-weight:700;font-size:12.5px;padding:6px 10px;box-shadow:0 8px 18px rgba(5,16,12,.4)}
.leaflet-tooltip-top:before{border-top-color:#1F332F}
.br-pin{background:none;border:0}
.br-pin i{display:block;width:22px;height:22px;border-radius:50%;background:#C6FF40;border:4px solid #1F332F;box-shadow:0 0 0 2px rgba(198,255,64,.45),0 6px 14px rgba(5,16,12,.5);transition:transform .2s ease}
.br-pin:hover i{transform:scale(1.15)}
.mini-carte{height:170px;border-radius:26px;overflow:hidden;margin-top:14px;background:#1b2e2a;border:1px solid rgba(245,246,238,.1)}

.tr-hero{position:relative;overflow:hidden;padding:22px 20px 20px;border-radius:34px;color:#F5F6EE;background:linear-gradient(200deg,#3A8A63 0%,#2B6249 55%,#245240 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 16px 34px rgba(8,24,18,.4)}
.tr-hero::after{content:"";position:absolute;right:-60px;bottom:-70px;width:220px;height:220px;border-radius:50%;border:3px solid rgba(245,246,238,.12)}
.tr-hero h1{margin:14px 0 0;font-size:25px;line-height:1.12;font-weight:800;letter-spacing:-.03em;overflow-wrap:anywhere}
.tr-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:rgba(22,33,14,.32);color:var(--ico)}
.tr-sub{margin:4px 0 0;font-size:14px;color:rgba(245,246,238,.8)}
.tr-ville{margin:10px 0 0;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#C5DDCE}
.tr-hero .badge-level{background:rgba(22,33,14,.34);color:#F5F6EE;box-shadow:none}
.tr-acts{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px;margin-top:14px}
.tr-act{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 6px;border-radius:22px;text-align:center;color:#F5F6EE;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.08)}
.tr-act span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--pastille);color:var(--ico)}
.tr-act b{font-size:12px;font-weight:600;line-height:1.15}
.br-field{margin-top:22px;padding:18px;border-radius:30px;background:linear-gradient(160deg,rgba(198,255,64,.10) 0%,rgba(198,255,64,.03) 60%);border:1px solid rgba(198,255,64,.2)}
.br-head{display:flex;align-items:center;gap:12px}
.br-head b{display:block;font-size:15px;font-weight:800;letter-spacing:.14em;color:#C6FF40}
.br-head small{display:block;font-size:12.5px;color:#A8B8B2;margin-top:1px}
.br-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.br-stats div{padding:12px 6px;border-radius:20px;text-align:center;background:rgba(255,255,255,.05)}
.br-stats b{display:block;font-size:22px;font-weight:800;letter-spacing:-.03em}
.br-stats span{display:block;margin-top:2px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#A8B8B2}

/* Fond de carte : OpenStreetMap passé en tons sombres verts (sobre, sans clé d'API) */
.tuiles-sombres{filter:invert(1) hue-rotate(160deg) brightness(.82) contrast(.92) saturate(.55)}

.br-pin.sm i{width:16px;height:16px;border-width:3px;box-shadow:0 0 0 1.5px rgba(198,255,64,.4),0 3px 8px rgba(5,16,12,.5)}

/* Match SOS : l'icône garde sa couleur corail (réservée au SOS) */
.bigbloc.is-sos .bb-ico{background:rgba(242,123,82,.22)!important;color:#F27B52!important}
.sheet .list-row[data-nav="sos"] > span:first-child{background:rgba(242,123,82,.22)!important;color:#F27B52!important}

/* Prochain match : la ligne du bas est centrée sur la ligne médiane du filigrane de terrain */
.pm-fili{bottom:-86px}
.pm-bot{align-items:center;margin-top:12px}

/* Fiche terrain : bloc « BALLON ROND » dépliable */
.br-field{padding:0;overflow:hidden}
.br-sum{display:block;list-style:none;cursor:pointer;padding:18px}
.br-sum::-webkit-details-marker{display:none}
.br-head{display:flex;align-items:center;gap:12px}
.br-head > span:nth-child(2){flex:1;min-width:0}
.br-head b{display:block}
.br-chev{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.08);color:#C6FF40;transition:transform .3s cubic-bezier(.22,.7,.3,1)}
.br-field[open] .br-chev{transform:rotate(90deg)}
.br-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.br-stats > span{padding:12px 6px;border-radius:20px;text-align:center;background:rgba(255,255,255,.05)}
.br-stats b{display:block;font-size:22px;font-weight:800;letter-spacing:-.03em}
.br-stats i{display:block;margin-top:2px;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#A8B8B2}
.br-body{padding:0 18px 18px;animation:softRise .35s cubic-bezier(.22,.7,.3,1) both}
.tr-acts{margin-top:14px;margin-bottom:6px}

/* Écrans d'accueil / compte / première configuration : même langage que le reste (verre, pastilles, lime sobre) */
.state-ico.ok{background:var(--pastille)!important;color:var(--ico)!important;border:1px solid rgba(198,255,64,.28)!important;width:76px;height:76px}
.input{border-radius:26px}

/* ==========================================================================
   Bienvenue, comptes, première configuration — même langage que l'accueil
   ========================================================================== */
.wel{position:relative;display:flex;flex-direction:column;overflow-x:hidden}
.wel .hero-bg{opacity:.07;stroke:#F5F6EE}
.wel-body{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:40px 24px 8px}
.wel-logo{display:inline-flex;filter:drop-shadow(0 14px 28px rgba(8,24,18,.5))}
.wel-title{margin:6px 0 0;font-size:52px;line-height:.98;font-weight:800;letter-spacing:-.045em;text-transform:uppercase}
.wel-tag{margin:0;font-size:15px;font-weight:800;letter-spacing:.02em;color:#C6FF40}
.wel-desc{margin:0;max-width:30ch;font-size:16px;line-height:1.5;color:#A8B8B2}
.wel-steps{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:10px}
.wel-step{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.08)}
.wel-step .rowico{width:36px;height:36px}
.wel-step b{font-size:14px;font-weight:700}
.wel .sticky-cta{position:relative;background:linear-gradient(to top,#243A36 60%,rgba(36,58,54,0))}
/* cascade d'entrée sur les formulaires */
.screen.enter .field,.screen.enter .opt,.screen.enter .fmt-card,.screen.enter .chips .chip{animation:softRise .5s cubic-bezier(.22,.7,.3,1) both}
.screen.enter .field:nth-child(2),.screen.enter .opt:nth-child(2),.screen.enter .fmt-card:nth-child(2){animation-delay:.05s}
.screen.enter .field:nth-child(3),.screen.enter .opt:nth-child(3),.screen.enter .fmt-card:nth-child(3){animation-delay:.1s}
.screen.enter .opt:nth-child(4),.screen.enter .fmt-card:nth-child(4){animation-delay:.15s}
.screen.enter .fmt-card:nth-child(5){animation-delay:.2s}.screen.enter .fmt-card:nth-child(6){animation-delay:.25s}
/* cartes de format : coche en pastille lime */
.fmt-card{border-radius:26px}
.fmt-card[aria-pressed="true"]::after{background:#C6FF40;color:#16210E;box-shadow:0 0 0 3px #243A36}
/* titres des étapes */
.h1{letter-spacing:-.035em}

/* Fond : dégradé doux en haut à droite, porté par le fond de l'écran (aucun élément ajouté, aucun bord net) */
body,.device,.app{background:#243A36!important}
.screen{background:#243A36!important;isolation:isolate}
.sheet-backdrop{background:rgba(8,22,19,.55)}
.avatar{color:#E3F9BC}

/* Fenêtres de choix (lieu, niveau, format, disponibilité…) */
.sheet{padding-top:12px}
.sheet-grip{width:44px;height:5px;border-radius:3px;background:rgba(245,246,238,.22);margin:2px auto 18px}
.sheet h2.h2,.sheet > h2{font-size:24px;letter-spacing:-.03em;margin-bottom:16px}
.sheet .chips{gap:10px}
.sheet .chip-lg{padding:14px 22px;border-radius:999px}
.sheet .btn-primary{margin-top:6px}
.sheet .wheel-wrap{border-radius:24px}
.sheet .cap,.sheet .field > span{color:#A8B8B2}

/* Cartes joueur / équipe : lecture plus claire */
.tcard{gap:14px}
.tcard-head{gap:14px}
.tcard-head .avatar-48{width:54px;height:54px;font-size:17px}
.tcard-facts{gap:6px 10px}
.tcard-facts .fact{padding:5px 11px 5px 9px;border-radius:999px;background:rgba(255,255,255,.06);color:#F5F6EE;font-size:12.5px;font-weight:600}
.tcard-facts .fact svg{color:var(--ico);opacity:1}
.tcard-foot{border-top:1px solid rgba(245,246,238,.1);padding-top:14px}
.card .meta{color:#A8B8B2}

/* Boutons fixes : jamais collés au « + » de la barre d'onglets (qui dépasse de 31 px) */
.has-tabs .sticky-cta{padding-bottom:138px}
.has-tabs .sticky-cta .btn-row{gap:12px}
/* Mettre en relation : ce qu'on peut faire */
.rel-aide .rel-pt{display:flex;gap:12px;align-items:flex-start;padding:8px 0}
.rel-aide .rel-pt + .rel-pt{border-top:1px solid rgba(245,246,238,.08)}
.rel-aide .rowico{width:36px;height:36px}
.rel-aide span b{display:block;font-size:14.5px;font-weight:700;margin-bottom:2px}
.rel-aide span:not(.rowico){font-size:13px;line-height:1.4;color:#A8B8B2}

/* Boutons fixes : juste au-dessus du « + » (qui dépasse de 31 px), sans grand vide */
.has-tabs .sticky-cta{padding-bottom:120px;gap:2px}
.has-tabs .sticky-cta .btn-ghost{min-height:34px;font-size:14px}
/* Indisponible = l'opposé de Disponible */
.badge-indispo,.card .badge-indispo{background:rgba(255,92,92,.16);color:#FF6B6B;box-shadow:none}
/* Bloc adversaire (match confirmé) */
.opp-bar{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 14px;border-radius:30px;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.1);box-shadow:0 10px 24px rgba(8,24,18,.35)}
.opp-bar .crest{flex:none}
.opp-id{flex:1;min-width:0;text-align:left}
.opp-id .cap{display:block;font-size:11px;letter-spacing:.12em}
.opp-id b{display:block;margin-top:2px;font-size:15px;font-weight:800;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opp-btn{flex:none;display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.08);color:#F5F6EE;font-size:13px;font-weight:700}
.opp-btn.lime{background:#C6FF40;color:#16210E}
.opp-btn svg{flex:none}
/* Info « i » */
.info-btn{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#C6FF40}
.card-row{border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.08)!important}

/* Onglets segmentés (Abonnements · Découvrir · Mes posts) : même taille, rien ne déborde */
.seg button{font-size:11px;letter-spacing:.04em;padding:11px 4px;white-space:nowrap;min-width:0}
/* Barre de la fiche match : deux petits boutons seulement */
.opp-bar{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0;background:none;border:0;box-shadow:none}
.opp-btn{justify-content:center;height:46px;padding:0 12px}
/* Explorer : blocs et « Mettre en relation » respirent */
.catgrid{gap:16px}
.catgrid + .ex-sec,.catgrid ~ .ex-sec{margin-top:30px}
.ex-sec .section-head{margin:0 0 14px}

/* Accueil : apparition rapide et simultanée (plus de cascade lente qui laisse les blocs presque transparents) */
.home .rise{animation-duration:.26s;animation-delay:0s!important;animation-timing-function:ease-out}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ==========================================================================
   FLUIDITÉ — transitions d'écran courtes, sans cascade ni double fondu
   (le fondu de l'écran ET celui de chaque élément se cumulaient : contenu quasi invisible ~0,6 s)
   ========================================================================== */
.screen.enter{animation:screenIn .16s ease-out both}
.screen.leave{animation:screenOut .1s ease-out both}
@keyframes screenIn{from{opacity:0}to{opacity:1}}
@keyframes screenOut{to{opacity:0}}
.screen.enter .catcard,.screen.enter .list > *,.screen.enter .card,.screen.enter .tr-act,
.screen.enter .field,.screen.enter .opt,.screen.enter .fmt-card,.screen.enter .chips .chip{animation:none!important}
button,.card,.list-row,.chip,.dchip,.opt,.catcard,.minibloc,.bigbloc,.find-bar,.pm-card,.tr-act{transition:transform .12s ease-out,opacity .15s ease-out}
.chip,.dchip,.seg button{transition:background-color .15s ease,color .15s ease,transform .12s ease-out}
.tab{transition:color .15s ease}
.sheet{animation:sheetUp .22s cubic-bezier(.22,.7,.3,1)}
.sheet-backdrop{animation:fadeIn .15s ease-out}

/* Réactivité : retour visuel immédiat au toucher, fondu d'écran minimal */
.pm-card,.find-bar,.bigbloc,.minibloc,.catcard,.card-tap{transition:transform .06s linear}
.screen.enter{animation-duration:.1s}
.screen.leave{animation-duration:.08s}

/* Accueil : plus aucun effet permanent (rien ne tourne en continu pendant qu'on touche un bloc) */
.pm-cap i{animation:dotPulse 1.6s ease-in-out 3}
.bigbloc.is-sos::after{animation:sosRing 2.8s ease-out 2 both;will-change:auto}
.pm-card{box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 10px 24px rgba(8,24,18,.4)}
.find-bar,.bigbloc,.minibloc{box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 6px 14px rgba(8,24,18,.28)}
.wel-logo{filter:none}
.badge .pulse{animation-iteration-count:3}

/* Changement d'écran instantané : le nouvel écran recouvre tout de suite l'ancien (aucun fondu qui laisse deviner l'écran du dessous) */
.screen.enter{animation:none!important}
.btn-danger{background:rgba(255,92,92,.12);color:#FF7A7A;border:1.5px solid rgba(255,92,92,.45)}

/* ==========================================================================
   Transitions d'écran propres ET légères : l'écran qui arrive est opaque et glisse (transformation seule,
   aucun fondu qui laisserait voir l'écran du dessous) ; au retour il repart vers la droite.
   ========================================================================== */
.screen.enter{animation:pushIn .26s cubic-bezier(.22,.7,.3,1) both!important}
.screen.leave{animation:pushOut .22s cubic-bezier(.4,0,.7,.4) both!important}
.screen.enter-fade{animation:fadeIn .16s ease-out both}
@keyframes pushIn{from{transform:translate3d(36%,0,0)}to{transform:translate3d(0,0,0)}}
@keyframes pushOut{from{transform:translate3d(0,0,0)}to{transform:translate3d(36%,0,0)}}
@media (prefers-reduced-motion:reduce){.screen.enter,.screen.leave{animation:none!important}}
/* Communauté : la barre Abonnements · Découvrir · Mes posts descend un peu sous l'en-tête */
.seg:has(> [data-seg="commuTab"]){margin-top:16px}

/* Écrans principaux (Accueil, Explorer, Communauté, Profil) : même hauteur d'en-tête et même départ du premier bloc */
.screen.is-root .topbar{padding:16px 18px 14px;min-height:66px}
.screen.is-root .topbar + .pad,.screen.is-root .topbar + .scroll{padding-top:16px}
.screen.is-root .hero-band{margin-top:0!important}
.seg:has(> [data-seg="commuTab"]){margin-top:0}
.hsep{margin-bottom:15px}

/* Transition d'écran : discrète et rapide. L'écran reste opaque et se pose avec un très léger mouvement de 6 px. */
.screen.enter{animation:pushIn .14s ease-out both!important}
.screen.leave{animation:pushOut .08s ease-out both!important}
.screen.enter-fade{animation:fadeIn .1s ease-out both}
@keyframes pushIn{from{transform:translate3d(0,6px,0)}to{transform:translate3d(0,0,0)}}
@keyframes pushOut{from{opacity:1}to{opacity:0}}

/* Transitions d'écran supprimées pour l'instant : changement immédiat */
.screen.enter,.screen.leave,.screen.enter-fade{animation:none!important}

/* Bouton rouge d'annulation : même visibilité, moins haut */
.has-tabs .sticky-cta .btn-danger,.sticky-cta .btn-danger{min-height:40px;padding:0 20px;font-size:14px}
/* Trait lumineux sous l'en-tête de toutes les pages (comme sous « Salut, … ») */
.topbar{position:relative}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.22) 50%,transparent 100%);pointer-events:none}
/* Anneau : « 45 min » tient dans le cercle */
.pm-ring{width:68px;height:68px}
.rg-tx b{display:inline-flex;align-items:baseline;gap:2px;font-size:19px}
.rg-tx b em{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.02em;color:#C5DDCE}

/* ===== Boutons : fini le jaune plein + texte noir ===== */
.btn-primary,.btn-primary:hover{background:linear-gradient(180deg,#347F5A,#2B6249);color:#F5F6EE;border:1px solid rgba(198,255,64,.35);box-shadow:0 10px 22px -12px rgba(8,24,18,.7)}
.btn-primary:active{filter:brightness(.94)}
.has-tabs .sticky-cta .btn-primary{background:linear-gradient(180deg,#347F5A,#2B6249);border:1px solid rgba(198,255,64,.45);color:#F5F6EE}
.has-tabs .sticky-cta .btn-primary:hover{background:linear-gradient(180deg,#347F5A,#2B6249)}
.btn-sm.btn-primary{min-height:38px;padding:0 16px;font-size:13.5px}
.btn-soft{display:inline-flex;align-items:center;gap:4px;height:38px;padding:0 10px 0 16px;border-radius:999px;background:rgba(198,255,64,.1);border:1px solid rgba(198,255,64,.45);color:#C6FF40;font-size:13.5px;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.btn-soft svg{opacity:.85}
.btn-soft:active{background:rgba(198,255,64,.18)}
.chip[aria-pressed="true"],.dchip[aria-pressed="true"],.seg button[aria-selected="true"]{background:rgba(198,255,64,.14);border-color:#C6FF40;color:#C6FF40}
.dchip[aria-pressed="true"] small,.dchip[aria-pressed="true"] em,.dchip[aria-pressed="true"] b{color:#C6FF40}
.fmt-card[aria-pressed="true"]{background:rgba(198,255,64,.12);border-color:#C6FF40}
.fmt-card[aria-pressed="true"] b,.fmt-card[aria-pressed="true"] small{color:#C6FF40}
.opp-btn.lime{background:rgba(198,255,64,.1);border:1px solid rgba(198,255,64,.5);color:#C6FF40}
.badge-new,.card .badge-new{background:rgba(198,255,64,.16);color:#C6FF40}
.bubble.me{background:linear-gradient(180deg,#347F5A,#2B6249);color:#F5F6EE}
.send{background:linear-gradient(180deg,#347F5A,#2B6249);color:#F5F6EE}
.ruban-lime,.pill.pl-lime{background:rgba(198,255,64,.14);color:#C6FF40}
/* Barre de filtres Explorer */
.chip-filtre{gap:6px}
.chip-filtre .fn{display:inline-grid;place-items:center;min-width:18px;height:18px;border-radius:9px;background:#C6FF40;color:#16210E;font-size:11px;font-weight:800;padding:0 5px}
.chip-actif{border-color:rgba(198,255,64,.5)!important;color:#C6FF40!important;background:rgba(198,255,64,.1)!important}
.chip-reset{background:rgba(255,92,92,.12)!important;border-color:rgba(255,92,92,.45)!important;color:#FF8A8A!important;gap:5px}
/* Feuille Filtres */
.fs-grp{margin-top:16px}
.fs-lieu{margin-top:6px;border-radius:18px;background:rgba(255,255,255,.06);padding:10px 14px}
.fs-foot{position:sticky;bottom:-1px;display:flex;gap:10px;margin-top:20px;padding:16px 0 4px;background:linear-gradient(180deg,rgba(39,64,59,0),#27403B 28%)}
.fs-foot .btn-primary{flex:1;margin:0}
.fs-foot .btn-ghost{flex:none;padding:0 18px}

/* ===== Sélection discrète : fond vert doux + texte clair (plus de jaune sur les choix) ===== */
.chip[aria-pressed="true"],.dchip[aria-pressed="true"],.seg button[aria-selected="true"]{background:rgba(255,255,255,.14);border-color:rgba(245,246,238,.55);color:#F5F6EE}
.dchip[aria-pressed="true"] small,.dchip[aria-pressed="true"] em,.dchip[aria-pressed="true"] b{color:#F5F6EE}
.fmt-card[aria-pressed="true"]{background:rgba(255,255,255,.12);border-color:rgba(245,246,238,.55)}
.fmt-card[aria-pressed="true"] b,.fmt-card[aria-pressed="true"] small{color:#F5F6EE}
.chip-actif{border-color:rgba(245,246,238,.4)!important;color:#F5F6EE!important;background:rgba(255,255,255,.1)!important}
.chip-filtre[aria-pressed="true"]{border-color:rgba(245,246,238,.55)}
/* ===== Fiche équipe allégée ===== */
.stats-4{grid-template-columns:repeat(4,1fr)}
.stats-4 .stat{padding:12px 4px}
.forme-ligne{padding:2px 4px;gap:12px}
.forme-ligne b{display:block;font-size:15px}
/* ===== Mes matchs : actions ===== */
.mm-actions{display:flex;flex-direction:column;gap:10px;width:100%;max-width:320px;margin-top:20px}
.mm-actions .btn{height:52px;gap:8px}
/* ===== Match SOS : corail, jamais vert ===== */
.btn-sos,.sos .btn-primary,.btn-sos:hover{background:linear-gradient(180deg,#D95A31,#C94D27);color:#fff;border:1px solid rgba(255,190,160,.45);box-shadow:0 10px 22px -12px rgba(120,40,15,.7)}
.mm-actions .btn-sos{background:rgba(242,123,82,.14);border:1px solid rgba(242,123,82,.6);color:#FF9A74;box-shadow:none}

/* Carte équipe (Explorer) : plus légère */
.tcard-solo{border-top:0!important;padding-top:2px!important;justify-content:flex-end}
.btn-soft.neutral{background:rgba(255,255,255,.08);border-color:rgba(245,246,238,.28);color:#F5F6EE}
.btn-soft.neutral:active{background:rgba(255,255,255,.14)}

/* ===== Respiration sous l'en-tête ===== */
.topbar + .scroll.pad{padding-top:22px}
/* ===== Fiche équipe : blocs aérés ===== */
.scroll > .pad.stack-y.lg{gap:30px;padding-top:26px}
.hero-band{padding-bottom:28px!important}
.stats-4{margin-bottom:2px}
/* ===== Carte équipe (Explorer) ===== */
.tcard-v2{gap:12px}
.tcard-v2 .crest{flex:none}
.tc-nom{font-size:19px;font-weight:800;letter-spacing:-.025em;color:#fff;line-height:1.15;margin:0}
.tc-lieu{display:flex;align-items:center;gap:5px;margin:5px 0 0;font-size:13px;font-weight:500;color:#A8B8B2}
.tc-lieu svg{color:#A8B8B2;opacity:.9}
.tcard-v2 .badge-row{gap:6px}
/* ===== Joueurs : Suivre / Profil identiques ===== */
.tcard-foot .follow-btn,.tcard-foot .pj-btn,.tcard-foot .btn-sm{height:40px;min-width:112px;padding:0 18px;gap:7px;border-radius:999px;font-family:inherit;font-size:13.5px;font-weight:700;letter-spacing:0;text-transform:none;background:rgba(255,255,255,.06);border:1.5px solid rgba(245,246,238,.42);color:#F5F6EE;display:inline-flex;align-items:center;justify-content:center}
.tcard-foot .follow-btn svg,.tcard-foot .pj-btn svg{width:16px;height:16px;flex:none}
.tcard-foot .follow-btn[aria-pressed="true"]{border-color:rgba(198,255,64,.55);color:#F5F6EE;background:rgba(198,255,64,.08)}
.tcard-foot .follow-btn[aria-pressed="true"] svg{color:#C6FF40}
/* ===== Pastilles chiffrées / badges : plus sobres ===== */
.chip-filtre .fn{min-width:20px;height:20px;border-radius:10px;background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.3);font-size:11px;font-weight:700;backdrop-filter:blur(4px)}
.badge-confirm,.card .badge-confirm{background:rgba(111,214,140,.16);color:#8FE3A8;box-shadow:inset 0 0 0 1px rgba(111,214,140,.28)}
.crest-56{width:42px;height:56px}

/* ===== Fenêtres de choix : grille propre ===== */
.sheet .chips:not(.scrollx){display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.sheet .chips:not(.scrollx) .chip{display:flex;align-items:center;justify-content:center;height:46px;padding:0 8px;border-radius:15px;font-size:14px;font-weight:600;white-space:nowrap;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);color:#E4EAE6}
.sheet .chips:not(.scrollx) .chip[aria-pressed="true"]{background:rgba(255,255,255,.17);border:1.5px solid #F5F6EE;color:#fff;font-weight:700;box-shadow:0 6px 16px -8px rgba(0,0,0,.5)}
.sheet .chips.chips-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
/* Pied de la feuille Filtres */
.fs-foot{gap:12px;align-items:center}
.fs-foot .btn{height:46px;min-height:46px;font-size:14.5px}
.fs-foot .btn-primary{flex:1;padding:0 18px}
.fs-foot .btn-ghost{flex:none;padding:0 22px;border:1.5px solid rgba(245,246,238,.4);color:#F5F6EE;background:rgba(255,255,255,.04)}
/* Compteur de filtres : rond lime travaillé */
.chip-filtre .fn{min-width:22px;height:22px;border-radius:11px;padding:0 6px;background:linear-gradient(160deg,#E2FF86 0%,#C6FF40 45%,#A6E81F 100%);color:#16210E;border:0;font-size:11.5px;font-weight:800;line-height:1;box-shadow:0 0 0 3px rgba(198,255,64,.2),0 4px 10px -2px rgba(150,220,20,.55),inset 0 1px 0 rgba(255,255,255,.65);backdrop-filter:none}
/* Retour des feuilles SOS */
.sh-head{display:flex;align-items:center;gap:12px}
.sh-head .h2{margin:0!important;font-size:23px}
.sh-back{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid rgba(245,246,238,.2);color:#F5F6EE}
.sh-back:active{background:rgba(255,255,255,.14)}

/* ===== Profil : lieu non entouré ===== */
.hero-loc{display:flex;align-items:center;gap:5px;margin-top:6px!important;color:#C5D2CC}
.hero-loc svg{color:#A8B8B2;flex:none}
/* ===== Grilles spéciales dans les feuilles ===== */
.sheet .chips.chips-4{grid-template-columns:repeat(4,1fr);gap:8px}
.sheet .chips.chips-4 .chip{padding:0 2px;font-size:12.5px;border-radius:14px}
.sheet .chips.chips-1{grid-template-columns:1fr}
/* ===== Mon SOS en ligne ===== */
.sosm-card{display:flex;align-items:center;gap:14px;padding:14px 16px;margin-bottom:16px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.04));border:1px solid rgba(242,123,82,.38)}
.sosm-ico{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:rgba(242,123,82,.18);color:#FF9A74}
.sosm-quand{display:block;font-size:17px;font-weight:800;letter-spacing:-.02em;margin-bottom:2px}
.sosm-n{display:inline-grid;place-items:center;min-width:22px;height:22px;margin-left:8px;padding:0 6px;border-radius:11px;background:rgba(255,255,255,.95);color:#C9532B;font-size:12px;font-weight:800}
/* ===== Bouton « Filtres » : effet verre en relief ===== */

.mm-meta{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-lieu .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* Carte joueur (Explorer) */
.ucard-v2 .ucard-main{display:flex;gap:14px;text-align:left;width:100%;align-items:flex-start}
.ucard-v2 .tc-handle{margin-top:3px;color:#8FA39B}
.ucard-v2 .tc-lieu{margin-top:4px}
.ucard-v2 .tc-handle + .tc-lieu{margin-top:6px}

/* =====================================================================
   ÉCRANS D'INSTALLATION (lancement, comptes, onboarding) — .screen.flow
   Valeurs issues du cahier de design fourni.
   ===================================================================== */
.screen.flow{background:#243A36;color:#F5F6EE;overflow:hidden}
.screen.flow .glow{display:none}

/* Titres */
.flow .h1{font-size:34px;font-weight:800;letter-spacing:-.035em;line-height:1.04}
.flow .lead{font-size:15px;color:#A8B8B2;line-height:1.45;margin-top:10px}
.flow .meta{color:#A8B8B2}
.flow .cap{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#A8B8B2}
.flow .cap.lime{color:#C6FF40}
.flow .field > span{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#A8B8B2;margin-bottom:10px;display:block}
.flow .scroll.pad{padding-left:18px;padding-right:18px}

/* Champs */
.flow .input{height:52px;border-radius:26px;padding:0 20px;font-size:16px;font-weight:500;color:#F5F6EE;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 6px 14px rgba(8,24,18,.22)}
.flow .input::placeholder{color:#7F938D}
.flow textarea.input{height:auto;min-height:64px;padding:16px 20px;line-height:1.4;resize:none}
.flow .txt-link{color:#C6FF40;font-weight:800;text-decoration:underline;text-decoration-color:rgba(198,255,64,.55);text-underline-offset:3px}

/* Boutons ronds verre */
.flow .icon-btn,.flow .icon-btn.plain{width:40px;height:40px;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 6px 12px rgba(8,24,18,.28);color:#F5F6EE;opacity:1}
.flow .icon-btn[data-act="voirMdp"],.flow .icon-btn[data-act="onbDobSheet"]{width:52px;height:52px}
.flow .topbar{background:transparent}
.flow .topbar::after{display:none}

/* Boutons */
.flow .btn-primary,.flow .btn-primary:hover{height:56px;min-height:56px;border-radius:28px;font-size:17px;font-weight:800;letter-spacing:-.01em}
.flow .btn-primary:disabled{opacity:.5}
.flow .btn-secondary{height:56px;min-height:56px;border-radius:28px;background:transparent;border:1.5px solid rgba(255,255,255,.18);font-size:16px;font-weight:700;color:#F5F6EE;box-shadow:none}
.flow .btn-secondary:disabled,.flow .btn-secondary[disabled]{color:#8FA29B;border-color:rgba(255,255,255,.1);opacity:1}
.flow .btn-secondary.btn-loc{border-color:rgba(198,255,64,.55)}
.flow .btn-secondary.btn-loc svg{color:#C6FF40}
.flow .btn-ghost{background:transparent;border:0;box-shadow:none;color:#A8B8B2;font-size:15px;font-weight:700;height:44px;min-height:44px}
.flow .sticky-cta{padding:14px 18px 22px;gap:10px;background:linear-gradient(180deg,rgba(36,58,54,0),#243A36 36%)}

/* Cartes et choix */
.flow .card-ink,.flow .vf-note{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.08);border-radius:26px;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 10px 22px rgba(8,24,18,.34)}
.flow .card-ink p.meta{font-size:16px;line-height:1.5;color:#C5D2CC}
.flow .chip,.flow .opt,.flow .fmt-card{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 10px 22px rgba(8,24,18,.34);color:#F5F6EE}
/* Choix à radio : rôle, niveau */
.flow .opt{padding:16px;border-radius:24px;gap:14px;align-items:center;text-align:left;width:100%}
.flow .opt-title{display:block;font-size:17px;font-weight:800;color:#F5F6EE;letter-spacing:-.01em}
.flow .opt-sub{display:block;font-size:14px;color:#A8B8B2;line-height:1.4;margin-top:4px}
.flow .opt-mark{flex:none;width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.28);display:grid;place-items:center;background:transparent;color:#14261F}
.flow .opt-mark svg{opacity:0;stroke-width:3.4}
.flow .opt[aria-pressed="true"]{background:linear-gradient(180deg,rgba(198,255,64,.16),rgba(198,255,64,.07));border:1.5px solid #C6FF40;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 18px rgba(198,255,64,.12),0 10px 22px rgba(8,24,18,.34)}
.flow .opt[aria-pressed="true"] .opt-mark{background:#C6FF40;border-color:#C6FF40}
.flow .opt[aria-pressed="true"] .opt-mark svg{opacity:1}
/* Pastilles pleines : poste, pied fort, jours… */
.flow .chip-lg{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 22px;border-radius:25px;font-size:16px;font-weight:700}
.flow .chips{gap:10px}
.flow .chips-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.flow .chips-grid .chip-lg{padding:0 10px}
.flow .chips-3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.flow .chips-3 .chip-lg{padding:0 6px;gap:7px;font-size:15px}
.screen.flow .chip[aria-pressed="true"]{background:#C6FF40;color:#14261F;border:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 18px rgba(198,255,64,.16),0 8px 16px rgba(8,24,18,.35)}
.screen.flow .chip[aria-pressed="true"] .pied-dots{color:#14261F}
/* Âge */
.flow #dobAge.badge{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:13px;background:rgba(198,255,64,.14);color:#C6FF40;font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
/* Progression */
.flow .steps{display:flex;gap:6px;width:150px}
.flow .steps i{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.12);display:block}
.flow .steps i.on{background:#C6FF40;box-shadow:0 0 10px rgba(198,255,64,.35)}
/* Formats */
.flow .fmt-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:10px}
.flow .fmt-card{grid-column:span 4;padding:18px 6px;border-radius:24px;display:flex;flex-direction:column;align-items:center;gap:4px;position:relative}
.flow .fmt-card:nth-child(-n+4){grid-column:span 3}
.flow .fmt-card b{font-size:24px;font-weight:800;letter-spacing:-.02em;color:#F5F6EE}
.flow .fmt-card small{font-size:13px;font-weight:500;color:#A8B8B2}
.flow .fmt-card[aria-pressed="true"]{background:#C6FF40;border:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 18px rgba(198,255,64,.16),0 8px 16px rgba(8,24,18,.35)}
.flow .fmt-card[aria-pressed="true"] b,.flow .fmt-card[aria-pressed="true"] small{color:#14261F}
.flow .fmt-card[aria-pressed="true"]::after{background:#1F332F;color:#C6FF40;box-shadow:none}
.flow .info-dot{background:rgba(198,255,64,.14);color:#C6FF40;border-radius:50%}
/* Caractéristiques : pastille ronde à gauche */
.flow .chip.tr-chip{display:flex;align-items:center;justify-content:flex-start;gap:9px;height:50px;padding:0 10px 0 7px;border-radius:25px;font-size:14px;font-weight:700;text-align:left}
.flow .tr-disc{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(198,255,64,.14);color:#C6FF40}
.flow .tr-disc svg{width:19px;height:19px;stroke-width:1.9}
.screen.flow .chip.tr-chip[aria-pressed="true"]{background:linear-gradient(180deg,rgba(198,255,64,.16),rgba(198,255,64,.07));border:1.5px solid #C6FF40;color:#F5F6EE;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 18px rgba(198,255,64,.12),0 10px 22px rgba(8,24,18,.34)}
.screen.flow .chip.tr-chip[aria-pressed="true"] .tr-disc{background:#C6FF40;color:#14261F}

/* Vérifie ta boîte mail */
.flow .state{text-align:center}
.flow .state-ico.ok{width:76px!important;height:76px!important;border-radius:50%;background:#C6FF40;color:#14261F;box-shadow:0 0 0 14px rgba(198,255,64,.10),0 0 0 28px rgba(198,255,64,.05),0 0 28px rgba(198,255,64,.22),0 10px 20px rgba(8,24,18,.4);margin:28px auto 34px}
.flow .vf-note{padding:20px 22px;margin-top:22px}
.flow .vf-note p{margin:0;font-size:15.5px;line-height:1.5;color:#A8B8B2;text-align:center}

/* Accueil de lancement */
.flow .wel{display:flex;flex-direction:column;min-height:100%;padding:0}
.flow .wel-pitch{position:absolute;left:0;top:0;width:100%;height:100%;opacity:.16;pointer-events:none;z-index:0}
.flow .wel-pitch *{stroke-dasharray:900;stroke-dashoffset:900;animation:welDraw 1.8s cubic-bezier(.2,.8,.2,1) .1s forwards}
.flow .wel-pitch circle[r="5"]{stroke:none;stroke-dasharray:none;stroke-dashoffset:0;animation:none}
@keyframes welDraw{to{stroke-dashoffset:0}}
.flow .wel-body{position:relative;z-index:1;padding:64px 18px 0;flex:1}
.flow .wel-top{display:flex;justify-content:space-between;align-items:flex-start}
.flow .wel-title{font-size:56px;font-weight:800;letter-spacing:-.04em;line-height:.98;text-transform:uppercase;color:#F5F6EE}
.flow .wel-logo{filter:drop-shadow(0 0 14px rgba(198,255,64,.35));margin-top:6px}
.flow .wel-tag{margin-top:34px;font-size:19px;font-weight:800;color:#C6FF40;line-height:1.2;letter-spacing:-.02em}
.flow .wel-cardzone{position:relative;margin-top:46px;padding:0 4px}
.flow .wel-ghost{position:absolute;inset:6px 0 -6px;border-radius:30px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.08);transform:rotate(4deg)}
.flow .wel-card{position:relative;display:block;width:100%;text-align:left;padding:20px;min-height:132px;border-radius:30px;overflow:hidden;color:#F5F6EE;background:linear-gradient(200deg,#3A8A63 0%,#2B6249 48%,#245240 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 18px 36px rgba(8,24,18,.5);transform:rotate(-3deg)}
.flow .wel-card .pm-fili{position:absolute;right:-30px;top:-6px;width:170px;opacity:.13;pointer-events:none}
.flow .wel-cap{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#C6FF40}
.flow .wel-cap i{width:8px;height:8px;border-radius:50%;background:#C6FF40}
.flow .wel-card b{display:block;margin-top:14px;font-size:27px;font-weight:800;letter-spacing:-.03em;line-height:1.08;padding-right:60px}
.flow .wel-go{position:absolute;right:20px;bottom:24px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#C6FF40;color:#14261F}
.flow .wel-steps{display:flex;justify-content:space-between;align-items:center;margin-top:60px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#8FA29B}
.flow .wel-steps b{font-weight:800;color:#8FA29B}
.flow .wel-steps b.on{color:#C6FF40}
.flow .wel-steps i{font-style:normal;color:#6E837C}
@keyframes flowRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.flow .rise{animation:flowRise .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0s)}
@media (prefers-reduced-motion:reduce){.flow .rise,.flow .wel-pitch *{animation:none!important}.flow .wel-pitch *{stroke-dashoffset:0}}


.ucard-v2 .tc-nom{line-height:1.1}
.ucard-v2 .tc-handle{margin-top:0!important}
.ucard-v2 .tc-handle + .tc-lieu{margin-top:6px}

/* Accueil : titre travaillé, logo collé au mot « Rond » */
.flow .wel-top{display:block}
.flow .wel-title{display:block;margin:0;text-transform:uppercase;font-size:58px;font-weight:800;letter-spacing:-.045em;line-height:.9;transform:skewX(-7deg);transform-origin:left bottom}
.flow .wt-1{display:block;color:#F5F6EE;text-shadow:0 8px 24px rgba(8,24,18,.45)}
.flow .wt-2{display:flex;align-items:center;gap:10px;color:transparent;-webkit-text-stroke:2.5px #C6FF40;letter-spacing:-.02em;filter:drop-shadow(0 0 14px rgba(198,255,64,.28))}
.flow .wel-logo{display:inline-flex;margin:0;transform:skewX(7deg);-webkit-text-stroke:0;filter:drop-shadow(0 0 12px rgba(198,255,64,.4))}
.flow .wel-tag{margin-top:30px}
.flow .wel-cardzone{margin-top:44px}
.flow .wt-2{color:#243A36;-webkit-text-stroke:4px #C6FF40;paint-order:stroke fill}
.flow .wel-logo{paint-order:normal}

/* ===== Fond commun : lueurs (spécification) ===== */
.screen::before,.screen::after{content:"";position:absolute;width:380px;height:380px;border-radius:50%;pointer-events:none;z-index:-1}
.screen::before{right:-130px;top:-110px;background:radial-gradient(circle,rgba(94,214,160,.20) 0%,rgba(94,214,160,0) 65%)}
.screen::after{left:-90px;top:120px;background:radial-gradient(circle,rgba(198,255,64,var(--lg,.08)) 0%,rgba(198,255,64,0) 65%)}
.screen[data-s="home"]{--lg:.09}.screen[data-s="home"]::after{left:-70px;top:130px}
.screen[data-s="explore"]{--lg:.07}.screen[data-s="explore"]::after{left:-70px;top:330px}
.screen[data-s="communaute"]{--lg:.08}.screen[data-s="communaute"]::after{left:50%;margin-left:-190px;top:190px}
/* ===== Apparition du contenu ===== */
@keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.screen.rise-in > *{animation:riseIn .5s cubic-bezier(.2,.8,.2,1) both}
.screen.rise-in > :nth-child(2){animation-delay:.05s}
.screen.rise-in > :nth-child(3){animation-delay:.12s}
.screen.rise-in > :nth-child(4){animation-delay:.18s}
.screen.rise-in > :nth-child(n+5){animation-delay:.24s}
@media (prefers-reduced-motion:reduce){.screen.rise-in > *{animation:none!important}}

/* ===== Accueil de lancement (nouvelle version) ===== */
.flow .wel-pitch{opacity:.12}
.flow .wel-body{padding:92px 18px 0}
.flow .wel-lockup{display:flex;align-items:center;gap:16px}
.flow .wl-txt{font-size:35px;font-weight:800;letter-spacing:-.04em;line-height:1;color:#F5F6EE}
.flow .wel-slogan{display:block;margin:42px 0 0;padding-left:18px;position:relative;font-size:27px;font-weight:800;letter-spacing:-.03em;line-height:1.12;color:#F5F6EE}
.flow .wel-slogan::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:4px;border-radius:2px;background:#C6FF40;box-shadow:0 0 12px rgba(198,255,64,.5)}
.flow .wel-slogan span{display:block}
.flow .wel-slogan b{display:block;color:#C6FF40;font-weight:800}
.flow .wel-cardzone{margin-top:70px}

/* ===== Onboarding : détails ===== */
.flow .fmt-card::after,.flow .chip-check::before{display:none!important}
.flow .chip.tr-chip.is-poste{}
.flow .pied-dots{display:flex;gap:10px;align-items:center}
.flow .pd{display:block;width:18px;height:18px;border-radius:50%;border:2px solid rgba(245,246,238,.55);box-sizing:border-box}
.flow .pd.on{background:#C6FF40;border-color:#C6FF40;box-shadow:0 0 10px rgba(198,255,64,.35)}
.flow .chip.pied-chip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:82px;padding:0 6px;border-radius:22px;font-size:14px;font-weight:700}
.screen.flow .chip.pied-chip[aria-pressed="true"]{background:linear-gradient(180deg,rgba(198,255,64,.16),rgba(198,255,64,.07));border:1.5px solid #C6FF40;color:#F5F6EE;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 18px rgba(198,255,64,.12),0 10px 22px rgba(8,24,18,.34)}
.screen.flow .chip.pied-chip[aria-pressed="true"] .pd{background:#C6FF40;border-color:#C6FF40}
.screen.flow .chip.pied-chip[aria-pressed="true"] .pd:not(.on){background:transparent;border-color:rgba(245,246,238,.55)}
/* « Quand joues-tu » : sélection par la couleur seule (pas de coche), cartes teintées */
.screen.flow .chip.chip-check[aria-pressed="true"]{background:linear-gradient(180deg,rgba(198,255,64,.16),rgba(198,255,64,.07));border:1.5px solid #C6FF40;color:#F5F6EE;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 18px rgba(198,255,64,.12),0 10px 22px rgba(8,24,18,.34)}
.screen.flow .fmt-card[aria-pressed="true"]{background:linear-gradient(180deg,rgba(198,255,64,.16),rgba(198,255,64,.07));border:1.5px solid #C6FF40;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 18px rgba(198,255,64,.12),0 10px 22px rgba(8,24,18,.34)}
.screen.flow .fmt-card[aria-pressed="true"] b,.screen.flow .fmt-card[aria-pressed="true"] small{color:#F5F6EE}

/* ===== Barre d'onglets : icônes seules + point lumineux ===== */
.tab:not(.tab-create) > span:last-child{display:none}
.tab:not(.tab-create){position:relative;justify-content:center}
.tab[aria-current="true"]:not(.tab-create)::after{content:"";position:absolute;left:50%;bottom:9px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#C6FF40;box-shadow:0 0 8px rgba(198,255,64,.7)}
.tab-create .tab-ico{border-radius:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 18px rgba(198,255,64,.2),0 10px 20px rgba(8,24,18,.45)}
.tab:not(.tab-create){height:60px;padding:0 0 14px}
.tab[aria-current="true"]:not(.tab-create)::after{bottom:11px}

/* Pas de libellé sous le + */
.tab-create > span:last-child{display:none}
/* Accueil de lancement : étapes en une ligne */
.flow .wel-body{padding:84px 18px 0}
.flow .wel-slogan{margin-top:56px}
.flow .wel-steps2{position:absolute;left:18px;right:18px;top:470px;z-index:1;text-align:center}
.flow .wel-steps2 p{display:flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;margin:0;font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.flow .wel-steps2 b{font-weight:800;color:rgba(245,246,238,.55);animation:welSt 4.8s ease-in-out infinite}
.flow .wel-steps2 b:nth-of-type(2){animation-delay:1.2s}
.flow .wel-steps2 b:nth-of-type(3){animation-delay:2.4s}
.flow .wel-steps2 b:nth-of-type(4){animation-delay:3.6s}
.flow .wel-steps2 i{font-style:normal;color:rgba(245,246,238,.28)}
.flow .wel-fil{display:block;width:60px;height:1.5px;border-radius:1px;margin:18px auto 0;background:rgba(245,246,238,.18)}
@keyframes welSt{0%{color:rgba(245,246,238,.55)}5%,25%{color:#F5F6EE}32%,100%{color:rgba(245,246,238,.55)}}
@media (prefers-reduced-motion:reduce){.flow .wel-steps2 b{animation:none}}
/* Cloche de notifications bien visible quand il y a du nouveau */
.icon-btn.has-notif{background:rgba(198,255,64,.16)!important;border-color:rgba(198,255,64,.6)!important;color:#C6FF40!important;box-shadow:0 0 0 3px rgba(198,255,64,.12),0 0 16px rgba(198,255,64,.35)!important;animation:bellPing 1.4s ease-out 3}
.icon-btn.has-notif svg{animation:bellRing .9s ease-in-out .3s 2;transform-origin:50% 10%}
.icon-btn.has-notif .dot{width:12px;height:12px;top:3px;right:3px;background:#FF6B4A;border:2px solid #243A36;box-shadow:0 0 8px rgba(255,107,74,.7)}
@keyframes bellPing{0%{box-shadow:0 0 0 0 rgba(198,255,64,.5),0 0 16px rgba(198,255,64,.35)}100%{box-shadow:0 0 0 12px rgba(198,255,64,0),0 0 16px rgba(198,255,64,.35)}}
@keyframes bellRing{0%,100%{transform:rotate(0)}20%{transform:rotate(14deg)}40%{transform:rotate(-12deg)}60%{transform:rotate(8deg)}80%{transform:rotate(-5deg)}}
@media (prefers-reduced-motion:reduce){.icon-btn.has-notif,.icon-btn.has-notif svg{animation:none}}

/* ===== Pages légales ===== */
.legal section{margin-top:26px}
.legal section:first-of-type{margin-top:18px}
.legal h2.h2{font-size:18px;margin-bottom:8px}
.legal p,.legal li{font-size:14.5px;line-height:1.6;color:#C5D2CC;margin:0 0 8px}
.legal ul{margin:6px 0 0;padding-left:20px}
.legal li{margin-bottom:6px}
/* ===== Case d'acceptation à l'inscription ===== */
.cgu-check{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-size:14px;line-height:1.5;color:#A8B8B2;position:relative}
.cgu-check input{position:absolute;opacity:0;width:0;height:0}
.cgu-box{flex:none;display:grid;place-items:center;width:24px;height:24px;margin-top:1px;border-radius:8px;border:2px solid rgba(255,255,255,.28);color:transparent;background:rgba(255,255,255,.04)}
.cgu-check input:checked + .cgu-box{background:#C6FF40;border-color:#C6FF40;color:#14261F}
.cgu-check input:focus-visible + .cgu-box{outline:2px solid #C6FF40;outline-offset:2px}
.cgu-box svg{stroke-width:3.2}

/* ===== Logotype « Ballon Rond » (écriture 6 + slogan) ===== */
.lockup{display:inline-flex;align-items:center;gap:16px}
.wm6{display:inline-flex;flex-direction:column;font-family:'Unbounded','Plus Jakarta Sans',sans-serif;color:#F5F6EE;text-align:left}
.wm6 b{display:block;font-weight:900;font-size:25px;letter-spacing:-.02em;line-height:1.05;text-transform:uppercase}
.wm6 small{display:block;margin-top:9px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:#A8B8B2}
.flow .wel-lockup{display:block}
.flow .wel-lockup .lockup{gap:18px}
.flow .wel-lockup .wm6 b{font-size:27px}

/* Heure et choix en roue : crème, plus de lime isolé */
.wheel-item.center{color:#F5F6EE}
.wheel-item.center{font-weight:800}
/* Puces à libellé long (« Heure personnalisée », « Tous les formats ») : pleine largeur, respirent */
.sheet .chips:not(.scrollx) .chip{padding-left:14px;padding-right:14px}
.sheet .chips:not(.scrollx) .chip.chip-wide{grid-column:1 / -1}


/* Deux choix côte à côte : parts égales sur toute la largeur */
.sheet .chips.chips-2{grid-template-columns:1fr 1fr;gap:10px}
.sheet .chips.chips-2 .chip{white-space:normal;text-align:center;line-height:1.2;height:auto;min-height:50px;padding:8px 10px}

/* Carte équipe : « Voir l'équipe » sous les badges, aligné à gauche, de la largeur exacte format + niveau */
.tc-colwrap{display:inline-flex;flex-direction:column;align-items:stretch;gap:12px;max-width:100%;margin-top:10px}
.tc-colwrap .badge-row{margin-top:0}
.tc-colwrap .btn-soft{width:100%;justify-content:center;padding:0 12px}

/* ===== Groupes de choix : la grille s'adapte au nombre d'options (plus de dernière ligne orpheline) =====
   Grille de 12 colonnes : 2 → 2 · 3 → 3 · 4 → 2×2 · 5 → 3+2 · 6 → 3×2 · 7 → 4+3 · 8 → 4×2 · 9 → 3×3
   Les groupes à puce pleine largeur (.chip-wide) gardent leur règle propre. */
.sheet .chips:not(.scrollx):not(.chips-1):not(.chips-2):not(.chips-3):not(.chips-4):not(.pied-row){display:grid;grid-template-columns:repeat(12,1fr);gap:10px}
.sheet .chips:not(.scrollx):not(.chips-1):not(.chips-2):not(.chips-3):not(.chips-4):not(.pied-row) > *{grid-column:span 4;min-width:0}
.sheet .chips:not(.scrollx):not(.chips-1):not(.chips-2):not(.chips-3):not(.chips-4):not(.pied-row):not(:has(> .chip-wide)):has(> :nth-child(2):last-child) > *{grid-column:span 6}
.sheet .chips:not(.scrollx):not(.chips-1):not(.chips-2):not(.chips-3):not(.chips-4):not(.pied-row):not(:has(> .chip-wide)):has(> :nth-child(4):last-child) > *{grid-column:span 6}
.sheet .chips:not(.scrollx):not(.chips-1):not(.chips-2):not(.chips-3):not(.chips-4):not(.pied-row):not(:has(> .chip-wide)):has(> :nth-child(5):last-child) > :nth-child(-n+3){grid-column:span 4}
.sheet .chips:not(.scrollx):not(.chips-1):not(.chips-2):not(.chips-3):not(.chips-4):not(.pied-row):not(:has(> .chip-wide)):has(> :nth-child(5):last-child) > :nth-child(n+4){grid-column:span 6}
.sheet .chips:not(.scrollx):not(.chips-1):not(.chips-2):not(.chips-3):not(.chips-4):not(.pied-row):not(:has(> .chip-wide)):has(> :nth-child(7):last-child) > :nth-child(-n+4){grid-column:span 3}
.sheet .chips:not(.scrollx):not(.chips-1):not(.chips-2):not(.chips-3):not(.chips-4):not(.pied-row):not(:has(> .chip-wide)):has(> :nth-child(7):last-child) > :nth-child(n+5){grid-column:span 4}
.sheet .chips:not(.scrollx):not(.chips-1):not(.chips-2):not(.chips-3):not(.chips-4):not(.pied-row):not(:has(> .chip-wide)):has(> :nth-child(8):last-child) > *{grid-column:span 3}
.sheet .chips:not(.scrollx):not(.chips-1):not(.chips-2):not(.chips-3):not(.chips-4):not(.pied-row):not(:has(> .chip-wide)):has(> :nth-child(7):last-child) .chip,.sheet .chips:not(.scrollx):not(.chips-1):not(.chips-2):not(.chips-3):not(.chips-4):not(.pied-row):not(:has(> .chip-wide)):has(> :nth-child(8):last-child) .chip{padding-left:4px;padding-right:4px}
/* Format avec « Tous les formats » en tête : 1 + 4 + 3 */
.sheet .chips:not(.scrollx):not(.chips-1):not(.chips-2):not(.chips-3):not(.chips-4):not(.pied-row):has(> .chip-wide:first-child):has(> :nth-child(8):last-child) > :nth-child(n+2):nth-child(-n+5){grid-column:span 3}
.sheet .chips:not(.scrollx):not(.chips-1):not(.chips-2):not(.chips-3):not(.chips-4):not(.pied-row):has(> .chip-wide:first-child):has(> :nth-child(8):last-child) > :nth-child(n+6){grid-column:span 4}
.sheet .chips:not(.scrollx):not(.chips-1):not(.chips-2):not(.chips-3):not(.chips-4):not(.pied-row):has(> .chip-wide:first-child):has(> :nth-child(8):last-child) .chip:not(.chip-wide){padding-left:4px;padding-right:4px}
.sheet .chips:not(.scrollx):not(.chips-1):not(.chips-2):not(.chips-3):not(.chips-4):not(.pied-row) > .chip-wide{grid-column:1 / -1}

/* Onboarding / formulaires : même répartition équilibrée que dans les fenêtres (12 colonnes) */
.flow .chips.chips-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:10px}
.flow .chips.chips-grid > *{grid-column:span 6;min-width:0}
.flow .chips.chips-grid:has(> :nth-child(3):last-child) > *{grid-column:span 4}
.flow .chips.chips-grid:has(> :nth-child(5):last-child) > :nth-child(-n+3){grid-column:span 4}
.flow .chips.chips-grid:has(> :nth-child(6):last-child) > *{grid-column:span 4}
.flow .chips.chips-grid:has(> :nth-child(7):last-child) > :nth-child(-n+4){grid-column:span 3}
.flow .chips.chips-grid:has(> :nth-child(7):last-child) > :nth-child(n+5){grid-column:span 4}
.flow .chips.chips-grid:has(> :nth-child(8):last-child) > *{grid-column:span 3}
.flow .chips.chips-grid:has(> :nth-child(9):last-child) > *{grid-column:span 4}
.flow .chips.chips-grid:has(> :nth-child(7):last-child) .chip-lg,.flow .chips.chips-grid:has(> :nth-child(8):last-child) .chip-lg{padding:0 4px}

/* Petits écrans (≤ 350 px) : libellés des groupes de 7-8 options légèrement réduits pour rester entiers */
@media (max-width:350px){.sheet .chips:has(> :nth-child(7):last-child) .chip,.sheet .chips:has(> :nth-child(8):last-child) .chip,.flow .chips-grid:has(> :nth-child(7):last-child) .chip-lg,.flow .chips-grid:has(> :nth-child(8):last-child) .chip-lg{font-size:13px}}

/* « Écrire » : même style translucide que « Équipe » à sa gauche */
.opp-btn.lime{background:rgba(255,255,255,.08);border:0;color:#F5F6EE}
/* Compétences du profil : icône blanche devant chaque libellé */
.comp-chips .chip.comp-chip,.chips .chip.comp-chip{display:inline-flex;align-items:center;gap:7px}
.comp-chip .comp-ico{display:inline-flex;color:#F5F6EE}
.comp-chip .comp-ico svg{width:15px;height:15px}


/* Présentation (3 écrans après l'inscription) */
.tuto-top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:6px}
.tuto-top .steps{flex:1;max-width:160px}
.tuto-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.tuto-row .tuto-ico{flex:none;width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(245,246,238,.1);color:#F5F6EE}
.tuto-row b{display:block;font-size:15.5px;font-weight:700;color:#F5F6EE}
.tuto-row small{display:block;margin-top:2px;font-size:13px;line-height:1.35;color:rgba(245,246,238,.68)}
.tuto-row.is-sos{border-color:rgba(217,90,49,.45)}
.tuto-row.is-sos .tuto-ico{background:rgba(217,90,49,.2);color:#F08A62}

/* « (facultatif) » à côté d'un libellé : minuscules, plus discret, parenthèses bien lisibles */
.field > span .meta{text-transform:none;letter-spacing:0;font-weight:500;font-size:1.15em;opacity:.75;margin-left:3px}

/* « Prochain match » (plusieurs matchs) : le conteneur défilant coupait l'ombre et les coins de la carte.
   De la marge intérieure lui laisse la place, compensée par une marge négative : la mise en page ne bouge pas. */
.hm-track:not(.solo){gap:18px;padding:8px 18px 36px;margin:-8px -18px -36px;scroll-padding-inline:18px}

/* Boutons du bas (écrans avec barre d'onglets) : la barre flottante est relevée de la zone sûre de l'iPhone,
   la place réservée aux boutons doit l'être aussi, sinon la barre les recouvre. */
.has-tabs .sticky-cta{padding-bottom:calc(120px + env(safe-area-inset-bottom,0px))}

/* Fenêtre de profil : « Joueur · ville » collé au nom (le titre garde sinon 16 px de marge dessous) */
.sheet .sh-id h2.h2{margin-bottom:3px;line-height:1.15}
.sheet .sh-id .meta{margin-top:0}

/* Capitaine : « C » entouré (brassard) */
.cap-c{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-left:8px;border-radius:50%;border:1.5px solid #C6FF40;color:#C6FF40;font-size:11px;font-weight:800;line-height:1;vertical-align:middle;flex:none}

/* Résultat d'un match */
.res-card{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}
.res-card b{font-size:16px}
.res-card .res-score{font-family:var(--f-display);font-size:34px;font-weight:800;letter-spacing:-.02em;line-height:1.05}
.res-badge{align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:rgba(245,246,238,.12);color:#F5F6EE}
.res-fin.v .res-badge{background:#3DAA00;color:#fff}
.res-fin.d .res-badge{background:#E0483A;color:#fff}
.res-badge.att{background:rgba(198,255,64,.16);color:#C6FF40}
.res-badge.ctr{background:rgba(217,90,49,.25);color:#F08A62}
.res-line{display:flex;align-items:center;gap:10px;padding:10px 0}
.res-line + .res-line{border-top:1px solid rgba(245,246,238,.1)}
.res-pm{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);font-size:24px;font-weight:700;color:#F5F6EE;flex:none}
.res-n{min-width:34px;text-align:center;font-family:var(--f-display);font-size:30px;font-weight:800}

/* Agenda : match joué dont le score est à saisir / à valider */
.caldot.pending,.caldot-lg.pending{background:#F2B544}

/* Classement */
.etoile{color:#F2C14E;font-size:.95em;margin-left:2px}
.class-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 4px;border-radius:14px;color:inherit}
.class-row + .class-row{border-top:1px solid rgba(245,246,238,.08)}
.class-row.moi{background:rgba(198,255,64,.07)}
.class-rang{flex:none;width:28px;text-align:center;font-family:var(--f-display);font-size:20px;font-weight:800;color:#F5F6EE}
.class-row small{display:block;margin-top:2px}

/* Classement : tous les formats visibles d'un coup (4 par ligne) */
.class-formats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.class-formats .chip{display:flex;align-items:center;justify-content:center;height:42px;padding:0 4px;font-size:14px;font-weight:600}

/* Classement : objectif concret */
.class-objectif{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.class-objectif .btn{align-self:flex-start}

/* ===== Classement : podium, ma place, forme ===== */
.podium{display:flex;align-items:flex-end;justify-content:center;gap:10px;margin:8px 0 18px}
.pod{flex:1;min-width:0;max-width:118px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:26px 6px 12px;border-radius:22px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:inherit;text-align:center;position:relative}
.pod.p1{padding-top:34px;padding-bottom:16px;background:linear-gradient(180deg,rgba(242,193,78,.2),rgba(255,255,255,.05));border-color:rgba(242,193,78,.55);box-shadow:0 14px 30px -14px rgba(242,193,78,.45)}
.pod.p2,.pod.p3{margin-bottom:0}
.pod-medal{position:absolute;top:-12px;left:50%;transform:translateX(-50%);min-width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#2B6249;border:2px solid rgba(245,246,238,.35);font-size:13px;font-weight:800;color:#F5F6EE}
.pod.p1 .pod-medal{background:#F2C14E;border-color:#F2C14E;color:#2a1d00;font-size:15px;min-width:30px;height:30px;top:-15px}
.pod-nom{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:700;margin-top:4px}
.pod small{font-size:12px;color:rgba(245,246,238,.7)}
.class-moi{padding:16px;border-radius:22px;background:linear-gradient(180deg,rgba(198,255,64,.1),rgba(255,255,255,.04));border:1px solid rgba(198,255,64,.35)}
.class-moi .cm-top{display:flex;align-items:center;gap:12px}
.class-moi .cm-rang{flex:none;font-family:var(--f-display);font-size:34px;font-weight:800;line-height:1;color:#C6FF40;min-width:56px}
.forme-mini{display:inline-flex;gap:3px;flex:none}
.forme-mini i{width:17px;height:17px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:10px;font-weight:800;color:#fff}
.forme-mini i.V{background:#3DAA00}
.forme-mini i.D{background:#E0483A}

/* Communauté masquée : plus de compteurs « Abonnés / Abonnements » sur les profils */
.sans-communaute .counts{display:none}

/* ===== Classement : tableau Équipe · V · D · Buts ===== */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes meGlow{
  0%,100%{box-shadow:0 0 14px rgba(198,255,64,.12), inset 0 1px 0 rgba(255,255,255,.08)}
  50%{box-shadow:0 0 26px rgba(198,255,64,.26), inset 0 1px 0 rgba(255,255,255,.08)}
}
/* l'apparition en cascade ne joue qu'à l'ouverture de l'écran (pas à chaque rafraîchissement) */
.screen.rise-in .rise{animation:rise .6s cubic-bezier(.2,.8,.2,1) both}
.screen.rise-in .ct-row.me{animation:rise .6s cubic-bezier(.2,.8,.2,1) .3s both, meGlow 3.4s ease-in-out 1.2s 3}
.ct-row.me{animation:meGlow 3.4s ease-in-out 3}
/* sélecteur : une pastille qui glisse */
.class-seg{position:relative}
.class-seg i{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 7px);border-radius:21px;background:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.1);transition:transform .38s cubic-bezier(.3,1.25,.5,1);pointer-events:none}
.class-seg i.right{transform:translateX(calc(100% + 4px))}
.class-seg.un i{width:calc(100% - 10px)}
.class-seg button{position:relative;z-index:1;background:transparent!important;box-shadow:none!important;transition:color .25s}
.class-seg button[aria-selected="false"]{color:rgba(245,246,238,.7)}
.class-legend{margin:12px 2px 14px;font-size:13.5px;line-height:1.4}
.class-table{padding:6px 10px 10px;margin-bottom:14px}
.ct-head,.ct-row{display:grid;grid-template-columns:32px 44px minmax(0,1fr) 30px 30px 50px;align-items:center;column-gap:4px}
.ct-head{padding:12px 6px 8px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(245,246,238,.6)}
.ct-head span:nth-child(n+4){text-align:center}
.ct-row{width:100%;text-align:left;padding:10px 6px;border-radius:18px;color:inherit;background:transparent;border:1.5px solid transparent}
.ct-row.me{background:rgba(198,255,64,.1);border-color:rgba(198,255,64,.7)}
.ct-rang{font-family:var(--f-display);font-size:24px;font-weight:800;color:rgba(245,246,238,.55);text-align:center}
.ct-rang.or{color:#F2B544}
.ct-rang.argent{color:#C9D1CE}
.ct-rang.bronze{color:#C98A5B}
.ct-nom{display:flex;align-items:center;gap:8px;min-width:0;padding-left:6px}
.ct-nom b{font-size:16px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-nom small{font-size:11px;color:rgba(245,246,238,.6);margin-left:2px;white-space:nowrap}
.ct-nom .toi{font-style:normal;flex:none;padding:3px 9px;border-radius:999px;background:#C6FF40;color:#16210E;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.ct-n{text-align:center;font-size:17px;font-weight:700;color:#F5F6EE;font-variant-numeric:tabular-nums}
.ct-n.d{color:rgba(245,246,238,.55)}
.ct-n.b{font-size:18px}
.class-obj{padding:18px;display:flex;flex-direction:column;gap:6px}
.class-obj .cap.lime{margin:0;font-size:12px;letter-spacing:.12em}
.class-obj .obj-txt{margin:0 0 10px;font-size:19px;font-weight:700;line-height:1.28;letter-spacing:-.01em;color:#F5F6EE}
.class-obj .btn{align-self:flex-start}
@media (prefers-reduced-motion:reduce){.screen.rise-in .rise,.screen.rise-in .ct-row.me,.ct-row.me,.class-seg i{animation:none;transition:none}}

/* colonnes plus serrées : plus de place pour le nom de l'équipe */
.ct-head,.ct-row{grid-template-columns:26px 40px minmax(0,1fr) 26px 26px 42px;column-gap:2px}
.ct-head{padding-left:4px;padding-right:4px}
.ct-row{padding:10px 4px}
.ct-nom{padding-left:8px;gap:6px}
.ct-nom b{font-size:15.5px}
.ct-nom .toi{padding:2px 7px;font-size:11px}
.ct-n{font-size:16px}
.ct-n.b{font-size:17px}

/* Classement : numéro de place sobre (sans couleur), plus petit, séparé du blason par un trait */
.ct-rang,.ct-rang.or,.ct-rang.argent,.ct-rang.bronze{font-family:var(--f-body,inherit);font-size:15px;font-weight:700;color:rgba(245,246,238,.85);display:flex;align-items:center;justify-content:center;height:26px;margin-right:7px;border-right:1.5px solid rgba(245,246,238,.28)}

/* compétences : icône collée au texte */
.comp-chips{gap:6px}
.comp-chips .chip.comp-chip,.chips .chip.comp-chip{gap:4px;padding:8px 10px;white-space:nowrap}
/* « Toi » discret dans le classement */
.ct-nom .toi,.ct-nom .toi{padding:0;background:none;border-radius:0;color:rgba(245,246,238,.6);font-size:12px;font-weight:600;letter-spacing:0;text-transform:lowercase}
.ct-nom .toi::before{content:"· "}

/* ruban Organisateur / Inscrit : en pastille, pas collé au bord */
.tcard.has-ruban .ruban{top:12px;right:14px;border-radius:999px;padding:5px 11px}
.tcard.has-ruban .tcard-head{padding-right:0}

/* « Peu importe » choisi : la molette est grisée tant qu'on n'y touche pas */
.chip[data-act$="Aucun"][aria-pressed="true"] + .wheel-wrap{opacity:.35;transition:opacity .2s}

/* classement : 3 niveaux (le nom du lieu + le nombre d'équipes) */
.class-seg button{min-width:0;display:flex;align-items:center;justify-content:center;padding-left:6px;padding-right:6px}
.class-seg.n3 button{font-size:12px;letter-spacing:0}
.class-seg i{right:auto}
.class-peu{margin:2px 4px 14px;font-size:13px}
.class-peu .link{display:inline;padding:0}
.class-seg.n3 button{text-transform:none;font-size:12.5px;font-weight:700;letter-spacing:0;padding-left:3px;padding-right:3px}

.class-secteur{display:block;margin:14px 4px 0;font-size:13.5px;text-align:left}
.class-seg.n3 button{font-size:12px}
.class-peu .link{display:inline!important;width:auto!important;padding:0!important;font-size:inherit}

/* fenêtres : elles remontent au-dessus du clavier ; pendant la saisie d'une ville, le rayon se replie pour laisser la place aux suggestions */
.sheet{bottom:var(--kb,0px);max-height:calc(82% - var(--kb,0px))}
.sheet.typing .pk-rayon,.sheet.typing [data-act="closeSheetRefresh"]{display:none}
.sheet.typing #pickerVilleSuggest .list{max-height:max(160px,calc(80vh - var(--kb,0px) - 190px))}
/* classement : l'objectif est une bande discrète, le tableau reste l'élément principal */
.class-obj{flex-direction:row;align-items:center;gap:12px;padding:12px 14px;border-radius:18px}
.class-obj .cap.lime{display:none}
.class-obj .obj-txt{flex:1;min-width:0;margin:0;font-size:14px;font-weight:600;line-height:1.35;letter-spacing:0;color:rgba(245,246,238,.92)}
.class-obj .btn{align-self:center;flex:none;white-space:nowrap}

/* classement : plus de place pour le nom de l'équipe, sur une seule ligne */
.ct-head,.ct-row{grid-template-columns:24px 36px minmax(0,1fr) 24px 24px 40px;column-gap:4px}
.ct-row{padding-left:4px;padding-right:4px}
.ct-row .crest-40{width:34px;height:34px}
.ct-nom{padding-left:2px;gap:6px}

/* ===== Accueil allégé : logo, deux tuiles, trois pastilles ===== */
.hh-logo{flex:none;display:grid;place-items:center;color:#C6FF40}
.hh-logo svg{width:34px;height:34px;stroke-width:1.7}
.hh{gap:10px}
.home-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.home-row2 .find-bar{height:84px;min-height:84px;padding:0 12px 0 20px;border-radius:30px;justify-content:space-between}
.home-row2 .find-bar b{font-size:17px;line-height:1.15}
.home-row2 .bigbloc.is-sos{height:84px;padding:0 16px;border-radius:30px;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px}
.home-row2 .bigbloc.is-sos b{font-size:17px;line-height:1.15;white-space:normal}
.minirow.pills{grid-template-columns:repeat(3,1fr);gap:10px}
.minirow.pills .minibloc{height:54px;padding:0 10px 0 8px;border-radius:27px;flex-direction:row;align-items:center;justify-content:center;gap:8px}
.minirow.pills .minibloc .mb-ico{width:34px;height:34px;flex:none}
.minirow.pills .minibloc .mb-ico svg{width:19px;height:19px}
.minirow.pills .minibloc b{font-size:15px;font-weight:700;white-space:nowrap}
.minirow.pills .minibloc.has-dot::after{top:6px;right:10px}
/* flèches : un halo qui entre et ressort doucement (transform/opacité seulement, pause hors écran) */
.pm-go,.find-bar .fb-go{position:relative}
.pm-go::before,.find-bar .fb-go::before{content:"";position:absolute;inset:0;border-radius:50%;background:#C6FF40;opacity:0;pointer-events:none;animation:flecheHalo 3.4s ease-out infinite;will-change:transform,opacity}
@keyframes flecheHalo{0%{transform:scale(1);opacity:.5}38%{transform:scale(1.75);opacity:0}100%{transform:scale(1.75);opacity:0}}
.screen:not(:last-child) .pm-go::before,.screen:not(:last-child) .fb-go::before{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.pm-go::before,.find-bar .fb-go::before{animation:none}}

/* ===== Boutons ronds à flèche et « + » : même dégradé, même icône, anneaux en box-shadow (sans flou) ===== */
.pm-go,.find-bar .fb-go{border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#14261F;background:linear-gradient(180deg,#C6FF40,#BFEE48);box-shadow:inset 0 1px 0 rgba(255,255,255,.40),0 0 0 4px rgba(198,255,64,.12),0 0 0 8px rgba(198,255,64,.045),0 6px 14px rgba(8,24,18,.30)}
.pm-go{width:48px;height:48px}
.find-bar .fb-go{width:44px;height:44px}
.pm-go::before,.find-bar .fb-go::before{content:none;animation:none}
.tab-create .tab-ico{color:#14261F;background:linear-gradient(180deg,#C6FF40,#BFEE48);box-shadow:inset 0 1px 0 rgba(255,255,255,.40),0 0 0 5px rgba(198,255,64,.12),0 8px 18px rgba(8,24,18,.40)}
/* accueil : libellés des blocs en poids moyen (l'heure, la date et le salut restent forts) */
.pm-vs{font-weight:500}

/* Prochain match : cercle vert foncé et chevron vert clair (pas d'anneaux) */
.pm-go{background:rgba(198,255,64,.24);color:#C6FF40;box-shadow:none}
/* accueil : libellés des blocs en gras plus fin et un peu plus petits */
.home-row2 .find-bar b,.home-row2 .bigbloc b{font-size:17px;font-weight:800;letter-spacing:-.01em}
.minirow.pills .minibloc b{font-size:14px;font-weight:800}
/* Match SOS : l'anneau pulse en continu, régulièrement (pause quand l'écran n'est pas visible) */
.bigbloc.is-sos::after{animation:sosRing 2.8s ease-out infinite;will-change:transform,opacity}

/* accueil : le titre se rapproche des 28 px des autres onglets */
.hh h1{font-size:26px}

/* cercles d'icônes de l'accueil : même vert lime que ceux d'Explorer */
.minirow.pills .minibloc .mb-ico{background:#446142;color:#BFEE48}
.minirow.pills .minibloc .mb-ico svg{color:#BFEE48}
/* tuiles de navigation : même taille de titre sur l'accueil et dans Explorer */
.catcard b{font-size:17px}

/* accueil : Trouver un match et Match SOS en pleine largeur, l'un sous l'autre, avec un petit texte */
.home-row2{grid-template-columns:1fr;gap:12px}
.home-row2 .find-bar{height:78px;min-height:78px;padding:0 14px 0 22px;border-radius:32px;text-align:left}
.home-row2 .bigbloc.is-sos{height:78px;padding:0 22px 0 16px;border-radius:32px;gap:14px;text-align:left}
.home-row2 .grow{flex:1;min-width:0;display:block;text-align:left}
.home-row2 .grow b{display:block;white-space:nowrap}
.home-row2 .grow small{display:block;margin-top:3px;font-size:12.5px;font-weight:500;line-height:1.25;color:rgba(245,246,238,.7)}

/* accueil : les deux ronds (flèche et flamme) dans la même colonne, à droite ; textes alignés à gauche */
.home-row2 .bigbloc.is-sos{flex-direction:row-reverse;padding:0 15px 0 22px;gap:14px}

/* accueil : Créer / Équipe / Dispo dans une seule barre fine à trois colonnes */
.minirow.pills{display:grid;grid-template-columns:repeat(3,1fr);gap:0;height:56px;border-radius:28px;background:rgba(245,246,238,.06);border:1.5px solid rgba(245,246,238,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 6px 14px rgba(8,24,18,.28);overflow:hidden}
.minirow.pills .minibloc{height:100%;border:0;border-radius:0;background:transparent;box-shadow:none;padding:0 6px;gap:7px}
.minirow.pills .minibloc+.minibloc{border-left:1px solid rgba(245,246,238,.14)}
.minirow.pills .minibloc .mb-ico{width:30px;height:30px}
.minirow.pills .minibloc .mb-ico svg{width:17px;height:17px}
.minirow.pills .minibloc b{font-size:14px}
.minirow.pills .minibloc.has-dot::after{top:9px;right:14px}

/* Match SOS : anneau plus lent (un cycle toutes les 4,6 s) */
.bigbloc.is-sos::after{animation:sosRing 4.6s ease-out infinite}

/* retour visuel à l'appui sur un bloc : un voile clair très doux derrière le contenu (les icônes gardent leur couleur) et un léger enfoncement */
.card-tap,.list-row,.catcard,.pm-card,.find-bar,.bigbloc,.minibloc,.ct-row,.opt,.vrow,.tcard,.flux-row,.fmt-card,.flat-tile,.sosm-card,.dchip,.mini,.tile,.post,.next-strip,.card-row,.row-tap{transition:box-shadow .25s ease-out,transform .18s ease-out}
.is-pressed{box-shadow:inset 0 0 0 999px rgba(245,246,238,.085)!important;transform:scale(.985);transition:box-shadow .07s ease-out,transform .07s ease-out}
@media (prefers-reduced-motion:reduce){.is-pressed{transition:none}}

/* ===== Accueil : Trouver un match en barre, puis grille 2 x 2 (Créer, SOS, Équipe, Dispo) — retour : étiquette git accueil-barre-valide-2 ===== */
.home-row2 .find-bar{height:72px;min-height:72px}
.home-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.home-grid .bigbloc{position:relative;height:88px;padding:13px 14px;border-radius:26px;flex-direction:column;justify-content:space-between;align-items:flex-start;text-align:left;gap:0}
.home-grid .bigbloc .bb-ico{width:38px;height:38px}
.home-grid .bigbloc b{font-size:15px;font-weight:800;letter-spacing:-.01em;white-space:nowrap}
.home-grid .bigbloc:not(.is-sos) .bb-ico{background:#446142;color:#BFEE48}
.home-grid .bigbloc:not(.is-sos) .bb-ico svg{color:#BFEE48}
.home-grid .bigbloc.has-dot::after{content:"";position:absolute;top:14px;right:14px;width:10px;height:10px;border-radius:50%;background:#C6FF40;border:2px solid #2B3F3B}

/* Explorer : les tuiles reprennent le contour, le dégradé et la profondeur (ombre) des blocs de l'accueil */
.catcard{background-image:linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.08);border-radius:26px;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 6px 14px rgba(8,24,18,.28)}

/* Blocs (barre, tuiles de l'accueil, tuiles d'Explorer) : blanc crème adouci et voile plus léger. La carte Prochain match et le titre ne changent pas. Retour : étiquette git blanc-avant-adoucissement */
.home-row2 .find-bar b,.home-grid .bigbloc b,.catcard b{color:#DDE4DA}
.find-bar small,.catcard small{color:rgba(221,228,218,.62)}
.find-bar,.home-grid .bigbloc:not(.is-sos),.catcard{background-image:linear-gradient(rgba(255,255,255,.06),rgba(255,255,255,.02));border-color:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 6px 14px rgba(8,24,18,.28)}

/* Carte Prochain match : blanc adouci aussi (essai). Retour : étiquette git carte-match-blanc-avant */
.pm-card .pm-time{color:#E6ECE2}
.pm-card .pm-date{color:rgba(221,228,218,.88)}
.pm-card .pm-vs{color:#DDE4DA}
.pm-card .rg-tx b,.pm-card .rg-tx small{color:#DDE4DA}

/* grille de l'accueil : un peu plus d'espace entre le rond et le texte */
.home-grid .bigbloc{height:95px}


/* Résultats de recherche : le titre (« N équipes trouvées ») respire, il n'est plus collé en haut ni aux filtres */
.topbar.tb-res{padding-top:26px;padding-bottom:18px}
.topbar.tb-res + .pad{padding-top:6px}

/* Choix sélectionnés dans les parcours (créer un match, inscription, créer une équipe…) : blanc neutre, comme dans le reste de l'app. Retour : étiquette git selections-lime */
.flow .opt[aria-pressed="true"]{background:rgba(245,246,238,.1);border:1.5px solid rgba(245,246,238,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 22px rgba(8,24,18,.34)}
.flow .opt[aria-pressed="true"] .opt-mark{background:#F5F6EE;border-color:#F5F6EE}
.screen.flow .chip[aria-pressed="true"]{background:rgba(245,246,238,.14);color:#F5F6EE;border:1.5px solid rgba(245,246,238,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 16px rgba(8,24,18,.3)}
.screen.flow .chip[aria-pressed="true"] .pied-dots{color:#F5F6EE}

/* Options à cocher (créer un match : format, niveau… ; tournoi) : sélection en blanc neutre partout, plus de lime. Retour : étiquette git selections-lime */
.opt[aria-pressed="true"]{background:rgba(245,246,238,.1);border-color:rgba(245,246,238,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.opt[aria-pressed="true"] .opt-mark{border-color:#F5F6EE;background:#F5F6EE;color:#14261F}

/* Coche de sélection : plus discrète (contour clair, fond à peine teinté, coche fine) */
.opt[aria-pressed="true"] .opt-mark,.flow .opt[aria-pressed="true"] .opt-mark{background:rgba(245,246,238,.14);border-color:rgba(245,246,238,.7);color:#F5F6EE}
.opt[aria-pressed="true"] .opt-mark svg,.flow .opt[aria-pressed="true"] .opt-mark svg{stroke-width:2.4}

/* Palette resserrée : fond teal, crème, lime (action), corail (SOS). "En attente"/avertissement = crème neutre, plus de bleu */
:root{--orange:#F27B52}
.sos .link{color:#F27B52}
.badge-sos{background:#F27B52;color:#2A1208}
.badge-pending{background:rgba(245,246,238,.12);color:#F5F6EE}
.state-ico.warn{background:rgba(245,246,238,.1);color:#F5F6EE;border-color:rgba(245,246,238,.22)}
.offline-bar{background:#F5F6EE;color:#16241F}
.tile.sos .ti,.catcard.sos .ti,.pill.is-sos .pi{background:rgba(242,123,82,.22);color:#F27B52}

/* Badge SOS plus doux (teinte corail, pas de aplat) ; « EN cours » tient dans l'anneau */
.badge-sos{background:rgba(242,123,82,.16);color:#F6A084}
.badge .pulse{animation-duration:3.2s}
.rg-tx b.enc{font-size:12.5px;letter-spacing:0}

/* Bouton « + » : classique, aplat lime, aucun halo ni dégradé */
.tab-create .tab-ico,.tab[aria-current="true"].tab-create .tab-ico{background:#C6FF40;box-shadow:none;color:#14261F}
.tab-create:active .tab-ico{transform:none}

/* Terrains : filtres sur une rangée, compteur + Liste/Carte, terrains en cartes */
.chip-moi{color:#C6FF40}
.terr-bar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.terr-bar .seg{flex:none;width:auto;min-width:150px}
.terr-cards{display:flex;flex-direction:column;gap:10px}
.terr-cards .vrow{display:flex;align-items:center;gap:13px;padding:13px 14px;border-radius:22px;background-image:linear-gradient(rgba(255,255,255,.06),rgba(255,255,255,.02));border:1.5px solid rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 6px 14px rgba(8,24,18,.28)}
.terr-cards .vrow .pin{flex:none;width:44px;height:44px;border-radius:50%;background:#446142;color:#BFEE48;display:grid;place-items:center}
.terr-cards .vrow b{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.01em;color:#DDE4DA}
.terr-cards .vrow small{display:block;margin-top:3px;font-size:12.5px;color:rgba(221,228,218,.62)}
.vr-d{flex:none;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.vr-d b{font-size:14px;font-weight:800;color:#F5F6EE}
.vr-five{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#C6FF40;background:rgba(198,255,64,.12);border-radius:999px;padding:3px 8px}

/* Filtres Terrains : une rangée fixe, sans défilement latéral */
.terr-filtres{display:grid;grid-template-columns:44px 1fr 1fr 1fr;gap:8px}
.terr-filtres .chip{min-width:0;height:44px;padding:0 10px;display:flex;align-items:center;justify-content:center;gap:6px}
.terr-filtres .chip-moi{padding:0}
.terr-filtres .tf-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Messagerie : le contexte d'un SOS joueurs en corail doux pour le distinguer */
.bubble.sys.sys-sos{background:rgba(242,123,82,.14);color:#F6A084;border:1px solid rgba(242,123,82,.3)}

/* « Prêt à jouer ? » : simple chevron discret, sans pastille ni couleur */
.pm-go.pm-go-soft{background:none!important;box-shadow:none!important;width:auto;height:auto;color:rgba(245,246,238,.5)}
.pm-go.pm-go-soft::before{content:none!important;animation:none!important}

/* Contexte SOS dans le chat : pastille centrée, texte équilibré */
.bubble.sys.sys-sos{align-self:center;width:fit-content;max-width:92%;padding:8px 16px 8px calc(16px + .12em);border-radius:999px;line-height:1.3;text-align:center}

/* Barre d'onglets : contour plus net, icônes un peu plus grandes */
.tabbar{border:1.5px solid rgba(255,255,255,.16)}
.tab .tab-ico svg{width:29px;height:29px}

/* Carte joueur : le bouton d'invitation ressort quand le joueur est en mode Dispo */
.tcard-foot .btn-primary.pj-btn{background:linear-gradient(180deg,#347F5A,#2B6249);border:1px solid rgba(198,255,64,.5);color:#F5F6EE}
.tcard-foot .btn-primary.pj-btn::before{content:"";width:7px;height:7px;border-radius:50%;background:#C6FF40;flex:none}

/* Carte joueur : nom jamais rogné, « Dispo » centré sur la hauteur du nom, bouton d'invitation sans pastille */
.ucard-v2 .tc-nomrow{display:flex;align-items:center;gap:8px;min-width:0}
.ucard-v2 .tc-nomrow .tc-nom{line-height:1.3;padding-bottom:2px;min-width:0;margin:0}
.ucard-v2 .tc-nomrow .badge{flex:none;align-self:center}
.tcard-foot .btn-primary.pj-btn::before{content:none}

/* Bouton « + » : pastille large */
.tab-create .tab-ico{width:78px;height:54px;border-radius:27px;margin-top:-30px}

/* Bouton « + » : rond parfait, un peu plus bas pour bien se cadrer dans la barre */
.tab-create .tab-ico{width:66px;height:66px;border-radius:50%;margin-top:-26px}

/* Bouton « + » : entre cercle et rectangle (carré très arrondi), même position basse */
.tab-create .tab-ico{width:66px;height:62px;border-radius:30px;margin-top:-24px}

/* Barre d'onglets : plus de point sous l'onglet actif, icônes recentrées et un peu plus grandes */
.tab[aria-current="true"]:not(.tab-create)::after{content:none!important}
.tab:not(.tab-create){height:70px!important;padding:0!important;justify-content:center;align-items:center}
.tab .tab-ico svg{width:32px!important;height:32px!important}
.tab:not(.tab-create) .tab-ico{transform:translateY(-3px)}

/* Barre d'onglets légèrement plus haute */
.tabbar{height:78px!important}
.tab:not(.tab-create){height:78px!important}

/* Barre d'onglets un peu plus haute sur l'écran (+10 px) ; le contenu garde sa marge */
.tabbar{bottom:26px!important}
.has-tabs .screen .scroll:not(.home){padding-bottom:126px!important}
.has-tabs .sticky-cta{padding-bottom:130px!important}

/* ===== Barre d'onglets : pleine largeur collée en bas (thème de la référence), « + » dans la barre ===== */
.tabbar{left:0!important;right:0!important;bottom:0!important;height:calc(88px + env(safe-area-inset-bottom,0px))!important;border-radius:0!important;border:0!important;border-top:1px solid rgba(255,255,255,.07)!important;background:#1A3A31!important;box-shadow:none!important;padding:0 10px calc(18px + env(safe-area-inset-bottom,0px))!important;align-items:flex-start!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.tab:not(.tab-create){height:60px!important}
.tab-create{height:60px!important;display:grid!important;place-items:center!important}
.tab-create .tab-ico{width:52px!important;height:40px!important;border-radius:20px!important;margin-top:0!important;transform:none!important}
.tab:not(.tab-create) .tab-ico{transform:none}
.has-tabs .screen .scroll:not(.home){padding-bottom:116px!important}
.has-tabs .sticky-cta{padding-bottom:120px!important}

/* Barre pleine largeur : moins d'espace perdu en bas (la zone de sécurité de l'iPhone suffit) */
.tabbar{height:calc(60px + env(safe-area-inset-bottom,0px))!important;padding:0 10px env(safe-area-inset-bottom,0px)!important;align-items:center!important}
.tab:not(.tab-create){height:60px!important}
.tab-create{height:60px!important}

/* Barre : « + » un peu moins haut, bien centré (pastille et symbole), et les cinq onglets légèrement plus bas */
.tab-create .tab-ico{width:52px!important;height:36px!important;border-radius:18px!important;display:grid!important;place-items:center!important;margin:0!important;padding:0!important}
.tab-create .tab-ico svg{display:block;margin:0!important}
.tab-create{display:grid!important;place-items:center!important}
.tab{position:relative;top:3px}
.tab:not(.tab-create) .tab-ico{display:grid;place-items:center}
.tab:not(.tab-create) .tab-ico svg{display:block}
.tab:not(.tab-create) .tab-ico{width:48px;height:48px}
.tab-create .tab-ico svg{width:26px!important;height:26px!important}

/* Bouton « + » un peu plus imposant (action principale) */
.tab-create .tab-ico{width:62px!important;height:46px!important;border-radius:23px!important}
.tab-create .tab-ico svg{width:28px!important;height:28px!important}

/* Barre d'onglets : fondu — l'écran se prolonge en s'assombrissant, sans trait */
.tabbar{background:linear-gradient(rgba(36,58,54,0),#16302A 55%)!important;border-top:0!important}

/* Fondu de la barre plus marqué : plus sombre en bas, et un léger voile au-dessus de la barre */
.tabbar{background:linear-gradient(rgba(36,58,54,0),#0F211D 42%)!important}
.tabbar::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:44px;background:linear-gradient(rgba(15,33,29,0),rgba(15,33,29,.6));pointer-events:none}

/* Version web (grand écran) : l'app s'affiche comme un écran de téléphone propre, centré — plus de rail « prototype », d'encoche ni de fausse barre d'état */
@media (min-width:860px){
  body{background:radial-gradient(1200px 700px at 50% 0%,#2F4A44 0%,#16241F 60%,#0E1815 100%)!important}
  .stage{display:flex!important;justify-content:center;align-items:center;gap:0;padding:24px 20px!important;min-height:100dvh}
  .rail,.device-notch,.statusbar,.device-hint{display:none!important}
  .device-wrap{width:min(440px,100%)!important;height:auto!important}
  .device{width:100%!important;height:min(900px,calc(100dvh - 48px))!important;border:1px solid rgba(245,246,238,.14)!important;border-radius:30px!important;box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 8px rgba(255,255,255,.03)!important}
  .app{border-radius:30px}
}

/* Barre d'onglets : opaque (on ne voit plus le contenu à travers), vert moins marqué, fondu discret vers le bas */
.tabbar{background:linear-gradient(#243A36,#1B2D29)!important}
.tabbar::before{height:38px;background:linear-gradient(rgba(36,58,54,0),rgba(36,58,54,.92))}

/* Barre d'onglets : dégradé bien visible mais plus clair, trait de délimitation net, toujours opaque */
.tabbar{background:linear-gradient(#2B4540,#1D3731)!important;border-top:1px solid rgba(255,255,255,.12)!important}
.tabbar::before{height:30px;background:linear-gradient(rgba(36,58,54,0),rgba(36,58,54,.85))}

/* Barre d'onglets : dégradé un peu plus marqué, progressif (opaque) */
.tabbar{background:linear-gradient(#304B46 0%,#27413B 38%,#1E3731 72%,#182C27 100%)!important}

/* Haut de l'écran à droite : lueur verte adoucie, plus proche de la teinte du thème */
.screen::before{background:radial-gradient(circle,rgba(120,190,160,.085) 0%,rgba(120,190,160,0) 62%)}

/* Onglets : plus petits ; l'anneau n'entoure que l'onglet actif, les autres icônes sont libres (plus légères) */
.tab .tab-ico svg{width:29px!important;height:29px!important}
.tab:not(.tab-create):not([aria-current="true"]) .tab-ico svg{transform:scale(1.38);transform-origin:center}
.tab:not(.tab-create):not([aria-current="true"]) .tab-ico svg circle:first-child{display:none}
/* La boussole garde son cercle même inactive (sans lui, l'aiguille seule ne se lit plus) */
.tab[data-tab="explore"]:not([aria-current="true"]) .tab-ico svg{transform:none}
.tab[data-tab="explore"]:not([aria-current="true"]) .tab-ico svg circle:first-child{display:inline}

/* ============================================================
   BALLON ROND — Barre de navigation « Moderne A » (remplace toutes les versions précédentes)
   ============================================================ */
:root{--bn-ink:#9aa8a3;--bn-accent:#c9e87c;--bn-pivot:#1f2b28}
.tabbar.bn-nav{position:absolute!important;left:16px!important;right:16px!important;bottom:max(22px,calc(env(safe-area-inset-bottom,0px) - 8px))!important;height:78px!important;box-sizing:border-box!important;padding:0 8px!important;display:flex!important;align-items:center!important;border-radius:39px!important;background:linear-gradient(180deg,#25332f,#1a2421)!important;border:1.5px solid rgba(255,255,255,.12)!important;box-shadow:0 14px 34px rgba(0,0,0,.45)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;margin:0!important}
.tabbar.bn-nav[hidden]{display:none!important}
.tabbar.bn-nav::before,.tabbar.bn-nav::after{display:none!important}
.bn-tab{flex:1;min-width:0;background:none;border:0;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--bn-ink);font:inherit;-webkit-tap-highlight-color:transparent}
.bn-ico{width:54px;height:38px;display:flex;align-items:center;justify-content:center}
.bn-label{font-size:11px;font-weight:600;white-space:nowrap}
.bn-tab.is-active{color:var(--bn-accent)}
.bn-tab.is-active .bn-label{font-weight:700}
.bn-tab.is-active .bn-ico{background:radial-gradient(closest-side,rgba(201,232,124,.17),rgba(201,232,124,0) 100%)}
.bn-plus-slot{flex:0 0 78px;display:flex;justify-content:center}
.bn-plus{width:64px;height:50px;border:0;padding:0;cursor:pointer;border-radius:25px;display:flex;align-items:center;justify-content:center;color:#1d2a26;background:linear-gradient(180deg,#dcefa6,#bcd965);box-shadow:0 8px 20px rgba(201,232,124,.16),inset 0 1.5px 0 rgba(255,255,255,.5)}
/* le contenu garde une marge sous la barre flottante */
.has-tabs .screen .scroll:not(.home){padding-bottom:132px!important}
.has-tabs .sticky-cta{padding-bottom:136px!important}

/* Fond d'écran uniforme : plus de lueur ni de dégradé de couleur derrière « Salut » et les icônes du haut, sur chaque onglet */
.screen::before,.screen::after,.glow{display:none!important}
.app,.screen,.scroll,.topbar{background-image:none!important}
/* Barre d'onglets : vert plus clair, cohérent avec les cartes de l'app, avec un contraste net sur le fond */
.tabbar.bn-nav{background:linear-gradient(180deg,#3A5750,#2D4842)!important;border:1.5px solid rgba(255,255,255,.16)!important}
:root{--bn-pivot:#2F4A44}
/* Halo derrière l'icône active : plus discret */
.bn-tab.is-active .bn-ico{background:radial-gradient(closest-side,rgba(201,232,124,.08),rgba(201,232,124,0) 100%)}

/* ---- Haut d'écran : plus de trait en dégradé sous l'en-tête, boutons d'en-tête unis ---- */
.hsep,.topbar::after{display:none!important}
.hh .icon-btn,.topbar .icon-btn:not([data-back]),.home-top .icon-btn{background:rgba(245,246,238,.09)!important;background-image:none!important;border:1px solid rgba(255,255,255,.1)!important;box-shadow:none!important}

/* ---- Textes coupés (le « y », « g », « p »… rognés) : on laisse la place aux jambages sans décaler la mise en page ---- */
.hh h1,.topbar .h2,.truncate,.tc-nom,.h3,.h2,.row .grow b,.list-row .grow b{line-height:1.3;padding-bottom:.18em;margin-bottom:-.18em}
.hh h1{overflow:visible;text-overflow:clip}

/* ---- Barre d'onglets : moins claire (entre l'ancienne et la dernière), toujours bien détachée du fond ---- */
.tabbar.bn-nav{background:linear-gradient(180deg,#2E4843,#263E39)!important;border:1.5px solid rgba(255,255,255,.15)!important}
:root{--bn-pivot:#2A433E}
/* la ligne sous l'en-tête devient invisible mais garde sa place (l'espacement ne change pas) */
.hsep{display:block!important;background:none!important}
.topbar::after{display:block!important;background:none!important}

/* Barre d'onglets : couleurs déjà utilisées dans l'app (cartes #2F4743, fond de barre #1F332F) */
.tabbar.bn-nav{background:linear-gradient(180deg,#2F4743,#1F332F)!important;border:1.5px solid rgba(255,255,255,.14)!important}
:root{--bn-pivot:#27403B}
/* Écran installé (accueil du téléphone) : le fond derrière la barre d'état et le haut de l'écran est le même teal uni */
html,html body,.device,.app{background-color:#243A36!important;background-image:none!important}
/* « Trouver un match » : flèche lime arrondie dans un disque translucide, comme les icônes de la barre */
.find-bar .fb-go,.home-row2 .find-bar .fb-go{background:rgba(245,246,238,.10)!important;background-image:none!important;border:1.5px solid rgba(245,246,238,.18)!important;box-shadow:none!important;color:#C6FF40!important;width:46px;height:46px}
.find-bar .fb-go::before{display:none!important}
/* Classement d'une autre ville */
.class-ext{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-radius:999px;background:rgba(245,246,238,.07);border:1px solid rgba(245,246,238,.12);margin-bottom:12px}
.class-ext .ce-lieu{display:flex;align-items:center;gap:7px;font-weight:700;color:#F5F6EE}
.class-ext .link{font-size:13px;color:#C6FF40;font-weight:700}

/* « Trouver un match » : chevron dans un cercle fin (le cercle est dessiné dans l'icône, plus de disque ni de contour autour) */
.find-bar .fb-go,.home-row2 .find-bar .fb-go{background:none!important;border:0!important;box-shadow:none!important;width:44px;height:44px;padding:0}
.find-bar .fb-go svg{display:block}
/* Barre d'onglets : le même lime que les icônes des tuiles (Mon équipe, Je suis dispo…) */
:root{--bn-accent:#BFEE48}
.bn-tab.is-active .bn-ico{background:radial-gradient(closest-side,rgba(191,238,72,.08),rgba(191,238,72,0) 100%)}
.bn-plus{background:#BFEE48!important;box-shadow:0 8px 20px rgba(191,238,72,.14),inset 0 1.5px 0 rgba(255,255,255,.35)!important;color:#1d2a26}

/* ---- Bouton « + » : même effet que sur la maquette (dégradé doux, reflet, halo) + un effet net au toucher ---- */
.bn-plus{background:linear-gradient(180deg,#D6F574 0%,#BFEE48 55%,#AEDD3C 100%)!important;box-shadow:0 8px 20px rgba(191,238,72,.18),inset 0 1.5px 0 rgba(255,255,255,.55)!important;transition:transform .16s cubic-bezier(.3,1.5,.5,1),box-shadow .16s ease,filter .16s ease}
.bn-plus:active{transform:scale(.92);filter:brightness(1.07) saturate(1.1);box-shadow:0 0 0 7px rgba(191,238,72,.22),0 3px 10px rgba(191,238,72,.25),inset 0 1.5px 0 rgba(255,255,255,.6)!important}
.bn-plus svg{transition:transform .16s ease}
.bn-plus:active svg{transform:rotate(90deg) scale(.94)}

/* ---- Flèche « Trouver un match » : cercle et chevron plus fins ---- */
.find-bar .fb-go svg{width:40px;height:40px}

/* ---- Filtres (Joueurs, Équipes, Matchs) : même agencement, alignement propre ---- */
.fs-lieu{display:flex;align-items:center;gap:10px;width:100%;margin:0 0 18px;padding:12px 16px;border-radius:22px;border:1px solid rgba(245,246,238,.12);background:rgba(245,246,238,.06);text-align:left}
.fs-lieu b{font-size:15px}
.fs-foot{display:grid!important;grid-template-columns:1fr 1.5fr;gap:10px;margin-top:6px}
.fs-foot .btn{width:100%}

/* « + » : effet au toucher plus doux et discret */
.bn-plus:active{transform:scale(.97)!important;filter:brightness(1.03)!important;box-shadow:0 6px 16px rgba(191,238,72,.16),inset 0 1.5px 0 rgba(255,255,255,.5)!important}
.bn-plus:active svg{transform:none!important}

/* « Retirer l'invitation » : bien distinct des autres boutons (fond clair translucide, contour net, croix) */
.btn.pj-retirer,.tcard-foot .btn.pj-retirer{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:rgba(245,246,238,.16)!important;background-image:none!important;border:1.5px solid rgba(245,246,238,.6)!important;color:#F5F6EE!important;font-weight:800;box-shadow:none!important}
.btn.pj-retirer svg{width:14px;height:14px;flex:none;stroke-width:2.6}
.btn.pj-retirer:active{background:rgba(245,246,238,.26)!important}
/* « Retirer l'invitation » : rouge doux (action d'annulation), impossible à confondre avec Profil / L'inviter */
.btn.pj-retirer,.tcard-foot .btn.pj-retirer{background:rgba(224,72,58,.16)!important;border:1.5px solid rgba(255,138,126,.7)!important;color:#FFB4AA!important}
.btn.pj-retirer:active{background:rgba(224,72,58,.28)!important}


/* ===== Audit visuel — lot 1 =====
   Zones tactiles : 44 px minimum sans agrandir le dessin ; états vides unifiés ; texte minimum 10-11 px ; un seul lime d'accent (#C6FF40) + sa nuance douce (#BFEE48) */
.icon-btn,.sh-back{position:relative}
.icon-btn::after,.sh-back::after{content:"";position:absolute;inset:-4px}
.state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.state .h2{font-size:20px;line-height:1.25;margin:0}
.state .lead{max-width:30ch;margin:0;color:#A8B8B2}
.state-ico{display:grid;place-items:center;margin-left:auto;margin-right:auto}
/* Sans match prévu, la carte « Prêt à jouer ? » est le seul accès à la recherche : sa flèche se lit mieux */
.pm-go.pm-go-soft{color:rgba(245,246,238,.85)!important}

/* Messagerie : même pastille rouge que la cloche */
.icon-btn.has-dot .dot{width:12px;height:12px;top:3px;right:3px;background:#FF6B4A;border:2px solid #243A36;box-shadow:0 0 8px rgba(255,107,74,.7)}
/* Carte « Prêt à jouer ? » : cercle + chevron identiques à « Trouver un match » (la flèche d'origine est supprimée) */
.pm-go.pm-go-soft{width:auto;height:auto;background:none!important;box-shadow:none!important;border:0!important;opacity:1}
.pm-go.pm-go-soft svg{display:block}
/* Carte « Prêt à jouer ? » : la flèche (28 px, proportionnée au texte) ne chevauche plus le centre du dessin de terrain en filigrane */
.pm-vide .pm-fili{-webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 0,transparent 30px,#000 31px);mask-image:radial-gradient(circle at 50% 50%,transparent 0,transparent 30px,#000 31px)}
.pm-go.pm-go-soft svg{width:28px;height:28px}


/* ===== Accueil : 4 blocs avec sous-titre et filigrane de terrain (sans flèche, sans interrupteur) ===== */
.home-grid .bigbloc{height:112px!important;overflow:hidden;padding:14px 15px!important;justify-content:space-between}
.home-grid .bigbloc>*{position:relative;z-index:1}
.home-grid .bigbloc .pm-fili{position:absolute;z-index:0;right:-62px;bottom:-72px;width:180px;height:180px;opacity:.1;pointer-events:none}
.bb-txt{display:flex;flex-direction:column;gap:2px;min-width:0;width:100%;text-align:left}
.bb-txt b{font-size:17px!important;line-height:1.2;white-space:nowrap}
.bb-txt small{display:block;font-size:12px;font-weight:500;line-height:1.3;color:rgba(245,246,238,.62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* « Je suis dispo » actif : tout le bloc passe en lime */
.home-grid .bigbloc.on{background:linear-gradient(160deg,#CCFF4D,#B9EC3A)!important;background-image:linear-gradient(160deg,#CCFF4D,#B9EC3A)!important;border-color:rgba(255,255,255,.35)!important;box-shadow:0 8px 20px rgba(191,238,72,.22),inset 0 1px 0 rgba(255,255,255,.5)!important}
.home-grid .bigbloc.on .bb-txt b{color:#16210E!important}
.home-grid .bigbloc.on .bb-txt small{color:rgba(22,33,14,.72)}
.home-grid .bigbloc.on .bb-ico{background:#1B2B1E!important;color:#C6FF40!important}
.home-grid .bigbloc.on .bb-ico svg{color:#C6FF40!important}
.home-grid .bigbloc.on .pm-fili{filter:brightness(0);opacity:.08}

/* ===== « Aucun match prévu » : le dessin de terrain ne passe plus sous la flèche (il reste seulement un arc dans le coin haut droit) ===== */
.pm-vide .pm-fili{-webkit-mask-image:none!important;mask-image:none!important;right:-150px!important;bottom:auto!important;top:-110px!important}

/* ===== 4 blocs : dessin de terrain plus haut et légèrement vert, coins plus arrondis, texte un peu plus petit ===== */
.home-grid .bigbloc{border-radius:32px!important}
.home-grid .bigbloc .pm-fili{right:-67px;bottom:-59px;opacity:.2}
.home-grid .bigbloc .pm-fili [stroke]{stroke:#7FD6A6}
.home-grid .bigbloc .pm-fili circle[fill]{fill:#7FD6A6}
.home-grid .bigbloc.on .pm-fili{opacity:.1}
.bb-txt b{font-size:15.5px!important}
.bb-txt small{font-size:11px}

/* Dessin de terrain : même teinte que le bloc (ton sur ton) — sauf Match SOS, qui garde son cercle vert */
.home-grid .bigbloc:not(.is-sos):not(.on) .pm-fili{opacity:.08}
.home-grid .bigbloc:not(.is-sos):not(.on) .pm-fili [stroke]{stroke:#F5F6EE}
.home-grid .bigbloc:not(.is-sos):not(.on) .pm-fili circle[fill]{fill:#F5F6EE}
/* Match SOS : le cercle vert derrière le texte est beaucoup plus discret (le texte se lit sans effort) */
.home-grid .bigbloc.is-sos .pm-fili{opacity:.09}
/* Match SOS : le cercle du terrain est corail (couleur du bloc), discret pour ne pas gêner la lecture */
.home-grid .bigbloc.is-sos .pm-fili [stroke]{stroke:#F27B52}
.home-grid .bigbloc.is-sos .pm-fili circle[fill]{fill:#F27B52}
.home-grid .bigbloc.is-sos .pm-fili{opacity:.14}
/* « Je suis dispo » actif : un lime adouci (moins saturé, moins lumineux) */
.home-grid .bigbloc.on{background:linear-gradient(160deg,#B6D869,#A2C557)!important;background-image:linear-gradient(160deg,#B6D869,#A2C557)!important;border-color:rgba(255,255,255,.22)!important;box-shadow:0 6px 14px rgba(140,180,70,.14),inset 0 1px 0 rgba(255,255,255,.3)!important}
.home-grid .bigbloc.on .bb-txt small{color:rgba(22,33,14,.74)}
/* Dessin de terrain des blocs : un vert doux bien reconnaissable (Match SOS reste corail) */
.home-grid .bigbloc:not(.is-sos):not(.on) .pm-fili{opacity:.17}
.home-grid .bigbloc:not(.is-sos):not(.on) .pm-fili [stroke]{stroke:#6FCF9B}
.home-grid .bigbloc:not(.is-sos):not(.on) .pm-fili circle[fill]{fill:#6FCF9B}
.home-grid .bigbloc.on .pm-fili{filter:none;opacity:.22}
.home-grid .bigbloc.on .pm-fili [stroke]{stroke:#3F7A3C}
.home-grid .bigbloc.on .pm-fili circle[fill]{fill:#3F7A3C}
/* « Je suis dispo » actif : un lime un peu plus présent que la version adoucie, sans revenir au lime vif */
.home-grid .bigbloc.on{background:linear-gradient(160deg,#C2E75C,#A9D447)!important;background-image:linear-gradient(160deg,#C2E75C,#A9D447)!important;box-shadow:0 7px 16px rgba(160,205,60,.2),inset 0 1px 0 rgba(255,255,255,.35)!important}
/* Dessin de terrain des blocs : le vert de la référence (jaune-vert doux), trait médian aussi long à gauche qu'à droite */
.home-grid .bigbloc:not(.is-sos):not(.on) .pm-fili{opacity:.26}
.home-grid .bigbloc:not(.is-sos):not(.on) .pm-fili [stroke]{stroke:#8CC45F}
.home-grid .bigbloc:not(.is-sos):not(.on) .pm-fili circle[fill]{fill:#8CC45F}
.home-grid .bigbloc.on .pm-fili{opacity:.32}
.home-grid .bigbloc.on .pm-fili [stroke]{stroke:#6F9B2A}
.home-grid .bigbloc.on .pm-fili circle[fill]{fill:#6F9B2A}
/* Dessin de terrain des blocs : vert plus discret */
.home-grid .bigbloc:not(.is-sos):not(.on) .pm-fili{opacity:.15}
.home-grid .bigbloc.on .pm-fili{opacity:.2}
/* « Trouver un match » : disque translucide plein et chevron blanc, sans contour */
.find-bar .fb-go svg{width:42px;height:42px}
/* Anneau du prochain match : plus grand, texte recalibré — « 15 min » (et toute valeur à 2 chiffres) tient sans toucher l'anneau */
.pm-ring{top:14px;right:16px;width:80px;height:80px}
.pm-ring circle{stroke-width:5}
.rg-tx small{font-size:9.5px;letter-spacing:.12em}
.rg-tx b{font-size:17px;gap:1px;letter-spacing:-.03em}
.rg-tx b em{font-size:10px;letter-spacing:0}
.rg-tx b.enc{font-size:12px}
/* « Trouver un match » : petit rond translucide à fin contour et chevron fin, dans le thème des coches de « Créer un match » */
.find-bar .fb-go svg{width:34px;height:34px}

/* ---- Trait blanc en dégradé sous l'en-tête (nom + icônes) : de retour sur tous les onglets ---- */
.hsep,.topbar::after{display:block!important;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.22) 50%,transparent 100%)!important}
.flow .topbar::after{display:none!important}




/* ---- Pastilles de formats et de postes (fiches joueur) : police inchangée, bloc plus compact ---- */
.chips.chips-s{gap:6px!important}
.chips.chips-s .chip{padding:3px 11px!important;font-size:13.5px!important;font-weight:600;line-height:1.3}

/* ---- « C » du capitaine : centré optiquement dans son cercle (la lettre était 0,4 px trop basse) ---- */
.cap-c{box-sizing:border-box;padding-bottom:1px}

/* ---- Croix « retirer un joueur » (Gérer l'équipe) : plus discrète, elle ne prend plus de place ---- */
.list-row .icon-btn[data-act="retirerMembreSheet"]{width:30px!important;height:30px!important;min-width:0!important;margin-right:-6px;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;color:rgba(245,246,238,.4)!important}
.list-row .icon-btn[data-act="retirerMembreSheet"] svg{width:14px!important;height:14px!important}

/* ===== Explorer : le filigrane en demi-cercles des 4 blocs de l'accueil, repris à l'identique sur les cartes ===== */
.catcard{position:relative;overflow:hidden}
.catcard > *:not(.pm-fili){position:relative;z-index:1}
.catcard .pm-fili{position:absolute;z-index:0;right:19.5%;top:79%;width:113%;height:auto;aspect-ratio:1/1;transform:translate(50%,-50%);opacity:.15;pointer-events:none}
.catcard .pm-fili [stroke]{stroke:#8CC45F}
.catcard .pm-fili circle[fill]{fill:#8CC45F}
.catcard.sos .pm-fili [stroke]{stroke:#F27B52}
.catcard.sos .pm-fili circle[fill]{fill:#F27B52}

/* ===== Fond de l'app : une couche unique, DERRIÈRE tous les écrans et tous les boutons =====
   Lueurs douces + petits points en haut à gauche et en bas à droite. Portée par l'app elle-même (pas par chaque écran) : rien ne passe au-dessus d'un bouton. */
.screen{background:transparent!important}
.app{isolation:isolate}
.app::before,.app::after{content:""!important;display:block!important;position:absolute;left:0;top:0;right:0;bottom:0;width:auto;height:auto;border-radius:0;pointer-events:none;z-index:-1}
.app::before{background:radial-gradient(380px 420px at 0% 100%,rgba(196,222,62,.06),rgba(196,222,62,0) 70%)}
.app::after{background-image:radial-gradient(circle,rgba(176,232,140,.6) 0,rgba(176,232,140,.6) 1px,rgba(176,232,140,0) 1.7px);background-size:15px 15px;
  -webkit-mask-image:radial-gradient(230px 230px at 100% 100%,#000 0,rgba(0,0,0,0) 100%);
  mask-image:radial-gradient(230px 230px at 100% 100%,#000 0,rgba(0,0,0,0) 100%)}

/* ===== Les boutons et les cartes passent devant : un fond plein sous leur effet verre, le motif de fond reste derrière ===== */
.card,.card-ink,.list,.tile,.catcard,.mini,.post,.fmt-card,.flat-tile,.stat,.next-strip,.bigbloc,.minibloc,.find-bar,.opt,.dchip,.chip,.input,.searchbar,.wheel-wrap,.seg,.tr-act,.wel-step,.opp-bar,.card-row,.sosm-card,.tcard,.vrow,.flux-row{background-color:#243A36}
.flow .chip,.flow .opt,.flow .fmt-card,.flow .input,.flow .card-ink,.flow .vf-note,.flow .icon-btn,.flow .icon-btn.plain{background-color:#243A36}
.hh .icon-btn,.topbar .icon-btn:not([data-back]),.home-top .icon-btn{background:#364B46!important}
/* points un peu plus discrets */
.app::after{opacity:.65}

/* Bandeau au-dessus du bouton d'action : rétabli comme avant (dégradé qui sépare le bouton du contenu) */
/* un seul vert en haut de l'écran : même teinte que la barre système et que le fond, sans lueur qui crée une coupure */
html,body,.device,.app{background-color:#243A36!important}

/* ===== Conseil d'installation (accueil) ===== */
.inst-card{margin:0 0 14px;padding:16px 16px 14px;border-radius:26px;background:linear-gradient(180deg,#2B4741,#21382F);border:1px solid rgba(198,255,64,.3);color:#F5F6EE}
.inst-card b{display:block;font-size:16px;font-weight:800;letter-spacing:-.01em;margin-bottom:4px}
.inst-card p{margin:0 0 10px;font-size:13.5px;line-height:1.45;color:#C9D3CE}
.inst-et{margin:0 0 12px;padding:0;list-style:none}
.inst-et li{display:flex;gap:10px;align-items:center;margin:0 0 7px;font-size:13.5px}
.inst-et i{flex:none;width:22px;height:22px;border-radius:50%;background:#C6FF40;color:#16210E;display:grid;place-items:center;font:800 12px/1 system-ui;font-style:normal}
.inst-btn{display:flex;gap:10px;justify-content:flex-end}