/* Teebox — interface façon réseau social : fil d'images, stories, profils. Mobile d'abord, colonne latérale sur ordinateur. */
:root{
  --bg:#ffffff; --fg:#0f2318; --muted:#71857a; --line:#e8efeb; --soft:#f4f8f6; --mint:#e7f4ec;
  --g:#0d5c3b; --g2:#2f8f5b; --flag:#e9b824; --flag-bg:#fff5d6; --ink:#0b1a12; --red:#e0473a; --amber:#b07800; --amber-bg:#fff3d1;
  --ring:conic-gradient(from 210deg,#e9b824,#2f8f5b,#0d5c3b,#9fd8b5,#e9b824);
  --font:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --card:#ffffff; --glass:rgba(255,255,255,.92); --ok-bg:#e1f3e8; --ok-fg:#1d6a43; --danger-bg:#fff4f2; --danger-line:#f3c4be; --shadow:rgba(13,60,40,.45);
  --side:244px; --feed:560px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0c1511; --fg:#e4eee8; --muted:#90a699; --line:#22332a; --soft:#15221b; --mint:#18352a; --card:#121d17; --glass:rgba(12,21,17,.9);
  --flag-bg:#3a2f0f; --amber-bg:#3a2d0e; --amber:#f0c75a; --ink:#2c4437; --ok-bg:#163828; --ok-fg:#7fd1a2; --danger-bg:#3a1814; --danger-line:#5e2a24; --g:#22744b; --shadow:rgba(0,0,0,.6);
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0c1511; --fg:#e4eee8; --muted:#90a699; --line:#22332a; --soft:#15221b; --mint:#18352a; --card:#121d17; --glass:rgba(12,21,17,.9);
  --flag-bg:#3a2f0f; --amber-bg:#3a2d0e; --amber:#f0c75a; --ink:#2c4437; --ok-bg:#163828; --ok-fg:#7fd1a2; --danger-bg:#3a1814; --danger-line:#5e2a24; --g:#22744b; --shadow:rgba(0,0,0,.6);
  color-scheme:dark}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--fg);transition:background .3s,color .3s;font-family:var(--font);font-size:15px;line-height:1.45}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--g2);outline-offset:2px;border-radius:8px}
h1,h2,h3,h4{margin:0;letter-spacing:-.02em;text-wrap:balance}
img,svg{display:block;max-width:100%}
.boot{height:100vh;display:grid;place-items:center;animation:breathe 1.2s ease-in-out infinite alternate}
@keyframes breathe{to{transform:scale(1.08)}}
[hidden]{display:none!important}

/* ---------- boutons & champs ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;background:var(--g);color:#fff;font-weight:700;padding:12px 20px;font-size:14.5px;transition:transform .15s var(--ease),box-shadow .2s,background .2s;white-space:nowrap}
.btn:active{transform:scale(.96)}
.btn:hover{box-shadow:0 10px 22px -12px rgba(13,92,59,.7)}
.btn.block{width:100%;padding:15px}
.btn.soft{background:var(--mint);color:var(--g)}
.btn.ghost{background:transparent;color:var(--fg);border:1.5px solid var(--line)}
.btn.dark{background:var(--ink)}
.btn.sm{padding:8px 14px;font-size:13px}
.btn[disabled]{opacity:.55;pointer-events:none}
.field{display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:16px;padding:12px 14px;background:var(--card);transition:border-color .2s,box-shadow .2s;color:var(--muted)}
.field:focus-within{border-color:var(--g2);box-shadow:0 0 0 4px var(--mint);color:var(--g2)}
.field input,.field select,.field textarea{border:0;outline:0;background:transparent;flex:1;min-width:0;color:var(--fg)}
.field textarea{resize:vertical;min-height:70px}
.lbl{display:block;font-size:12px;font-weight:700;color:var(--muted);margin:0 0 6px 4px}
.seg{display:flex;background:var(--soft);border-radius:999px;padding:4px;gap:2px}
.seg button{flex:1;border-radius:999px;padding:9px 10px;font-size:13px;font-weight:600;color:var(--muted);transition:background .25s var(--ease),color .25s;white-space:nowrap}
.seg button.on{background:var(--g);color:#fff;box-shadow:0 4px 12px -4px rgba(13,92,59,.5)}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:1.5px solid var(--line);border-radius:999px;padding:7px 14px;font-weight:600;font-size:13px;background:var(--card);transition:all .2s var(--ease)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700;white-space:nowrap;background:var(--soft);color:var(--muted)}
.pill.ok{background:var(--ok-bg);color:var(--ok-fg)}
.pill.wait{background:var(--amber-bg);color:var(--amber)}
.pill.promo{background:var(--flag-bg);color:#6f5000}
.muted{color:var(--muted)}
.err{color:var(--red);font-size:13px;font-weight:600;min-height:18px}

/* ---------- connexion ---------- */
.auth{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
.auth-art{position:relative;overflow:hidden;background:var(--g)}
.auth-art svg{position:absolute;inset:0;width:100%;height:100%}
.auth-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,30,18,0) 30%,rgba(5,30,18,.72) 100%)}
.auth-art .claim{z-index:1}
.auth-art .claim{position:absolute;left:48px;right:48px;bottom:56px;color:#fff;display:grid;gap:12px}
.auth-art h1{font-size:clamp(30px,3.6vw,48px);font-weight:800;line-height:1.05;letter-spacing:-.035em;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.auth-art p{margin:0;font-size:17px;opacity:.92;max-width:40ch}
.auth-form{display:grid;place-items:center;padding:40px 24px}
.auth-card{width:100%;max-width:380px;display:grid;gap:14px}
.wordmark{display:flex;align-items:center;gap:10px;font-weight:800;font-size:30px;letter-spacing:-.04em;color:var(--g)}
.auth-card h2{font-size:26px;font-weight:800;margin-top:10px}
.auth-card .sub{margin:-6px 0 4px;color:var(--muted)}
.demo{border:1.5px dashed var(--line);border-radius:18px;padding:12px 14px;display:grid;gap:8px;background:var(--soft)}
.demo b{font-size:13px}
.demo div{display:flex;gap:8px;flex-wrap:wrap}
.switch{text-align:center;color:var(--muted);font-size:14px}
.switch button{color:var(--g);font-weight:700}
@media (max-width:820px){.auth{grid-template-columns:1fr}.auth-art{height:300px}.auth-art .claim{left:22px;right:22px;bottom:24px}.auth-form{padding:26px 20px 40px}}

/* ---------- coquille ---------- */
.shell{min-height:100vh}
.side{position:fixed;left:0;top:0;bottom:0;width:var(--side);border-right:1px solid var(--line);padding:26px 14px;display:flex;flex-direction:column;gap:4px;background:var(--card);z-index:30}
.side .wordmark{font-size:26px;padding:0 12px 22px}
.nav-a{display:flex;align-items:center;gap:14px;padding:12px;border-radius:14px;font-weight:600;font-size:15px;transition:background .2s}
.nav-a:hover{background:var(--soft)}
.nav-a svg{transition:transform .2s var(--ease)}
.nav-a:hover svg{transform:scale(1.08)}
.nav-a.on{font-weight:800}
.nav-a.on svg{stroke-width:2.6}
.nav-a .dot{margin-left:auto;background:var(--amber);color:#fff;border-radius:999px;font-size:11px;font-weight:800;padding:1px 7px}
.side .me-a{margin-top:auto}
.main{margin-left:var(--side);min-height:100vh}
.topbar,.bottombar{display:none}
.av{width:36px;height:36px;border-radius:50%;flex:none;overflow:hidden;display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff;background:linear-gradient(135deg,#2f8f5b,#0d5c3b)}
.av svg{width:100%;height:100%}

@media (max-width:900px){
  .side{display:none}
  .main{margin-left:0;padding-bottom:calc(74px + env(safe-area-inset-bottom,0px))}
  .topbar{display:flex;position:sticky;top:0;z-index:30;align-items:center;justify-content:space-between;gap:10px;padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;background:var(--glass);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
  .topbar .wordmark{font-size:23px}
  .topbar .ic-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;position:relative}
  .topbar .ic-btn .dot{position:absolute;top:6px;right:6px;width:9px;height:9px;border-radius:50%;background:var(--red);border:2px solid var(--bg)}
  .bottombar{display:grid;grid-template-columns:repeat(5,1fr);align-items:center;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--glass);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:6px 6px calc(8px + env(safe-area-inset-bottom,0px))}
  .bottombar a{display:grid;justify-items:center;gap:2px;font-size:10.5px;font-weight:600;color:var(--muted);padding:4px 0}
  .bottombar a.on{color:var(--fg)}
  .bottombar a.on svg{stroke-width:2.6}
  .bottombar .fab{width:56px;height:56px;border-radius:50%;background:var(--g);color:#fff;place-items:center;margin:-30px auto 0;box-shadow:0 10px 22px -6px rgba(13,92,59,.6);border:4px solid var(--bg);display:grid;transition:transform .2s var(--ease)}
  .bottombar .fab:active{transform:scale(.92)}
}

/* ---------- mise en page fil + colonne droite ---------- */
.home{display:grid;grid-template-columns:minmax(0,var(--feed)) 300px;gap:56px;justify-content:center;padding:26px 24px 60px}
.rail{position:sticky;top:26px;align-self:start;display:grid;gap:18px;padding-top:6px}
.rail .me-row{display:flex;align-items:center;gap:12px}
.rail h5{margin:0;font-size:13px;color:var(--muted);font-weight:700;display:flex;justify-content:space-between}
.sugg{display:flex;align-items:center;gap:12px}
.sugg div{flex:1;min-width:0}
.sugg b,.sugg small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sugg small{color:var(--muted);font-size:12px}
.link{color:var(--g2);font-weight:700;font-size:13px}
.rail .foot{font-size:11.5px;color:#a7b6ad}
@media (max-width:1180px){.home{grid-template-columns:minmax(0,var(--feed))}.rail{display:none}}
@media (max-width:900px){.home{padding:0 0 30px}}

/* ---------- stories ---------- */
.stories{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;padding:6px 2px 14px}
.stories::-webkit-scrollbar{display:none}
.story{flex:none;width:74px;display:grid;justify-items:center;gap:6px;font-size:11.5px;font-weight:600}
.story .ring{width:70px;height:70px;border-radius:50%;padding:3px;background:var(--ring);transition:transform .2s var(--ease)}
.story.seen .ring{background:var(--line)}
.story:active .ring{transform:scale(.94)}
.story .ring>div{width:100%;height:100%;border-radius:50%;border:3px solid var(--bg);overflow:hidden;background:var(--card)}
.story .ring svg{width:100%;height:100%}
.story span{width:74px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:900px){.stories{padding:12px 14px 12px;border-bottom:1px solid var(--line)}}

.feed-tools{display:grid;gap:10px;margin-bottom:8px}
.search{display:flex;align-items:center;gap:10px;background:var(--soft);border-radius:14px;padding:10px 14px;color:var(--muted)}
.search input{border:0;outline:0;background:transparent;flex:1;min-width:0;color:var(--fg)}
@media (max-width:900px){.feed-tools{padding:10px 14px 4px}}

/* ---------- publication ---------- */
.post{border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:18px;animation:rise .5s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
.post-h{display:flex;align-items:center;gap:10px;padding:8px 2px 10px}
.post-h .who{flex:1;min-width:0;line-height:1.25}
.post-h b{font-size:14px}
.post-h small{display:block;color:var(--muted);font-size:12px}
.post-h .follow{color:var(--g2);font-weight:800;font-size:13px}
.media{position:relative;aspect-ratio:4/5;border-radius:10px;overflow:hidden;background:var(--soft);cursor:pointer;user-select:none}
.media svg.art{width:100%;height:100%}
.media .date{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.95);border-radius:16px;padding:7px 12px;text-align:center;line-height:1.05;color:var(--g);font-weight:800;font-size:11px;box-shadow:0 6px 16px -8px rgba(0,0,0,.35)}
.media .date b{display:block;font-size:24px;letter-spacing:-.03em}
.media .tag{position:absolute;top:14px;right:14px}
.media .over{position:absolute;left:0;right:0;bottom:0;padding:60px 18px 18px;background:linear-gradient(180deg,transparent,rgba(5,25,15,.72));color:#fff}
.media .over h3{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.media .over p{margin:4px 0 0;font-size:13.5px;opacity:.9}
.big-heart{position:absolute;left:50%;top:50%;width:110px;height:110px;margin:-55px 0 0 -55px;color:#fff;opacity:0;pointer-events:none;filter:drop-shadow(0 6px 20px rgba(0,0,0,.35))}
.big-heart.go{animation:heart .9s var(--ease)}
@keyframes heart{0%{opacity:0;transform:scale(.2)}15%{opacity:1;transform:scale(1.15)}30%{transform:scale(.95)}45%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:scale(1.1) translateY(-30px)}}
.actions{display:flex;align-items:center;gap:6px;padding:10px 0 4px}
.icon-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;transition:transform .15s var(--ease)}
.icon-btn:active{transform:scale(.85)}
.icon-btn.liked{color:var(--red)}
.icon-btn.liked svg path{fill:currentColor}
.icon-btn.pop{animation:pop .35s var(--ease)}
@keyframes pop{50%{transform:scale(1.3)}}
.actions .btn{margin-left:auto}
.likes{font-weight:700;font-size:14px;padding:2px 4px}
.caption{font-size:14px;padding:2px 4px}
.caption b{font-weight:800}
.meta{display:flex;gap:6px;flex-wrap:wrap;padding:8px 4px 0}
.meta span{background:var(--soft);border-radius:8px;padding:3px 9px;font-size:12px;font-weight:600;color:var(--muted)}
.meta .hot{background:var(--mint);color:var(--g)}
.meta .full{background:var(--amber-bg);color:var(--amber)}
.price{font-weight:800;font-variant-numeric:tabular-nums}
.price s{color:var(--muted);font-weight:500;margin-right:4px;font-size:.88em}
@media (max-width:900px){.post{margin-bottom:6px}.post-h{padding:8px 14px 10px}.media{border-radius:0}.actions{padding:8px 10px 2px}.likes,.caption,.meta{padding-left:14px;padding-right:14px}}
.empty{display:grid;justify-items:center;gap:10px;text-align:center;padding:50px 24px;color:var(--muted)}
.empty b{color:var(--fg);font-size:17px}
.empty .ill{width:120px;height:120px;border-radius:50%;background:var(--mint);display:grid;place-items:center;color:var(--g2)}

/* ---------- story plein écran ---------- */
.sv{position:fixed;inset:0;z-index:100;background:#08120d;display:grid;place-items:center;animation:fadein .25s}
@keyframes fadein{from{opacity:0}}
.sv-frame{position:relative;width:min(440px,100vw);height:min(780px,100vh);border-radius:16px;overflow:hidden;background:#000}
@media (max-width:500px){.sv-frame{border-radius:0;height:100vh}}
.sv-frame svg.art{position:absolute;inset:0;width:100%;height:100%}
.sv-bars{position:absolute;top:12px;left:12px;right:12px;display:flex;gap:4px;z-index:3}
.sv-bars i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.35);overflow:hidden}
.sv-bars i b{display:block;height:100%;width:0;background:var(--card)}
.sv-h{position:absolute;top:26px;left:14px;right:14px;display:flex;align-items:center;gap:10px;color:#fff;z-index:3;font-size:14px}
.sv-h .av{width:34px;height:34px;border:2px solid #fff}
.sv-h button{margin-left:auto;color:#fff;width:36px;height:36px;display:grid;place-items:center}
.sv-body{position:absolute;left:0;right:0;bottom:0;padding:90px 22px 26px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.75));color:#fff;z-index:3;display:grid;gap:10px}
.sv-body h3{font-size:30px;font-weight:800;line-height:1.08;letter-spacing:-.03em}
.sv-body .btn{background:var(--card);color:var(--g)}
.sv-tap{position:absolute;top:80px;bottom:150px;width:40%;z-index:2}
.sv-tap.l{left:0}.sv-tap.r{right:0}

/* ---------- carte ---------- */
.mapview{position:relative;height:100vh}
#map{position:absolute;inset:0;z-index:1}
@media (max-width:900px){.mapview{height:calc(100vh - 64px - 74px)}}
.map-top{position:absolute;top:16px;left:16px;right:16px;z-index:5;display:grid;gap:10px;max-width:640px}
.map-top .search{background:var(--card);box-shadow:0 10px 26px -12px rgba(13,60,40,.45)}
.map-top .chip{box-shadow:0 6px 14px -8px rgba(13,60,40,.4)}
.mk{background:var(--card);color:var(--g);font-weight:800;font-size:13px;border-radius:999px;padding:6px 12px;box-shadow:0 6px 16px rgba(13,60,40,.3);white-space:nowrap;transform:translate(-50%,-100%);display:inline-block;transition:transform .2s var(--ease),background .2s,color .2s;font-family:var(--font)}
.mk.on{background:var(--g);color:#fff;transform:translate(-50%,-100%) scale(1.15)}
.leaflet-div-icon{background:none;border:0}
.map-card{position:absolute;left:16px;right:16px;bottom:22px;z-index:5;max-width:460px;background:var(--card);border-radius:24px;padding:12px;display:flex;gap:14px;align-items:center;box-shadow:0 24px 50px -20px rgba(13,60,40,.55);animation:up .35s var(--ease)}
@keyframes up{from{transform:translateY(30px);opacity:0}}
.map-card .th{width:86px;height:86px;border-radius:16px;overflow:hidden;flex:none}
.map-card .th svg{width:100%;height:100%}
.map-card div.i{flex:1;min-width:0;display:grid;gap:3px}
.map-card small{color:var(--muted);font-size:12.5px}
.locate{position:absolute;right:16px;bottom:140px;z-index:5;width:48px;height:48px;border-radius:50%;background:var(--card);display:grid;place-items:center;box-shadow:0 8px 20px -8px rgba(13,60,40,.5);color:var(--g)}

/* ---------- fiche compétition ---------- */
.detail{max-width:980px;margin:0 auto;padding:28px 24px 60px;display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
.detail .media{cursor:default;border-radius:22px;position:sticky;top:24px}
.back{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--muted);font-size:14px;margin-bottom:6px}
.d-info{display:grid;gap:18px}
.d-info h1{font-size:34px;font-weight:800;letter-spacing:-.035em;line-height:1.05}
.golf-line{display:flex;align-items:center;gap:10px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.facts div{background:var(--soft);border-radius:18px;padding:12px;text-align:center}
.facts b{display:block;font-size:15px}
.facts small{color:var(--muted);font-size:11.5px}
.lic{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--soft);border-radius:18px;padding:12px 16px}
.paybar{display:flex;align-items:center;gap:16px;border-top:1px solid var(--line);padding-top:16px}
.paybar .p{display:grid;line-height:1.15}
.paybar .p b{font-size:26px;font-weight:800}
.paybar .btn{flex:1;padding:16px}
.state-box{border-radius:22px;padding:16px 18px;background:var(--mint);display:grid;gap:8px}
@media (max-width:900px){
  .detail{grid-template-columns:1fr;padding:0 0 120px;gap:0}
  .detail .media{position:relative;top:0;border-radius:0;aspect-ratio:1/1}
  .d-info{padding:20px 18px}
  .d-info h1{font-size:28px}
  .back{position:absolute;top:14px;left:14px;z-index:3;background:rgba(255,255,255,.95);border-radius:999px;padding:8px 14px;color:var(--fg)}
  .paybar{position:fixed;left:0;right:0;bottom:calc(66px + env(safe-area-inset-bottom,0px));background:var(--card);padding:12px 16px;z-index:35;box-shadow:0 -10px 30px -20px rgba(0,0,0,.3)}
}

/* ---------- flux animés (chargement / réussite) ---------- */
.flow{position:fixed;inset:0;z-index:200;background:var(--card);display:grid;place-items:center;align-content:center;gap:16px;text-align:center;padding:30px;animation:fadein .25s}
.flow h3{font-size:24px;font-weight:800}
.scene{width:260px;height:120px;position:relative}
.scene .ground{position:absolute;left:0;right:0;bottom:24px;height:6px;border-radius:6px;background:#cfe8d9}
.scene .cup{position:absolute;right:28px;bottom:22px;width:24px;height:9px;border-radius:50%;background:#0b3b26}
.scene .pin{position:absolute;right:39px;bottom:28px;width:3px;height:74px;background:var(--fg);border-radius:2px}
.scene .pin::after{content:"";position:absolute;left:3px;top:0;border-left:28px solid var(--flag);border-top:10px solid transparent;border-bottom:10px solid transparent;transform-origin:left;animation:wave 1s ease-in-out infinite alternate}
@keyframes wave{to{transform:scaleX(.8) skewY(4deg)}}
.scene .ball{position:absolute;left:8px;bottom:30px;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff 0 40%,#dfe9e3 100%);box-shadow:0 2px 5px rgba(0,0,0,.18);animation:roll 1.4s var(--ease) infinite}
@keyframes roll{0%{transform:translateX(0) rotate(0)}70%{transform:translateX(196px) rotate(560deg);opacity:1}85%{transform:translate(202px,9px) scale(.7);opacity:0}100%{opacity:0}}
.dots{display:flex;gap:6px;justify-content:center}
.dots i{width:8px;height:8px;border-radius:50%;background:var(--g2);animation:dot 1s infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{50%{transform:translateY(-6px);opacity:.4}}
.check{width:110px;height:110px;border-radius:50%;background:var(--g2);display:grid;place-items:center;position:relative;animation:popin .6s var(--ease) both}
@keyframes popin{0%{transform:scale(0)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
.check path{stroke-dasharray:30;stroke-dashoffset:30;animation:draw .4s ease-out .35s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.rays{position:absolute;inset:-30px}
.rays i{position:absolute;left:50%;top:50%;width:5px;height:14px;border-radius:4px;background:var(--flag);opacity:0;animation:ray .7s ease-out .3s forwards}
@keyframes ray{0%{opacity:0;transform:rotate(var(--r)) translateY(-46px)}40%{opacity:1}100%{opacity:0;transform:rotate(var(--r)) translateY(-78px)}}

/* ---------- pages en colonne ---------- */
.page{max-width:820px;margin:0 auto;padding:30px 24px 60px;display:grid;gap:20px;align-content:start}
.page-h{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap}
.page-h h1{font-size:30px;font-weight:800;letter-spacing:-.035em}
.page-h small{color:var(--muted);font-weight:600}
@media (max-width:900px){.page{padding:18px 16px 40px}.page-h h1{font-size:26px}}
.mycard{display:grid;grid-template-columns:150px 1fr;gap:16px;border:1px solid var(--line);border-radius:24px;padding:10px;animation:rise .5s var(--ease) both}
.mycard .th{border-radius:16px;overflow:hidden;aspect-ratio:1/1}
.mycard .th svg{width:100%;height:100%}
.mycard .i{display:grid;gap:8px;align-content:start;padding:6px 6px 4px 0;min-width:0}
.mycard h3{font-size:18px;font-weight:800}
.track{display:grid;grid-template-columns:repeat(4,1fr);position:relative;margin:6px 0 2px}
.track::before{content:"";position:absolute;top:10px;left:12.5%;right:12.5%;height:3px;background:var(--line);border-radius:3px}
.track .fill{position:absolute;top:10px;left:12.5%;height:3px;background:var(--g2);border-radius:3px;width:0;transition:width 1.2s var(--ease)}
.tstep{display:grid;justify-items:center;gap:5px;font-size:11px;color:var(--muted);text-align:center;position:relative}
.tstep i{width:22px;height:22px;border-radius:50%;background:var(--card);border:3px solid var(--line)}
.tstep.done i{background:var(--g2);border-color:var(--g2)}
.tstep.now i{border-color:var(--g2);animation:pulse 1.6s infinite}
.tstep.done,.tstep.now{color:var(--fg);font-weight:600}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(47,143,91,.45)}70%{box-shadow:0 0 0 10px rgba(47,143,91,0)}}
@media (max-width:600px){.mycard{grid-template-columns:96px 1fr}.mycard .row-end{flex-wrap:wrap}}
.row-end{display:flex;justify-content:space-between;align-items:center;gap:10px}

/* ---------- profils (joueur & golf) ---------- */
.profile-h{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;padding:6px 0 10px}
.profile-h .big-av{width:150px;height:150px;border-radius:50%;padding:4px;background:var(--ring)}
.profile-h .big-av>div{width:100%;height:100%;border-radius:50%;border:4px solid var(--bg);overflow:hidden;display:grid;place-items:center;font-size:48px;font-weight:800;color:#fff;background:linear-gradient(135deg,#2f8f5b,#0d5c3b)}
.profile-h .big-av svg{width:100%;height:100%}
.ph-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ph-top h1{font-size:24px;font-weight:800}
.stats{display:flex;gap:26px;margin:14px 0 10px;font-size:15px}
.stats b{font-weight:800;font-variant-numeric:tabular-nums}
.bio{font-size:14.5px;max-width:52ch}
.ptabs{display:flex;justify-content:center;gap:40px;border-top:1px solid var(--line);font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ptabs button{padding:14px 0;border-top:2px solid transparent;margin-top:-1px;display:flex;gap:6px;align-items:center}
.ptabs button.on{color:var(--fg);border-color:var(--fg)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.tile{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:4px;cursor:pointer}
.tile svg{width:100%;height:100%;transition:transform .4s var(--ease)}
.tile:hover svg{transform:scale(1.05)}
.tile .t{position:absolute;inset:auto 0 0 0;padding:30px 10px 10px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.6));color:#fff;font-size:12.5px;font-weight:700;line-height:1.2}
.tile .t small{display:block;font-weight:500;opacity:.85}
.tile.past{filter:grayscale(.7);opacity:.7}
@media (max-width:640px){.profile-h{grid-template-columns:auto 1fr;gap:18px}.profile-h .big-av{width:88px;height:88px}.profile-h .big-av>div{font-size:30px;border-width:3px}.stats{gap:16px;font-size:13.5px}.ph-top h1{font-size:20px}}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-grid .full{grid-column:1/-1}
@media (max-width:600px){.form-grid{grid-template-columns:1fr}}
.card{border:1px solid var(--line);border-radius:24px;padding:20px;display:grid;gap:14px}
.card h3{font-size:17px;font-weight:800}

/* ---------- espace golf ---------- */
.hero-card{border-radius:30px;padding:30px;background:linear-gradient(135deg,#0d5c3b 0%,#2f8f5b 100%);color:#fff;position:relative;overflow:hidden;display:grid;gap:12px}
.hero-card h2{font-size:28px;font-weight:800;max-width:20ch;line-height:1.12}
.hero-card p{margin:0;opacity:.88;max-width:44ch}
.hero-card .btn{background:var(--card);color:var(--g);justify-self:start}
.hero-card img{position:absolute;right:-30px;bottom:-40px;width:220px;opacity:.15}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.kpi{border-radius:22px;padding:18px;background:var(--soft)}
.kpi b{display:block;font-size:30px;font-weight:800;color:var(--g);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.kpi span{color:var(--muted);font-size:13px}
.kpi.warn{background:var(--amber-bg)}.kpi.warn b{color:var(--amber)}
@media (max-width:600px){.kpis{gap:8px}.kpi{padding:14px 10px}.kpi b{font-size:24px}.kpi span{font-size:11.5px}}
.crow{display:grid;grid-template-columns:72px 1fr auto;gap:14px;align-items:center;border:1px solid var(--line);border-radius:22px;padding:10px 14px 10px 10px;transition:transform .2s var(--ease),box-shadow .2s;cursor:pointer}
.crow:hover{transform:translateY(-2px);box-shadow:0 16px 30px -22px rgba(13,60,40,.5)}
.crow .th{width:72px;height:72px;border-radius:16px;overflow:hidden}
.crow .th svg{width:100%;height:100%}
.crow .i{display:grid;gap:6px;min-width:0}
.bar{height:7px;border-radius:7px;background:var(--soft);overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,#2f8f5b,#0d5c3b);border-radius:7px;width:0;transition:width 1.2s var(--ease)}
.person{display:grid;grid-template-columns:auto 1fr auto auto;gap:14px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:20px;transition:background .3s}
.person.flash{background:var(--ok-bg)}
.person small{display:block;color:var(--muted);font-size:12.5px}
.person .num{font-variant-numeric:tabular-nums;font-size:13px;color:var(--muted)}
@media (max-width:600px){.person{grid-template-columns:auto 1fr auto}.person .num{display:none}}
.create{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:start}
.create .preview{position:sticky;top:24px;display:grid;gap:10px}
.create .preview .lbl{margin:0}
@media (max-width:960px){.create{grid-template-columns:1fr}.create .preview{position:static}}

/* ---------- toast ---------- */
#toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--ink);color:#fff;border-radius:999px;padding:12px 20px;font-weight:600;font-size:14px;opacity:0;pointer-events:none;transition:all .3s var(--ease);z-index:300;max-width:calc(100vw - 32px);text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}
@media (min-width:901px){#toast{bottom:30px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ================= SÉCURITÉ & ADMIN (repris de JUNNA) ================= */
#topbar-load{position:fixed;top:0;left:0;right:0;height:3px;z-index:500;pointer-events:none;opacity:0;transition:opacity .2s;overflow:hidden}
#topbar-load.on{opacity:1}
#topbar-load::after{content:"";position:absolute;top:0;bottom:0;width:40%;background:linear-gradient(90deg,transparent,var(--g2),var(--flag),transparent);animation:loadbar 1s ease-in-out infinite}
@keyframes loadbar{from{left:-40%}to{left:100%}}
.maint-band{position:sticky;top:0;z-index:60;background:var(--amber-bg);color:var(--amber);font-weight:700;font-size:13.5px;text-align:center;padding:9px 16px}
.maint-band a{text-decoration:underline}
.maint{min-height:100vh;display:grid;place-items:center;align-content:center;gap:14px;text-align:center;padding:30px}
.maint-ill{width:220px;height:220px;border-radius:50%;overflow:hidden;box-shadow:0 30px 60px -30px rgba(13,60,40,.5)}
.maint-ill svg{width:100%;height:100%}
.maint h1{font-size:28px;font-weight:800}
.maint p{margin:0;color:var(--muted);max-width:40ch}

/* célébration */
.celebration{position:fixed;left:50%;top:calc(18px + env(safe-area-inset-top,0px));z-index:600;transform:translateX(-50%);pointer-events:none;display:flex;align-items:center;gap:12px;padding:9px 20px 9px 9px;border-radius:999px;background:var(--card);box-shadow:0 20px 44px -18px rgba(13,60,40,.55),0 0 0 1px var(--line);animation:cel-in .45s cubic-bezier(.3,1.4,.5,1) both,cel-out .35s 1.4s ease-in forwards;max-width:calc(100vw - 32px)}
.celebration b{display:block;font-size:15px;font-weight:800}
.celebration small{font-size:12.5px;color:var(--muted)}
.cel-coche{position:relative;width:42px;height:42px;display:grid;place-items:center;flex:none}
.cel-coche>span{width:42px;height:42px;border-radius:50%;background:var(--g2);display:grid;place-items:center;transform:scale(0);animation:cel-pop .5s .08s cubic-bezier(.3,1.6,.5,1) forwards}
.cel-coche path{stroke-dasharray:40;stroke-dashoffset:40;animation:draw .3s .38s ease-out forwards}
.cel-coche i{position:absolute;left:calc(50% - 1.5px);top:50%;width:3px;height:8px;border-radius:3px;background:var(--flag);transform-origin:50% 0;opacity:0;animation:cel-ray .5s .35s ease-out forwards}
@keyframes cel-in{from{opacity:0;transform:translate(-50%,-16px) scale(.9)}}
@keyframes cel-out{to{opacity:0;transform:translate(-50%,-10px) scale(.96)}}
@keyframes cel-pop{to{transform:scale(1)}}
@keyframes cel-ray{0%{opacity:0}30%{opacity:1}100%{opacity:0;transform:translateY(32px)}}

/* animation d'ouverture */
.lancement{position:fixed;inset:0;z-index:9999;overflow:hidden;display:grid;place-items:center;background:radial-gradient(circle at 50% 42%,#1d7a52,#0d5c3b 45%,#062e1d 100%);animation:l-sortie .4s 2.6s ease-in forwards;cursor:pointer}
.l-grille{position:absolute;inset:-2px;opacity:0;background-image:linear-gradient(rgba(159,216,181,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(159,216,181,.08) 1px,transparent 1px);background-size:32px 32px;background-position:center;-webkit-mask-image:radial-gradient(circle at 50% 45%,#000 0,transparent 70%);mask-image:radial-gradient(circle at 50% 45%,#000 0,transparent 70%);animation:l-on .4s .05s forwards,l-off .4s 2.1s forwards}
.l-axe{position:absolute;background:rgba(159,216,181,.25)}
.l-axe.h{left:0;right:0;top:45%;height:1px;transform:scaleX(0);animation:l-axh .6s .05s var(--ease) forwards,l-off .3s 1.1s forwards}
.l-axe.v{top:0;bottom:0;left:50%;width:1px;transform:scaleY(0);animation:l-axv .6s .12s var(--ease) forwards,l-off .3s 1.1s forwards}
.l-scene{position:relative;display:flex;flex-direction:column;align-items:center;margin-top:-6vh}
.l-logo{width:128px;height:128px;overflow:visible;transform:translateY(46px);transform-origin:50% 75%;will-change:transform;animation:l-monte .45s 1.2s var(--ease) forwards,l-zoom .6s 2.2s cubic-bezier(.7,0,.84,0) forwards}
.l-trait circle,.l-trait ellipse,.l-trait path{stroke-dasharray:1;stroke-dashoffset:1}
.l-trait .t1{animation:l-trace .6s .15s ease-out forwards}.l-trait .t2{animation:l-trace .4s .4s ease-out forwards}.l-trait .t3{animation:l-trace .4s .55s ease-out forwards}.l-trait .t4{animation:l-trace .35s .7s ease-out forwards}
.l-trait{animation:l-off .25s 1.02s forwards}
.l-plein{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.94);animation:l-plein .35s 1s var(--ease) forwards}
.l-fanion{transform-box:fill-box;transform-origin:left center;transform:scaleX(0);animation:l-fanion .5s 1.15s cubic-bezier(.3,1.6,.5,1) forwards}
.l-nom{display:flex;gap:.02em;margin-top:18px;font:800 36px var(--font);letter-spacing:-.02em;color:#fff;animation:l-off .2s 2.12s forwards}
.l-nom span{display:inline-block;opacity:0;transform:translateY(14px);animation:l-lettre .4s var(--ease) forwards}
.l-slogan{margin-top:8px;color:#9fd8b5;font-size:14px;opacity:0;animation:l-on .35s 1.7s forwards,l-off .2s 2.12s forwards}
.l-eclat{position:absolute;top:-20%;bottom:-20%;width:22%;left:-40%;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),rgba(233,184,36,.16),transparent);transform:skewX(-18deg);animation:l-eclat .7s 1.05s ease-in-out forwards}
@keyframes l-on{to{opacity:1}}@keyframes l-off{to{opacity:0}}@keyframes l-sortie{to{opacity:0;visibility:hidden}}
@keyframes l-axh{to{transform:scaleX(1)}}@keyframes l-axv{to{transform:scaleY(1)}}@keyframes l-trace{to{stroke-dashoffset:0}}
@keyframes l-plein{to{opacity:1;transform:scale(1)}}@keyframes l-fanion{to{transform:scaleX(1)}}@keyframes l-monte{to{transform:translateY(0)}}
@keyframes l-zoom{from{transform:translateY(0) scale(1)}to{transform:translateY(0) scale(80)}}@keyframes l-lettre{to{opacity:1;transform:none}}
@keyframes l-eclat{to{transform:translateX(730%) skewX(-18deg)}}

/* double authentification */
.shield-ill{width:76px;height:76px;border-radius:24px;background:var(--mint);color:var(--g);display:grid;place-items:center;margin-top:8px}
.qr-box{display:flex;gap:16px;align-items:center;border:1.5px solid var(--line);border-radius:20px;padding:14px;flex-wrap:wrap}
.qr-box #qr,.qr-box #qr2{background:var(--card);padding:6px;border-radius:12px}
.qr-box img,.qr-box canvas{display:block}
.secret{display:block;font:700 14px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;background:var(--soft);border-radius:10px;padding:8px 10px;margin-top:6px;word-break:break-all;user-select:all}
.otp{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.otp input{height:58px;border:1.5px solid var(--line);border-radius:16px;text-align:center;font-size:24px;font-weight:800;outline:0;transition:border-color .2s,box-shadow .2s,transform .15s;width:100%}
.otp input:focus{border-color:var(--g2);box-shadow:0 0 0 4px var(--mint)}
.otp.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}

/* verrou Face ID (coins → visage → coche, comme JUNNA) */
.lock{min-height:100vh;display:grid;place-items:center;align-content:center;gap:14px;text-align:center;padding:30px;background:radial-gradient(circle at 50% 30%,var(--mint),var(--bg) 60%)}
.lock h2{font-size:24px;font-weight:800}
.lock p{margin:0}
.lock-face{color:var(--g2)}
.lk-c{stroke-dasharray:240;stroke-dashoffset:240;animation:draw-lk .7s ease-out forwards}
.lk-f{opacity:0;animation:l-on .4s .5s forwards,breathe-f 1.6s 1s ease-in-out infinite alternate}
.lk-ok{stroke-dasharray:60;stroke-dashoffset:60;opacity:0}
.lock.ok .lk-f{animation:l-off .2s forwards}
.lock.ok .lk-ok{opacity:1;animation:draw .4s ease-out forwards}
@keyframes draw-lk{to{stroke-dashoffset:0}}
@keyframes breathe-f{to{opacity:.55}}

/* réglages façon iPhone */
.rg{display:grid;gap:6px}
.rg h4{font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;margin:0 0 0 14px}
.rg-box{background:var(--soft);border-radius:20px;overflow:hidden}
.rg-form{display:grid;gap:10px;padding:14px}
.rg-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line);min-height:54px}
.rg-row:last-child{border-bottom:0}
.rg-row[role=button]{cursor:pointer}
.rg-row[role=button]:hover{background:var(--line)}
.rg-ic{width:30px;height:30px;border-radius:9px;color:#fff;display:grid;place-items:center;flex:none}
.rg-l{flex:1;min-width:0;font-weight:600;font-size:14.5px}
.rg-l small{display:block;font-weight:500;color:var(--muted);font-size:12px}
.rg-r{display:flex;align-items:center;color:var(--muted)}
.rg-foot{margin:0 14px;font-size:12.5px;color:var(--muted)}
.rg-foot code,.rg-foot b{font-size:12px}
.switch-in{appearance:none;-webkit-appearance:none;width:51px;height:31px;border-radius:999px;background:var(--line);position:relative;cursor:pointer;transition:background .25s;flex:none;margin:0}
.switch-in::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:var(--card);box-shadow:0 2px 6px rgba(0,0,0,.2);transition:transform .25s var(--ease)}
.switch-in:checked{background:var(--g2)}
.switch-in:checked::after{transform:translateX(20px)}
.card.danger{border-color:var(--danger-line);background:var(--danger-bg)}

/* aide & messages */
.msg{display:grid;gap:6px}
.bubble{max-width:85%;border-radius:20px;padding:12px 16px;font-size:14.5px;white-space:pre-wrap}
.bubble small{display:block;font-size:11.5px;opacity:.7;margin-top:4px}
.bubble b{display:block;font-size:12.5px;margin-bottom:2px}
.bubble.me{justify-self:end;background:var(--g);color:#fff;border-bottom-right-radius:6px}
.bubble.them{justify-self:start;background:var(--soft);border-bottom-left-radius:6px}
.amsg .bubble.me{justify-self:start;background:var(--soft);color:var(--fg);border-radius:20px 20px 20px 6px}
.amsg .bubble.them{justify-self:end;background:var(--mint);border-radius:20px 20px 6px 20px}
.amsg.new{border-color:var(--mint);box-shadow:0 0 0 4px var(--mint)}
.reply{display:flex;gap:8px}
.reply .field{flex:1;padding:9px 14px}

/* golf en attente */
.pending{display:grid;justify-items:center;gap:14px;text-align:center;padding:30px 0}
.pending-ill{position:relative;width:150px;height:150px}
.pending-ill>svg{width:150px;height:150px;border-radius:50%;overflow:hidden}
.pending-ill span{position:absolute;right:-4px;bottom:-4px;width:52px;height:52px;border-radius:50%;background:var(--amber);color:#fff;display:grid;place-items:center;border:4px solid var(--bg);animation:pulse-a 1.8s infinite}
.pending-ill span.no{background:var(--red);animation:none}
@keyframes pulse-a{0%{box-shadow:0 0 0 0 rgba(176,120,0,.45)}70%{box-shadow:0 0 0 14px rgba(176,120,0,0)}100%{box-shadow:0 0 0 0 rgba(176,120,0,0)}}
.pending h1{font-size:26px;font-weight:800}
.pending p{margin:0;max-width:46ch}
.steps-v{display:grid;gap:8px;width:100%;max-width:360px;text-align:left}
.steps-v div{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:16px;background:var(--soft);color:var(--muted);font-weight:600}
.steps-v .done{background:var(--ok-bg);color:var(--ok-fg)}
.steps-v .now{background:var(--amber-bg);color:var(--amber)}
.steps-v .no{background:var(--danger-bg);color:var(--red)}

/* admin */
.kpis4{grid-template-columns:repeat(4,1fr)}
@media (max-width:760px){.kpis4{grid-template-columns:repeat(2,1fr)}}
a.kpi{transition:transform .2s var(--ease)}
a.kpi:hover{transform:translateY(-2px)}
a.hero-card{color:#fff}
a.hero-card .btn{background:var(--card);color:var(--g)}
.req,.acc{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:22px;padding:12px 14px;transition:opacity .3s,transform .3s var(--ease);animation:rise .4s var(--ease) both}
.req .i,.acc .i{flex:1;min-width:0;display:grid;gap:2px}
.req small,.acc small{color:var(--muted);font-size:12.5px}
.acc b .pill{font-size:11px;padding:1px 8px;margin-left:4px}
.req .acts,.acc .acts{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.req.leave{opacity:0;transform:translateX(40px)}
.acc.off{background:var(--amber-bg)}
@media (max-width:600px){.req,.acc{flex-wrap:wrap}.req .acts,.acc .acts{width:100%;justify-content:flex-start}}
.journal{display:grid;border:1px solid var(--line);border-radius:22px;overflow:hidden}
.jl{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:11px 16px;border-bottom:1px solid var(--line);font-size:14px}
.jl:last-child{border-bottom:0}
.jl .dot{width:9px;height:9px;border-radius:50%;background:var(--g2)}
.jl.bad{background:var(--danger-bg)}
.jl.bad .dot{background:var(--red)}
.jl small{display:block;color:var(--muted);font-size:12px}
.jl time{color:var(--muted);font-size:12px;white-space:nowrap}
.sugg div.av{flex:none}

/* mode sombre : petites retouches */
:root[data-theme="dark"] .wordmark{color:var(--fg)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wordmark{color:var(--fg)}}
:root[data-theme="dark"] .btn.soft{color:#9fe0bb}
:root[data-theme="dark"] .link,:root[data-theme="dark"] .post-h .follow{color:#7fd1a2}
:root[data-theme="dark"] .kpi b{color:#9fe0bb}
:root[data-theme="dark"] .leaflet-container{background:#0c1511}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn.soft{color:#9fe0bb}:root:not([data-theme="light"]) .link,:root:not([data-theme="light"]) .post-h .follow{color:#7fd1a2}:root:not([data-theme="light"]) .kpi b{color:#9fe0bb}}

/* ================= CONNEXION façon JUNNA ================= */
.af{display:flex;flex-direction:column;gap:10px}
.af h2{font-size:28px;font-weight:800;letter-spacing:-.03em}
.af p{margin:0}
.af .lbl{margin:4px 0 -4px 4px}
.af .field{border-radius:999px;padding:12px 18px}
.af .btn.block{margin-top:6px;padding:15px}
.auth-liens{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:2px}
.lien{color:var(--g2);font-weight:700;font-size:14px}
.lien:hover{text-decoration:underline}
.separateur{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px;margin:18px 0 12px}
.separateur::before,.separateur::after{content:"";flex:1;height:1px;background:var(--line)}
.demo-golf{display:block;margin:10px auto 0;font-size:13px}
.msg-err{color:var(--red);font-weight:600;font-size:13.5px}
.msg-ok{background:var(--ok-bg);color:var(--ok-fg);border-radius:14px;padding:10px 14px;font-size:13.5px;font-weight:600}
/* ordinateur : panneau qui glisse */
.auth-glisse{--glisse:.62s cubic-bezier(.65,0,.35,1);min-height:100vh;display:grid;place-items:center;align-content:center;gap:22px;padding:40px 24px;background:radial-gradient(110% 80% at 50% 0%,var(--mint) 0%,var(--soft) 55%,var(--bg) 100%)}
.ag-logo{display:flex;align-items:center;justify-content:center;gap:10px;font-weight:800;font-size:24px;letter-spacing:-.03em;color:var(--fg)}
.ag-carte{position:relative;width:min(960px,100%);min-height:580px;display:grid;grid-template-columns:1fr 1fr;background:var(--card);border-radius:30px;overflow:hidden;box-shadow:0 40px 80px -36px var(--shadow),0 0 0 1px var(--line)}
.ag-cote{padding:46px 48px;display:flex;flex-direction:column;justify-content:center;transition:opacity .3s .3s,transform var(--glisse)}
.ag-carte:not(.creer) .ag-cote.droite,.ag-carte.creer .ag-cote.gauche{opacity:0;pointer-events:none;transition:opacity .2s,transform var(--glisse)}
.ag-carte:not(.creer) .ag-cote.droite{transform:translateX(-40px)}
.ag-carte.creer .ag-cote.gauche{transform:translateX(40px)}
.ag-panneau{position:absolute;top:0;bottom:0;left:50%;width:50%;overflow:hidden;color:#fff;z-index:2;background:#0d5c3b;transition:transform var(--glisse);will-change:transform;box-shadow:-24px 0 50px -30px var(--shadow)}
.ag-panneau>svg{position:absolute;inset:0;width:100%;height:100%;transition:transform var(--glisse)}
.ag-panneau::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,46,29,.35),rgba(6,46,29,.82))}
.ag-carte.creer .ag-panneau{transform:translateX(-100%);box-shadow:24px 0 50px -30px var(--shadow)}
.ag-carte.creer .ag-panneau>svg{transform:scale(1.12) translateX(6%)}
.ag-texte{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;text-align:center;gap:14px;padding:46px 40px 56px;transition:opacity .35s .25s,transform var(--glisse)}
.ag-texte h2{font-size:30px;font-weight:800;letter-spacing:-.03em;color:#fff}
.ag-texte p{margin:0;color:#d6efe1;max-width:36ch;line-height:1.6}
.ag-texte strong{color:#fff}
.ag-texte button{margin-top:6px;border:1.5px solid rgba(255,255,255,.75);color:#fff;border-radius:999px;padding:12px 30px;font-weight:700;transition:background .2s,transform .15s}
.ag-texte button:hover{background:rgba(255,255,255,.12)}
.ag-texte button:active{transform:scale(.97)}
.ag-carte.creer .ag-texte.vers-creer,.ag-carte:not(.creer) .ag-texte.vers-connexion{opacity:0;pointer-events:none;transition:opacity .18s,transform var(--glisse)}
.ag-carte:not(.creer) .ag-texte.vers-connexion{transform:translateX(60px)}
.ag-carte.creer .ag-texte.vers-creer{transform:translateX(-60px)}
.ag-pied{width:min(400px,100%)}
.auth-glisse.solo .auth-carte.seule{width:min(440px,100%);background:var(--card);border-radius:28px;padding:34px;box-shadow:0 40px 80px -36px var(--shadow),0 0 0 1px var(--line)}
/* téléphone : écran simple */
.auth-m{min-height:100vh;background:var(--bg)}
.auth-visuel{position:relative;overflow:hidden;color:#fff;padding:calc(30px + env(safe-area-inset-top,0px)) 24px 30px;min-height:290px;display:flex;align-items:flex-end}
.auth-visuel>svg{position:absolute;inset:0;width:100%;height:100%}
.auth-visuel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,46,29,.15),rgba(6,46,29,.85))}
.av-in{position:relative;z-index:1}
.auth-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:24px;letter-spacing:-.03em;margin-bottom:14px}
.auth-visuel h1{font-size:28px;font-weight:800;line-height:1.1;letter-spacing:-.03em}
.auth-visuel h1 span{color:#ffe08a}
.auth-visuel ul{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:6px;font-size:14px;color:#e2f3e9}
.auth-visuel li::before{content:"→";color:#ffe08a;margin-right:8px;font-weight:800}
.auth-carte{padding:26px 22px calc(36px + env(safe-area-inset-bottom,0px));max-width:480px;margin:0 auto}
.auth-carte .af h2{font-size:26px}
/* entrée en douceur après l'animation d'ouverture */
[data-lancement] .auth-carte,[data-lancement] .av-in,[data-lancement] .ag-carte,[data-lancement] .ag-logo{animation:l-entree .45s 2.6s var(--ease) both}
@keyframes l-entree{from{opacity:0;transform:translateY(24px)}}

/* bienvenue */
.welcome-p{min-height:100vh;display:grid;place-items:center;padding:30px 18px;background:radial-gradient(110% 80% at 50% 0%,var(--mint) 0%,var(--bg) 70%)}
.wl-card{width:min(540px,100%);background:var(--card);border-radius:28px;padding:30px;display:grid;gap:14px;box-shadow:0 40px 80px -40px var(--shadow),0 0 0 1px var(--line);animation:rise .5s var(--ease)}
.wl-card h2{font-size:26px;font-weight:800;letter-spacing:-.03em}
.wl-card>p{margin:0}
.wl-steps{display:flex;gap:6px}
.wl-steps i{height:5px;flex:1;border-radius:5px;background:var(--line)}
.wl-steps i.done{background:var(--g2)}
.wl-steps i.now{background:linear-gradient(90deg,var(--g2) 50%,var(--line) 50%);background-size:200% 100%;animation:fillbar 1.2s var(--ease) forwards}
@keyframes fillbar{from{background-position:100% 0}to{background-position:50% 0}}
.field.big{padding:15px 18px;font-size:16px}
.gres{display:grid;gap:6px;max-height:340px;overflow-y:auto}
.gr{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;border:1px solid var(--line);text-align:left;transition:background .2s,transform .15s;animation:rise .3s var(--ease) both}
.gr:hover{background:var(--soft)}
.gr:active{transform:scale(.98)}
.gr.off{opacity:.55;cursor:not-allowed}
.gr .gi{flex:1;min-width:0}
.gr b,.gr small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gr small{color:var(--muted);font-size:12.5px}
.picked{display:flex;align-items:center;gap:14px;padding:14px;border-radius:20px;background:var(--mint);animation:rise .35s var(--ease)}
.picked b{display:block;font-size:16px}

/* ================= ACCUEIL PLUS DENSE + MOMENTS ================= */
.home{grid-template-columns:minmax(0,var(--feed)) 340px;gap:44px;padding:22px 24px 60px}
.feed-col{min-width:0}
.rail{gap:14px}
.widget{display:grid;gap:10px;border:1px solid var(--line);border-radius:22px;padding:14px;background:var(--card)}
.widget h5{margin:0}
.next-w{grid-template-columns:86px 1fr;align-items:center;padding:10px;transition:transform .2s var(--ease),box-shadow .2s}
.next-w:hover{transform:translateY(-2px);box-shadow:0 18px 30px -22px var(--shadow)}
.nw-art{width:86px;height:100px;border-radius:16px;overflow:hidden}
.nw-art svg{width:100%;height:100%}
.nw-in{display:grid;gap:2px;min-width:0}
.nw-in small{color:var(--g2);font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em}
.nw-in b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nw-in>span{color:var(--muted);font-size:12.5px}
.countdown{display:flex;align-items:center;gap:8px;margin-top:6px}
.countdown b{font-size:22px;letter-spacing:-.03em;color:var(--g2)}
.cta-w{background:var(--mint);border-color:transparent}
.cta-w span{color:var(--muted);font-size:13px}
.cta-w .btn{justify-self:start;color:#fff}
.tr-row{display:grid;grid-template-columns:18px 44px 1fr;gap:10px;align-items:center}
.tr-row .rank{font-weight:800;color:var(--g2);font-size:15px}
.tr-row .th{width:44px;height:44px;border-radius:12px;overflow:hidden}
.tr-row .th svg{width:100%;height:100%}
.tr-row .tx{min-width:0}
.tr-row b,.tr-row small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-row b{font-size:13.5px}
.tr-row small{color:var(--muted);font-size:12px;display:flex;align-items:center;gap:3px}
.story.add{position:relative}
.story.add .ring{background:var(--line)}
.story.add .ring>div{display:grid;place-items:center;font-weight:800;color:var(--fg);background:var(--soft)}
.story.add i{position:absolute;top:50px;right:8px;width:22px;height:22px;border-radius:50%;background:var(--g2);color:#fff;display:grid;place-items:center;border:3px solid var(--bg)}
.composer{display:flex;align-items:center;gap:12px;width:100%;border:1px solid var(--line);border-radius:999px;padding:7px 8px 7px 7px;margin:2px 0 12px;background:var(--card);text-align:left;transition:border-color .2s,box-shadow .2s}
.composer:hover{border-color:var(--g2);box-shadow:0 0 0 4px var(--mint)}
.composer .ph{flex:1;color:var(--muted)}
.composer .cam{width:38px;height:38px;border-radius:50%;background:var(--mint);color:var(--g2);display:grid;place-items:center}
.strip-h{display:flex;justify-content:space-between;align-items:baseline;margin:4px 0 8px}
.strip-h b{font-size:15px}
.strip{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:14px;margin-bottom:6px}
.strip::-webkit-scrollbar{display:none}
.mini{flex:none;width:150px;display:grid;gap:3px;transition:transform .2s var(--ease)}
.mini:hover{transform:translateY(-3px)}
.mi-art{position:relative;height:110px;border-radius:16px;overflow:hidden;margin-bottom:4px}
.mi-art svg{width:100%;height:100%}
.mi-art span{position:absolute;left:8px;top:8px;background:var(--card);color:var(--fg);border-radius:10px;padding:3px 8px;font-size:11px;font-weight:800}
.mini b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini small{color:var(--muted);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini .price{font-size:13px;color:var(--g2)}
@media (max-width:900px){.composer{margin:4px 14px 12px;width:calc(100% - 28px)}.strip-h{padding:0 14px}.strip{padding:0 14px 12px}.home{padding:0 0 30px}}
/* moments */
.moment .media img{width:100%;height:100%;object-fit:cover;display:block}
.moment .media.txt{aspect-ratio:1/1}
.textcard{width:100%;height:100%;display:grid;place-items:center;padding:34px;background:radial-gradient(120% 90% at 20% 10%,hsl(var(--h) 45% 38%),hsl(calc(var(--h) + 40) 50% 18%));color:#fff;font-weight:800;font-size:clamp(19px,4.4vw,26px);line-height:1.25;letter-spacing:-.02em;text-align:center;text-wrap:balance}
.textcard span{display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden}
.textcard.sm{font-size:12.5px;padding:12px}
.textcard.sm span{-webkit-line-clamp:5}
.verif{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;background:var(--g2);color:#fff;vertical-align:1px}
.post-h small a{color:var(--fg);font-weight:600}
.post-h{position:relative}
.more{margin-left:auto;color:var(--muted)}
.pmenu{position:absolute;right:0;top:46px;z-index:5;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 30px -16px var(--shadow);padding:6px;min-width:180px;animation:rise .2s var(--ease)}
.pmenu button{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:10px;font-weight:600}
.pmenu button:hover{background:var(--soft)}
.see-cm{color:var(--muted);font-size:14px;padding:4px 4px 0}
@media (max-width:900px){.see-cm{padding-left:14px}}
.post.leave,.mod.leave{opacity:0;transform:scale(.97);transition:all .3s var(--ease)}
/* feuilles du bas */
.sheet-wrap{position:fixed;inset:0;z-index:250;display:grid;align-items:end;justify-items:center}
.sheet-bg{position:absolute;inset:0;background:rgba(5,20,12,.45);animation:fadein .2s}
.sheet-panel{position:relative;width:min(560px,100%);max-height:86vh;overflow-y:auto;background:var(--card);border-radius:28px 28px 0 0;padding:10px 18px calc(18px + env(safe-area-inset-bottom,0px));animation:sheet-up .32s var(--ease);display:grid;gap:12px;align-content:start}
.sheet-panel.tall{min-height:60vh}
.sheet-wrap.out .sheet-panel{animation:sheet-down .22s ease-in forwards}
.sheet-wrap.out .sheet-bg{opacity:0;transition:opacity .2s}
@keyframes sheet-up{from{transform:translateY(100%)}}
@keyframes sheet-down{to{transform:translateY(100%)}}
@media (min-width:901px){.sheet-wrap{align-items:center}.sheet-panel{border-radius:28px;animation:pop-in .3s var(--ease)}.sheet-wrap.out .sheet-panel{animation:none;opacity:0;transition:opacity .2s}}
@keyframes pop-in{from{opacity:0;transform:scale(.96) translateY(14px)}}
.grab{width:42px;height:5px;border-radius:5px;background:var(--line);justify-self:center}
.sh-t{font-size:17px;font-weight:800;text-align:center}
.cms{display:grid;gap:14px;max-height:50vh;overflow-y:auto;padding:4px 2px}
.cm{display:flex;gap:10px;font-size:14px;animation:rise .3s var(--ease) both}
.cm .av{width:32px;height:32px;font-size:11px}
.cm small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}
.cm-form{display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);padding-top:12px;position:sticky;bottom:0;background:var(--card)}
.cm-form .av{width:32px;height:32px;font-size:11px}
.cm-form input{flex:1;border:0;outline:0;background:transparent;min-width:0;font-size:15px}
.cp{display:grid;gap:12px}
.cp-photo{position:relative;display:grid;place-items:center;aspect-ratio:4/3;border:2px dashed var(--line);border-radius:22px;cursor:pointer;overflow:hidden;background:var(--soft);transition:border-color .2s}
.cp-photo:hover{border-color:var(--g2)}
.cp-ph{display:grid;justify-items:center;gap:4px;color:var(--muted);text-align:center;padding:20px}
.cp-ph b{color:var(--fg)}
.cp-photo img{width:100%;height:100%;object-fit:cover}
.cp-x{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center}
.cp-x svg{stroke:#fff}
.gres.small{max-height:220px}
.gres.small .gr .av{width:30px;height:30px}
.mtile{padding:0;border:0;display:block;width:100%}
.mtile img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.mtile:hover img{transform:scale(1.05)}
.mtile .t{display:flex;align-items:center;gap:4px}
/* pages plus larges, moins de vide */
.page.wide{max-width:1040px}
.page{max-width:1000px}
@media (min-width:1100px){.grid3{grid-template-columns:repeat(4,1fr)}}
.mine-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:12px}
@media (max-width:600px){.mine-grid{grid-template-columns:1fr}}
.mod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.mod{border:1px solid var(--line);border-radius:20px;overflow:hidden;display:grid;background:var(--card);transition:all .3s var(--ease)}
.mod.flag{border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-bg)}
.mod>img,.mod>.textcard{aspect-ratio:1/1;width:100%;object-fit:cover}
.mod-i{padding:12px;display:grid;gap:6px;align-content:start}
.mod-i small{color:var(--muted);font-size:12px}
.mod-i p{margin:0;font-size:13px}
.mod-i .btn{justify-self:start}
@media (max-width:1180px){.home{grid-template-columns:minmax(0,var(--feed));justify-content:center}}
@media (max-width:900px){.home{grid-template-columns:minmax(0,1fr);padding:0 0 30px;gap:0}}

/* ================= 2026-10-22 : annuaire des golfs, fiche golf détaillée, espace golf (calendrier, résultats, ma fiche) ================= */
.chips.wrap{flex-wrap:wrap;overflow:visible}
.sec-t{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:800;margin:10px 0 0}
.h2s{font-size:19px;font-weight:800;letter-spacing:-.02em;margin:0}
.map-card .th img,.mi-art img{width:100%;height:100%;object-fit:cover}
/* annuaire */
.gsearch{display:flex;gap:10px;flex-wrap:wrap}
.gsearch .search{flex:1 1 260px;min-width:0}
.gcount{margin:-6px 0 0;font-size:13.5px}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.gcard{display:grid;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--card);transition:transform .2s var(--ease),box-shadow .2s;animation:rise .4s var(--ease) both}
.gcard:hover{transform:translateY(-3px);box-shadow:0 18px 30px -22px var(--shadow)}
.gc-ph{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--soft)}
.gc-ph img,.gc-ph svg{width:100%;height:100%;object-fit:cover}
.gc-ph .pill{position:absolute;left:10px;top:10px}
.gc-i{padding:10px 12px 12px;display:grid;gap:3px;min-width:0}
.gc-i b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc-i small{color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:4px}
.gc-tags .pill{font-size:11px;padding:2px 8px}
/* fiche golf publique */
.gpage{gap:16px}
.ghero{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:21/8;background:var(--soft)}
.gh-ph,.gh-ph img,.gh-ph svg{width:100%;height:100%;object-fit:cover}
.ghero .back{position:absolute;left:14px;top:14px;background:var(--glass);padding:7px 12px;border-radius:999px;color:var(--fg)}
.gh-credit{position:absolute;right:10px;bottom:8px;font-size:10.5px;color:#fff;background:rgba(0,0,0,.45);padding:3px 8px;border-radius:999px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gh-body{display:grid;gap:10px}
.gh-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.gh-top h1{font-size:clamp(24px,3.2vw,32px);font-weight:800;letter-spacing:-.03em}
.gh-acts{display:flex;gap:8px}
.gh-links{display:flex;gap:8px;flex-wrap:wrap}
.gh-bio{margin:0;max-width:70ch;line-height:1.55}
.gpage .stats{margin:2px 0;flex-wrap:wrap;row-gap:6px}
.unclaimed{display:flex;gap:12px;align-items:flex-start;background:var(--soft);border-radius:16px;padding:12px 14px;color:var(--muted)}
.unclaimed svg{flex:none;margin-top:2px;color:var(--g2)}
.unclaimed b{display:block;color:var(--fg)}
.palm{display:grid;gap:2px}
.palm-r{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:10px 4px;border-bottom:1px solid var(--line);align-items:baseline}
.palm-r small{color:var(--muted);display:block;margin-top:2px}
.palm-d{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
/* carte de score */
.sc-wrap{display:grid;gap:8px;margin-bottom:6px}
.sc-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.sc-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:16px;-webkit-overflow-scrolling:touch}
.sc{border-collapse:collapse;width:100%;font-size:13px;font-variant-numeric:tabular-nums;text-align:center;white-space:nowrap}
.sc th,.sc td{padding:8px 7px;border-bottom:1px solid var(--line)}
.sc tr:last-child th,.sc tr:last-child td{border-bottom:0}
.sc thead th{background:var(--soft);font-weight:800}
.sc .rl{text-align:left;position:sticky;left:0;background:var(--card);font-weight:700;z-index:1;padding-left:12px}
.sc thead .rl{background:var(--soft)}
.sc .sub{background:var(--soft);font-weight:700}
.sc .tot{background:var(--mint);font-weight:800;color:var(--g)}
.sc .par td{font-weight:700}
.sc .hcp td{color:var(--muted)}
.tee{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--tee);border:1px solid rgba(0,0,0,.25);margin-right:6px;vertical-align:-1px}
/* records */
.recs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.rec{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:18px;padding:14px;background:var(--card)}
.rec-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--flag-bg);color:#8a6500;flex:none}
.rec-i{display:grid;gap:2px;flex:1;min-width:0}
.rec-i .lbl{margin:0}
.rec-s{font-size:28px;font-weight:800;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.rec-s small{font-size:13px;font-weight:600;color:var(--muted)}
.rec-i>span:last-child{font-size:13px;color:var(--muted)}
.rec-i>span:last-child b{color:var(--fg)}
/* événements */
.evts{display:grid;gap:10px}
.evt{display:grid;grid-template-columns:58px 1fr auto;gap:12px;align-items:start;border:1px solid var(--line);border-radius:18px;padding:12px;background:var(--card)}
.evt-d{display:grid;justify-items:center;background:var(--soft);border-radius:14px;padding:6px 0;line-height:1.1}
.evt-d b{font-size:22px;font-weight:800}
.evt-d small{font-size:10.5px;font-weight:700;color:var(--muted);letter-spacing:.04em}
.evt-i{display:grid;gap:4px;min-width:0}
.evt-i p{margin:0;font-size:13.5px}
.evt-i .muted svg{display:inline;vertical-align:-1px}
.evt-p{font-weight:800;color:var(--g);font-size:14px}
/* résultats (joueurs) */
.res{display:grid;gap:12px;border:1px solid var(--line);border-radius:20px;padding:16px;background:var(--card)}
.res h3{display:flex;align-items:center;gap:8px;font-size:17px}
.res-cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.res-cat{display:grid;gap:4px;align-content:start}
.res-row{display:grid;grid-template-columns:26px 1fr auto;gap:10px;align-items:center;padding:6px 8px;border-radius:12px}
.res-row .rk,.rrow .rk,.medal{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:12.5px;background:var(--soft);color:var(--muted)}
.res-row.p1 .rk,.rrow.p1 .rk,.medal.r1{background:#f3c93f;color:#4a3700}
.res-row.p2 .rk,.rrow.p2 .rk,.medal.r2{background:#d5dbe0;color:#2c3a44}
.res-row.p3 .rk,.rrow.p3 .rk,.medal.r3{background:#e2a874;color:#4a2608}
.res-row.me{background:var(--mint)}
.res-row small{color:var(--g);font-weight:700}
.sc-v{font-variant-numeric:tabular-nums;color:var(--muted);font-size:13.5px}
.res-photo{position:relative;display:block;border-radius:14px;overflow:hidden;max-height:220px}
.res-photo img{width:100%;max-height:220px;object-fit:cover}
.res-photo span{position:absolute;left:10px;bottom:10px;display:inline-flex;gap:6px;align-items:center;background:var(--glass);border-radius:999px;padding:5px 11px;font-size:13px;font-weight:700}
.res-strip{display:grid;gap:10px;margin-bottom:14px}
.rescard{display:grid;gap:10px;border:1px solid var(--line);border-radius:20px;padding:12px 14px;background:linear-gradient(135deg,var(--flag-bg),var(--card) 60%);transition:transform .2s var(--ease)}
.rescard:hover{transform:translateY(-2px)}
.rc-h{display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center}
.rc-h small{display:block;color:var(--muted);font-size:12.5px}
.rc-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#f3c93f;color:#4a3700}
.rc-pod{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.rc-pod div{display:grid;background:var(--card);border-radius:12px;padding:8px 10px}
.rc-pod .lbl{margin:0;font-size:11px}
.rc-pod small{color:var(--muted);font-size:12px}
/* palmarès joueur */
.wins{display:grid;gap:10px}
.wins-l{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.win{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:16px;padding:10px 12px}
.win small{display:block;color:var(--muted);font-size:12.5px}
.medal.r4{background:var(--soft)}
/* espace golf : accueil */
.qa{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.qa-t{position:relative;display:grid;gap:3px;justify-items:start;text-align:left;border:1px solid var(--line);border-radius:20px;padding:14px;background:var(--card);transition:transform .2s var(--ease),box-shadow .2s}
.qa-t:hover{transform:translateY(-2px);box-shadow:0 18px 30px -22px var(--shadow)}
.qa-t small{color:var(--muted);font-size:12.5px}
.qa-ic{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:var(--mint);color:var(--g);margin-bottom:6px}
.qa-ic.y{background:var(--flag-bg);color:#8a6500}
.qa-t .badge{position:absolute;right:12px;top:12px;min-width:22px;height:22px;border-radius:999px;background:var(--red);color:#fff;font-style:normal;font-weight:800;font-size:12px;display:grid;place-items:center;padding:0 6px}
.qa-bar{width:100%;height:5px;border-radius:9px;background:var(--soft);overflow:hidden;margin-top:4px}
.qa-bar i{display:block;height:100%;background:var(--g2);border-radius:9px}
.todo{display:grid;gap:6px;border:1px solid var(--line);border-radius:20px;padding:14px;background:var(--card)}
.todo h3{font-size:15px}
.todo-r{display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;padding:8px;border-radius:14px;color:var(--fg)}
.todo-r:hover{background:var(--soft)}
.todo-r small{display:block;color:var(--muted);font-size:12.5px}
.todo-ic{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--soft);color:var(--g)}
.todo-r>svg{color:var(--muted)}
.dash2{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;align-items:start}
.dash2 section{display:grid;gap:10px}
/* calendrier */
.cal-title{text-transform:capitalize}
.cal-nav{display:flex;gap:6px;align-items:center}
.icon-btn.flip svg{transform:rotate(180deg)}
.cal-legend{display:flex;gap:16px;font-size:13px;color:var(--muted);margin-top:-8px}
.cal-legend i,.cd-dots i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:0}
.cal-legend i.c,.cd-dots i.c,.cd-items i.c{background:var(--g2)}
.cal-legend i.e,.cd-dots i.e,.cd-items i.e{background:var(--flag)}
.cal-layout{display:grid;grid-template-columns:1fr 300px;gap:18px;align-items:start}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal-dow{font-size:11.5px;font-weight:800;color:var(--muted);text-align:center;padding:4px 0;letter-spacing:.04em}
.cd{min-height:92px;border:1px solid var(--line);border-radius:12px;padding:6px;display:flex;flex-direction:column;gap:3px;text-align:left;background:var(--card);min-width:0;transition:border-color .15s,background .15s}
.cd.empty{border:0;background:none}
.cd .n{font-size:13px;font-weight:700}
.cd.past{background:var(--soft)}
.cd.past .n{color:var(--muted)}
.cd.today .n{background:var(--g);color:#fff;border-radius:999px;width:24px;height:24px;display:grid;place-items:center}
.cd.sel{border-color:var(--g2);box-shadow:0 0 0 2px var(--g2) inset}
.cd:hover{border-color:var(--g2)}
.cd-items{display:grid;gap:2px;min-width:0}
.cd-items i{display:block;font-style:normal;font-size:11px;font-weight:700;color:#fff;border-radius:6px;padding:2px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cd-items i.e{color:#3d2c00}
.cd-items em{font-style:normal;font-size:11px;color:var(--muted);font-weight:700}
.cd-dots{display:none}
.cal-day{position:sticky;top:20px;display:grid;gap:10px;border:1px solid var(--line);border-radius:20px;padding:16px;background:var(--card)}
.cal-day h3{font-size:16px;text-transform:capitalize}
.cal-it{display:grid;gap:2px;border-left:4px solid var(--g2);background:var(--soft);border-radius:0 12px 12px 0;padding:8px 12px}
.cal-it.e{border-left-color:var(--flag)}
.cal-it .lbl{margin:0;font-size:11px}
.cal-it small{color:var(--muted);font-size:12.5px}
.cal-add{display:flex;gap:8px;flex-wrap:wrap}
/* saisie des résultats */
.res-edit{gap:14px}
.rcats{display:grid;gap:12px}
.rcat{gap:8px;padding:14px}
.rcat-h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.rcat-h b{font-size:16px}
.rcat-h span{display:flex;align-items:center;gap:6px}
.rcat-h .link{display:inline-flex;align-items:center;gap:4px;font-size:13px}
.rrow{display:grid;grid-template-columns:26px 1fr 120px 22px;gap:8px;align-items:center}
.rrow .field{padding:9px 12px;border-radius:12px}
.rmatch{color:var(--g2);display:grid;place-items:center}
.addrow{justify-self:start;font-size:13.5px}
.res-shot{display:grid;place-items:center;border:1.5px dashed var(--line);border-radius:16px;min-height:120px;cursor:pointer;overflow:hidden;color:var(--muted);text-align:center}
.res-shot span{display:grid;justify-items:center;gap:4px;padding:16px}
.res-shot b{color:var(--fg)}
.res-shot img{width:100%;max-height:300px;object-fit:contain;background:var(--soft)}
.res-bar{position:sticky;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:5;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;background:var(--glass);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:20px;padding:10px 10px 10px 16px;box-shadow:0 20px 40px -26px var(--shadow)}
.res-bar .err{min-height:0;flex-basis:100%;order:3}
.res-bar .err:empty{display:none}
.paste-ex{margin:0;background:var(--soft);border-radius:12px;padding:10px 12px;font-size:12.5px;overflow-x:auto}
/* ma fiche */
.fiche{gap:16px}
.fiche-nav{display:flex;gap:6px;flex-wrap:wrap;position:sticky;top:0;z-index:4;background:var(--bg);padding:6px 0}
.fiche-nav a{border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:700;background:var(--card)}
.fiche section,.fiche form{scroll-margin-top:60px}
.cover{position:relative;display:block;aspect-ratio:21/8;border-radius:18px;overflow:hidden;cursor:pointer;background:var(--soft)}
.cover img,.cover svg{width:100%;height:100%;object-fit:cover}
.cover-btn{position:absolute;right:12px;bottom:12px;display:inline-flex;gap:6px;align-items:center;background:var(--glass);border-radius:999px;padding:8px 14px;font-weight:700;font-size:13.5px}
.ce-list{display:grid;gap:14px}
.ce{padding:12px;gap:10px;box-shadow:none}
.ce-h{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ce-h .field{padding:9px 12px}
.ce-t td{padding:4px}
.ce-t th{padding:6px 5px}
.ce-t input{width:58px;border:1px solid var(--line);border-radius:9px;padding:7px 6px;text-align:center;background:var(--card);font-variant-numeric:tabular-nums}
.ce-t input:focus{outline:2px solid var(--g2);outline-offset:-1px;border-color:transparent}
.ce-t tfoot td,.ce-t tfoot th{background:var(--mint);font-weight:800;color:var(--g)}
.parb{width:40px;height:34px;border-radius:10px;font-weight:800;font-size:15px;transition:transform .12s,background .15s}
.parb:active{transform:scale(.9)}
.parb.p3{background:#dff0ff;color:#1d5b9a}
.parb.p4{background:var(--mint);color:var(--g)}
.parb.p5{background:var(--flag-bg);color:#7a5600}
.rec-f{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:end;border-top:1px solid var(--line);padding-top:12px}
.rec-f .err{grid-column:1/-1;min-height:0}
.rec-f .err:empty{display:none}
.rec-f .btn{grid-column:1/-1;justify-self:start}
.field select{border:0;outline:0;background:transparent;flex:1;min-width:0;color:var(--fg)}
@media (max-width:900px){
  .qa{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dash2,.cal-layout{grid-template-columns:minmax(0,1fr)}
  .cal-day{position:static}
  .cd{min-height:52px;padding:5px 4px;align-items:center}
  .cd-items{display:none}
  .cd-dots{display:flex;gap:2px}
  .cd-dots i{width:6px;height:6px;margin:0}
  .ghero{aspect-ratio:16/9;border-radius:0 0 22px 22px;margin:0 -16px}
  .rec-f{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ggrid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
}
@media (max-width:520px){
  .rrow{grid-template-columns:26px 1fr 84px 18px;gap:6px}
  .palm-r{grid-template-columns:1fr;gap:2px}
  .ggrid{grid-template-columns:1fr 1fr}
  .gc-ph .pill{font-size:10px;left:6px;top:6px}
}
.gpage .ptabs{overflow-x:auto;scrollbar-width:none;justify-content:flex-start}
.gpage .ptabs::-webkit-scrollbar{display:none}
.gpage .ptabs button{flex:none}
@media (min-width:901px){.gpage .ptabs{justify-content:center}}
/* fond de carte OpenStreetMap : adouci en clair, assombri en mode sombre */
.leaflet-tile-pane{filter:saturate(.75) brightness(1.03)}
.leaflet-tile{outline:1px solid transparent}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.9) contrast(.9) saturate(.6)}}
:root[data-theme="dark"] .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.9) contrast(.9) saturate(.6)}