@font-face{font-family:Roboto;font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/roboto-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:Roboto;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/roboto-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:Roboto;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/roboto-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:Roboto;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/roboto-latin-700-normal.woff2) format('woff2')}
:root{--bg:#fff;--fg:#1c2530;--muted:#5b6876;--card:#f3f6f8;--line:#dfe5ea;--brand:#4a7c27;--on-brand:#fff;--hero:#5f9330;--accent:#c2306a;--on-accent:#fff;--bad:#c62828;--warn:#b26a00;--ok:#2e7d32;--radius:12px;--side:248px;--shadow:0 2px 10px rgba(0,0,0,.12)}
@media (prefers-color-scheme:dark){:root{--bg:#10151a;--fg:#e8edf1;--muted:#9aa8b5;--card:#19222a;--line:#26323c;--brand:#7cb342;--on-brand:#0b1a12;--hero:#2f5219;--accent:#f06292;--on-accent:#1a0a10;--bad:#ef5350;--warn:#ffb74d;--ok:#66bb6a;--shadow:0 2px 12px rgba(0,0,0,.5)}}
*{box-sizing:border-box}
html{overflow-x:hidden;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;font-size:14.5px}
body{overflow-x:clip;margin:0;background:var(--bg);color:var(--fg);font:1rem/1.42 Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
a{color:var(--brand)}
h1{font-size:1.4rem;margin:0 0 12px}h2{font-size:1.1rem;margin:20px 0 10px}
.muted{color:var(--muted)}.err{color:var(--bad)}.ok{color:var(--ok)}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.btn.enter{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:9px 22px;border-radius:999px}
.btn.enter:hover,.btn.enter:focus-visible,.btn.enter:active{background:var(--accent);border-color:var(--accent);color:var(--on-accent);filter:brightness(1.12)}

/* menu de langue */
.lang-menu{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid currentColor;color:inherit;border-radius:999px;padding:0 12px;height:38px;box-sizing:border-box;font:inherit;font-weight:600;cursor:pointer;opacity:.95}
.lang-btn:hover{background:rgba(255,255,255,.14)}
.lang-pop{position:absolute;right:0;top:calc(100% + 6px);min-width:150px;background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:4px;z-index:30;list-style:none;margin:0}
.lang-pop button{width:100%;text-align:left;background:none;border:0;color:inherit;padding:8px 12px;border-radius:8px;font:inherit;cursor:pointer}
.lang-pop button:hover,.lang-pop button[aria-checked=true]{background:var(--card)}
.lang-pop button[aria-checked=true]{font-weight:700}

/* site vitrine */
.site-top{position:sticky;top:0;z-index:20;background:var(--brand);color:#fff;box-shadow:none;transition:box-shadow .15s}
.scrolled .site-top{box-shadow:0 2px 10px rgba(0,0,0,.25)}
.site-top .in{max-width:1180px;margin:0 auto;padding:8px 18px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px}
.site-top .left{display:flex;align-items:center;gap:22px;min-width:0}
.site-top .right{display:flex;justify-content:flex-end;align-items:center;gap:12px}
.btn.enter.sm{padding:0 18px;height:38px;box-sizing:border-box;letter-spacing:.05em;font-size:.9rem}
.site-top .brand{color:#fff;white-space:nowrap}
.site-top nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.site-top nav::-webkit-scrollbar{display:none}
.site-top nav a{color:#fff;text-decoration:none;padding:6px 10px;border-radius:8px;text-transform:uppercase;font-size:.88rem;letter-spacing:.05em;white-space:nowrap;opacity:.9}
.site-top nav a:hover,.site-top nav a[aria-current=page]{background:rgba(255,255,255,.18);opacity:1}
.brand{display:flex;align-items:center;gap:10px;font-weight:400;font-size:1.2rem;letter-spacing:.01em;text-decoration:none}
.brand img{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 0 1px rgba(0,0,0,.35))}
.site-main{min-height:60vh}
.hero{background:linear-gradient(180deg,var(--brand) 0%,#558c2c 28%,#62a04a 52%,#6fae8a 76%,#7eb6e6 100%);color:#fff;text-align:center;padding:24px 18px 36px}
.hero h1{font-size:clamp(1.8rem,5vw,2.6rem);margin:0 0 6px;font-weight:600}
.hero p{font-size:1.05rem;max-width:660px;margin:0 auto;opacity:.97;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.sport-card h3 a{color:inherit;text-decoration:none}
.sport-card .btn{margin-top:8px}
.scene{position:relative;width:100%;min-height:680px;background:#5a9a34;display:flex;flex-direction:column;align-items:stretch;overflow:clip}
.scene::before{content:"";position:absolute;left:0;right:0;top:0;height:90px;background:linear-gradient(180deg,#7eb6e6,rgba(126,182,230,0));z-index:1;pointer-events:none}
.scene-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom}
.scene-grid{position:relative;z-index:1;flex:1;width:100%;max-width:1360px;margin:0 auto;padding:30px 26px 24px;display:grid;grid-template-columns:minmax(0,28%) minmax(0,1fr) minmax(0,28%);gap:20px;align-items:start}
.scene-col{display:grid;gap:12px}
.scene-gap{min-height:1px}
.scene-head{background:rgba(255,255,255,.9);border-radius:14px;padding:12px 16px;box-shadow:0 3px 10px rgba(10,30,60,.2)}
.scene-head h2{margin:0;font-size:1.25rem;font-weight:600;color:#12315c}
.scene-head p{margin:2px 0 0;font-size:.88rem;color:#3a4756}
.sc-card{display:flex;gap:14px;align-items:flex-start;background:rgba(255,255,255,.93);border-radius:14px;padding:12px 14px;box-shadow:0 3px 10px rgba(10,30,60,.2)}
.sc-card .ico{flex:none;width:52px;height:52px;border-radius:50%;background:var(--c,var(--brand));color:#fff;display:grid;place-items:center}
.sc-card h3{margin:2px 0 3px;font-size:1.05rem;color:#12315c}
.sc-card p{margin:0;font-size:.88rem;color:#3a4756;line-height:1.35}
@media (max-width:900px){
  .scene{display:block;min-height:0;background:var(--bg)}
  .scene-bg{position:relative;height:260px;object-position:center 30%}
  .scene-grid{display:block;padding:14px 12px 20px}
  .scene-col{margin-bottom:12px}
  .scene-gap{display:none}
}
.section{max-width:1100px;margin:0 auto;padding:44px 18px 8px}
.section>h2{text-align:center;font-size:1.6rem;color:var(--brand);margin:0}
.section>h2::after{content:"";display:block;width:56px;height:4px;border-radius:2px;background:var(--accent);margin:10px auto 0}
.section>.lead{text-align:center;color:var(--muted);margin:12px 0 24px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.step{border-left:4px solid var(--accent);background:var(--card);border-radius:0 var(--radius) var(--radius) 0;padding:14px 18px}
.step h3{margin:0 0 6px}
.step p{margin:0;color:var(--muted)}
.more{text-align:center;margin-top:18px}
.pg{max-width:980px;margin:0 auto;padding:28px 18px 8px}
.pg h1{font-size:clamp(1.6rem,3.4vw,2.3rem);color:var(--brand);margin:0 0 12px;line-height:1.2}
.pg-lead{font-size:1.12rem;color:var(--muted);margin:0 0 26px;max-width:760px}
.pg-sec{margin:0 0 34px}
.pg-sec h2,.pg-cta h2,.pg-more h2{font-size:1.4rem;color:var(--brand);margin:0 0 8px}
.pg-sec.with-img{display:grid;grid-template-columns:1.1fr 1fr;gap:26px;align-items:center}
.pg-sec.with-img:nth-of-type(even) .pg-fig{order:-1}
.pg-text p{margin:0 0 10px;line-height:1.55}
.pg-text ul{margin:0 0 4px;padding-left:20px;color:var(--muted);line-height:1.6}
.pg-fig{margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);background:#eef1f5}
.pg-fig img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:top left;display:block}
.pg-fam{margin:0 0 16px}
.pg-fam h3{margin:0 0 6px;font-size:1.05rem}
.pg-models{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px 14px}
.pg-models li{display:flex;align-items:center;gap:8px;font-size:.93rem}
.pg-models img{width:34px;height:34px;object-fit:contain;flex:none}
.pg-cta{text-align:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px 18px;margin:8px 0 28px}
.pg-cta p{margin:0 0 14px;color:var(--muted)}
.pg-cards{list-style:none;margin:0 0 30px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.pg-cards li{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:var(--shadow)}
.pg-cards h2{font-size:1.15rem;margin:0 0 8px}
.pg-cards h2 a{color:var(--brand);text-decoration:none}
.pg-cards p{margin:0 0 14px;color:var(--muted)}
.pg-more ul{list-style:none;margin:0 0 24px;padding:0;display:flex;gap:10px 22px;flex-wrap:wrap}
.pg-more a{color:var(--brand);font-weight:500}
@media (max-width:760px){.pg-sec.with-img{grid-template-columns:1fr}.pg-sec.with-img:nth-of-type(even) .pg-fig{order:0}}
.foot-nav{display:flex;gap:6px 22px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
.foot-nav a{color:var(--fg);text-decoration:none;font-weight:500}
.foot-nav a:hover{text-decoration:underline}
.site-foot{margin-top:0;background:var(--card);border-top:1px solid var(--line);color:var(--muted);text-align:center;padding:22px 16px;font-size:.9rem}
.site-page{max-width:1100px;margin:0 auto;padding:22px 18px 8px}
.site-page.narrow{max-width:440px;padding-top:7vh}

/* Mon espace : le menu occupe toute la hauteur ; la barre verte demarre a sa droite (seule la barre porte une ombre) */
.space-top{position:sticky;top:0;z-index:25;margin-left:var(--side);background:var(--brand);color:#fff;box-shadow:0 -3px 0 var(--brand),0 2px 8px rgba(0,0,0,.2);display:flex;align-items:center;gap:12px;padding:0 14px;height:56px}
.space-top .brand{display:none;color:#fff}
.space-top .grow{flex:1}
.icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:10px;background:transparent;border:0;color:inherit;cursor:pointer;padding:0}
.icon-btn:hover{background:rgba(255,255,255,.16)}
.menu-toggle{display:none}
.shell{margin-left:var(--side);min-height:calc(100vh - 56px)}
.side{position:fixed;left:0;top:0;bottom:0;width:var(--side);z-index:30;background:var(--bg);display:flex;flex-direction:column;overflow-y:auto}
.drawer-top{background:var(--brand);color:#fff;flex:none}
.drawer-head{position:relative;text-align:center;padding:14px 40px 2px}
.drawer-head .name{display:flex;align-items:center;justify-content:center;gap:10px;font-size:1.15rem;font-weight:400;white-space:nowrap}
.drawer-head a.name{color:inherit;text-decoration:none;margin:0 auto;width:max-content}
.drawer-head .name img{width:30px;height:30px;object-fit:contain}
.drawer-head .ver{font-size:.85rem;font-weight:300;opacity:.92;margin-top:2px}
.profile{padding:14px 18px 20px;display:flex;gap:16px;align-items:center}
.avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;background:#cfd8dc;border:0;flex:none;display:grid;place-items:center;font-weight:500;color:#37474f}
.profile .who{min-width:0}
.profile .first{font-size:1.5rem;font-weight:300;line-height:1.15;overflow:hidden;text-overflow:ellipsis}
.profile .last{font-size:1rem;font-weight:400;letter-spacing:.02em;text-transform:uppercase;opacity:.95;overflow:hidden;text-overflow:ellipsis}
.profile .count{display:inline-flex;align-items:center;gap:4px;font-size:1rem;font-weight:400;opacity:.95;margin-top:4px}
.side nav{padding:8px 0 24px;flex:1;border-right:1px solid var(--line)}
.side a.item,.side summary{display:flex;align-items:center;gap:22px;padding:11px 20px;color:var(--fg);text-decoration:none;cursor:pointer;list-style:none;font-size:1.05rem;font-weight:400}
.side a.item svg,.side summary svg{color:#6b7280;flex:none}
.side summary::-webkit-details-marker{display:none}
.side a.item:hover,.side summary:hover{background:color-mix(in srgb,var(--brand) 9%,transparent)}
.side a.item[aria-current=page]{background:color-mix(in srgb,var(--brand) 12%,var(--bg))}
.side summary .chev{margin-left:auto;transition:transform .15s;display:grid}
.side details:not([open]) summary .chev{transform:rotate(180deg)}
.side .sub a.item{padding-left:62px}
.scrim{display:none}
.content{min-width:0;max-width:1180px;padding:18px 22px 40px}
.content>.banner{margin:-6px 0 14px;border-radius:10px;border:1px solid var(--line)}
.banner{background:var(--card);padding:8px 14px;font-size:.92rem}
.banner.warn{border-left:4px solid var(--warn)}
.banner.info{border-left:4px solid var(--accent)}
.consent{position:fixed;left:12px;right:12px;bottom:12px;z-index:50;max-width:760px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 16px;box-shadow:0 6px 24px rgba(0,0,0,.25);display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:.92rem}
.consent p{margin:0;flex:1 1 320px}
.consent-btns{display:flex;gap:8px}
.consent-link{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
.side-extras{padding:10px 20px 16px;display:flex;flex-direction:column;gap:8px;font-size:.85rem}
.side-consent{text-align:left;color:var(--muted)}
.fab{position:fixed;right:22px;bottom:22px;width:56px;height:56px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.3);text-decoration:none;z-index:10}
.fab:hover{filter:brightness(1.1)}
/* en-tete des pages d'edition : titre court ; titre des autres pages dans la barre verte */
.page-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.page-head h1{margin:0;flex:1;font-size:1.3rem;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toolbar{display:flex;justify-content:flex-start;gap:10px;margin-bottom:12px}
.top-title{margin:0 0 0 18px;font-size:1.25rem;font-weight:400;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:900px){
  .menu-toggle{display:inline-grid}
  .space-top{margin-left:0}
  .space-top .brand{display:none}
  .top-title{margin-left:8px;font-size:1.15rem}
  .shell{margin-left:0}
  /* tiroir : pleine hauteur, par-dessus la barre */
  .side{height:100vh;height:100dvh;width:clamp(250px,64vw,340px);z-index:40;transform:translateX(-104%);transition:transform .22s ease;box-shadow:0 0 28px rgba(0,0,0,.35)}
  body.menu-open .side{transform:none}
  body.menu-open .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:39}
  .profile{padding:16px 18px 22px;gap:18px}
  .avatar{width:76px;height:76px}
  .side a.item,.side summary{padding:16px 22px;font-size:1.08rem}
  .side .sub a.item{padding-left:68px}
  .content{padding:14px 12px 90px}
  input,select,textarea{font-size:16px}
}
@media (max-width:1000px){
  .site-top .in{grid-template-columns:1fr auto}
}

@media (max-width:480px){.site-top .brand span{display:none}}

/* en-tête historique : conservé pour les pages publiques de secours */
main{max-width:1100px;margin:0 auto;padding:16px}
main.narrow{max-width:420px;padding-top:8vh}
.page-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.page-head h1{margin:0;flex:1}

/* boutons et champs */
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--bg);color:var(--fg);border-radius:10px;padding:8px 14px;font:inherit;cursor:pointer;text-decoration:none;line-height:1.2}
.btn:hover{background:var(--card)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.danger{color:var(--bad);border-color:var(--bad)}
.btn.pink{background:#fdecf2;border-color:var(--accent);color:var(--accent)}
.btn.pink:hover{background:#fbdce8}
.btn.refuse{background:#c62828;border-color:#c62828;color:#fff}
.btn.refuse:hover{filter:brightness(1.08);background:#c62828}
.btn.push{margin-left:auto}
.btn.small{padding:5px 10px;font-size:.9rem}
.btn.icon{padding:6px;line-height:0}
.btn[disabled]{opacity:.5;cursor:default}
label.field{display:block;margin:0 0 14px}
label.field>span{display:block;font-size:.88rem;color:var(--muted);margin-bottom:4px}
input,select,textarea,button{font-family:inherit}
input,select,textarea{width:100%;background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:10px;padding:9px 11px;font:inherit}
input:focus,select:focus,textarea:focus,.btn:focus-visible,a:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.stack>*+*{margin-top:10px}
.hint{font-size:.85rem;color:var(--muted)}

/* cartes */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.content:has(.cards){max-width:none}
@media (min-width:1900px){.cards{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:1389px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.card h3{margin:0;font-size:1.02rem}
.card .meta{font-size:.88rem;color:var(--muted)}
.card .actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.teams{display:flex;align-items:center;gap:8px;font-weight:600}
.teams .vs{color:var(--muted);font-weight:400}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;border:1px solid var(--line);flex:none}
.score{font-size:1.25rem;font-weight:700;font-variant-numeric:tabular-nums}
.tag{display:inline-block;font-size:.75rem;border-radius:999px;padding:1px 9px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.tag.run{color:var(--ok);border-color:var(--ok)}.tag.todo{color:var(--warn);border-color:var(--warn)}.tag.bad{color:var(--bad);border-color:var(--bad)}
.empty{text-align:center;color:var(--muted);padding:40px 0;letter-spacing:.06em}
table.list{width:100%;border-collapse:collapse}
table.list th,table.list td{text-align:left;padding:8px;border-bottom:1px solid var(--line)}
table.list th{color:var(--muted);font-weight:500;font-size:.88rem}

/* boîtes de dialogue */
dialog{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);color:var(--fg);padding:0;max-width:min(520px,92vw);width:100%}
dialog::backdrop{background:rgba(0,0,0,.45)}
dialog form,dialog .box{padding:18px 20px}
dialog h2{margin-top:0}
dialog .buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}

/* notifications */
#toasts{position:fixed;left:0;right:0;bottom:16px;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;z-index:20}
.toast{background:var(--fg);color:var(--bg);padding:9px 16px;border-radius:10px;box-shadow:0 4px 18px rgba(0,0,0,.25);max-width:90vw;pointer-events:auto}
.toast.bad{background:var(--bad);color:#fff}

/* paramètres : listes de valeurs */
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:3px 4px 3px 12px}
.chip button{border:0;background:none;color:var(--muted);cursor:pointer;padding:2px 6px;border-radius:999px;font:inherit}
.chip button:hover{color:var(--bad)}
.grid5{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}

/* aide */
.help{max-width:820px}
.help h2.t1{font-size:1.35rem;margin-top:28px}.help h3.t2{font-size:1.1rem;margin-top:18px}
.help img{max-width:100%;height:auto;border-radius:8px;margin:6px 0}
.help hr{border:0;border-top:1px solid var(--line);margin:14px 0}
.help .cols{display:grid;gap:10px 16px;align-items:start}

@media (max-width:600px){
  main{padding:12px 10px}
  .cards{grid-template-columns:1fr}
}

/* édition d'un match */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 28px;align-items:start}
@media (max-width:760px){.form-grid{grid-template-columns:1fr}}
fieldset{border:0;padding:0;margin:0 0 14px}
fieldset>legend{font-size:.88rem;color:var(--muted);padding:0;margin-bottom:6px}
.choices{display:flex;flex-wrap:wrap;gap:6px}
.choice{position:relative}
.choice input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.choice span{display:inline-block;border:1px solid var(--line);border-radius:10px;padding:7px 12px;background:var(--bg)}
.choice input:checked+span{background:#e3e7ec;border-color:#6b7685;color:var(--fg);font-weight:500}
.choice input:checked+span::before{content:"\2713\00a0";color:#4a5563}
.choice input:focus-visible+span{outline:2px solid var(--brand);outline-offset:2px}
.choice input:disabled+span{opacity:.45}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.swatch{position:relative;width:34px;height:34px}
.swatch input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.swatch span{display:block;width:100%;height:100%;border-radius:50%;border:2px solid var(--line)}
.swatch input:checked+span{border-color:var(--fg);box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--brand)}
.swatch input:focus-visible+span{outline:2px solid var(--brand);outline-offset:3px}
.scores{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.teams2p{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start;margin-top:8px}
@media (max-width:900px){.teams2p{grid-template-columns:1fr}}
.tcard{border:1px solid var(--line);border-radius:12px;padding:12px 14px 8px;background:color-mix(in srgb,var(--fg) 2.5%,var(--bg))}
.tcard-head{position:relative;min-height:34px;margin-bottom:6px;display:flex;align-items:center}
.tcard-head svg{position:absolute;top:50%;left:calc(100% / 6);transform:translate(-50%,-50%)}
.tcard-head.mirror svg{left:auto;right:calc(100% / 6);transform:translate(50%,-50%)}
.tcard-head h3{flex:1;min-width:0;padding-left:calc(100% / 6 + 24px)}
.tcard-head.mirror h3{padding-left:0;padding-right:calc(100% / 6 + 24px);text-align:right}
.tcard-head h3{margin:0;font-size:1.1rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));justify-items:center;align-items:center;padding:5px 0;border-top:1px solid var(--line)}
.prow.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.prow.heads{border-top:0;border-bottom:2px solid var(--line);padding:2px 0 8px}
.prow.off .pbtn:not(.s0){opacity:1}
.prow .hd{display:flex;flex-direction:column;align-items:center;line-height:1.15}
.prow .hd .lbl{font-size:.74rem;color:var(--muted)}
.prow .hd b{font-size:1.25rem;font-weight:500}
.prow .hd i{font-style:normal;font-size:.76rem;color:var(--muted)}
.prow .hd.bad b{color:var(--bad)}
.pbtn{width:42px;height:42px;border-radius:50%;border:2px solid #9aa4b0;background:var(--bg);color:var(--fg);font:inherit;font-weight:600;cursor:pointer;padding:0;display:grid;place-items:center}
.pbtn:hover{border-color:#6b7685}
.pbtn.tri{font-size:.72rem;letter-spacing:-.02em}
.pbtn.s1{background:#7bb972;border-color:#4f9446;color:#10151a}
.pbtn.s2{background:#f2ab47;border-color:#d98f26;color:#10151a}
.pbtn.on{background:#7bb972;border-color:#4f9446;color:#10151a}
.pbtn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.sticky-actions{position:sticky;bottom:0;background:var(--bg);border-top:1px solid var(--line);padding:10px 0;margin-top:16px;display:flex;gap:8px;z-index:3}

/* consultation d'un match (modele v2 : blocs Resultat, Fil, Performances, Carte, Details en onglets) */
.vpage{max-width:900px;margin:0 auto}
.vhead{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.vhead h1{margin:0;flex:1;font-size:1.3rem;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vtabs{display:flex;gap:6px;overflow-x:auto;padding:2px 0 10px;position:sticky;top:56px;background:var(--bg);z-index:4}
.vtab{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-size:.9rem;padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--fg);cursor:pointer;white-space:nowrap;min-width:0}
.vtab svg{flex:none}
@media (max-width:600px){.vtab span{display:none}.vtab.on span{display:inline}.vtab{flex:1 1 0;padding:7px 8px}.vtab.on{flex:2.4 1 0}}
.vtab.on{background:#e3e7ec;border-color:#6b7685;font-weight:500}
.vblock{background:var(--bg);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:14px 16px;margin:0 0 16px}
.vtitle{margin:0 0 4px;text-align:center;font-size:1.1rem;font-weight:700}
.vsub{margin:0 0 14px;text-align:center;font-size:.9rem;color:var(--muted)}
.vtools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 12px}
.vtools:empty{display:none}
.sticky-actions.vtools{margin:16px 0 0}
.rbtn{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:var(--bg);color:var(--fg);cursor:pointer;flex:none;padding:0;text-decoration:none}
.rbtn:hover{background:var(--card)}
.rbtn .rbl{display:none}
@media (min-width:700px){.rbtn{width:auto;height:38px;padding:0 16px;gap:8px;border-radius:999px;display:inline-flex;align-items:center}.rbtn .rbl{display:inline;font-size:.95rem}}
.rbtn.pink{background:#fdecf2;border-color:var(--accent);color:var(--accent)}
.rbtn.danger{color:var(--bad);border-color:var(--bad)}
.rbtn.ok{color:var(--brand);border-color:var(--brand)}
@media (max-width:480px){.vtools .btn{padding:7px 10px;font-size:.9rem}}
/* resultat : tableau d'affichage */
.rdate{text-align:center;font-size:1.05rem;color:var(--muted);margin:0 0 8px}
.rowner{text-align:center;font-size:.8rem;color:var(--muted);margin-top:-6px}
.rhead{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin-bottom:6px}
.rteam{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.rtname{font-size:1.1rem;font-weight:500;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rscore{font-size:2.4rem;font-weight:500;letter-spacing:-.02em;background:color-mix(in srgb,var(--fg) 6%,var(--bg));border-radius:16px;padding:4px 16px;white-space:nowrap;font-variant-numeric:tabular-nums}
.rscore i{font-style:normal;color:var(--muted);margin:0 8px}
.rscore .win{color:#33691e;font-weight:700}
.rscore.vs{font-size:1.4rem;color:var(--muted);text-transform:uppercase}
.rsec{font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);text-align:center;margin:18px 0 6px;position:relative}
.rsec::before,.rsec::after{content:"";position:absolute;top:50%;width:calc(50% - 70px);border-top:1px solid var(--line)}
.rsec::before{left:0}.rsec::after{right:0}
.rln{display:grid;grid-template-columns:1fr minmax(120px,auto) 1fr;align-items:center;text-align:center;min-height:36px;font-size:1.05rem}
.rmid{color:var(--muted);font-size:.95rem;padding:0 6px}
.rchip{display:inline-block;min-width:34px;padding:2px 10px;border-radius:999px;background:color-mix(in srgb,var(--fg) 7%,var(--bg));font-weight:500;font-variant-numeric:tabular-nums}
.rchip.z{opacity:.4;font-weight:400}
.rbin{display:inline-block;width:18px;height:28px;border:1px solid #212121;vertical-align:middle}
.whistle{height:32px;width:auto;vertical-align:middle}
/* fil du match : axe central, equipe 1 a gauche et equipe 2 a droite (y compris sur mobile) */
.yarn{padding:10px 12px 12px}
.yrow{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr);align-items:center;min-height:58px}
.yrow::before{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:2px solid #9aa4b0;transform:translateX(-1px)}
.ymid{position:relative;z-index:1;display:grid;place-items:center}
.ypill{background:var(--bg);border:1px solid #6b7685;border-radius:999px;padding:2px 8px;font-size:.8rem;font-variant-numeric:tabular-nums;line-height:1.3}
.yside{padding:4px 8px;min-width:0}
.yside{position:relative}
.yside.t1{text-align:right;border-right:3px solid var(--tc,transparent);margin-right:2px}
.yside.t2{text-align:left;border-left:3px solid var(--tc,transparent);margin-left:2px}
/* equipe en blanc : barre blanche entouree d'un fin liseret sombre (invisible sinon sur fond blanc) */
.yside.tc-white::after{content:"";position:absolute;top:0;bottom:0;width:3px;box-shadow:0 0 0 1px #212121;pointer-events:none}
.yside.t1.tc-white::after{right:-3px}
.yside.t2.tc-white::after{left:-3px}
.ylabel{font-weight:700;text-transform:uppercase;color:var(--accent);font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yscore{font-weight:700;color:#4f8f2a}
.ysub{font-weight:700;color:#33691e;font-size:.92rem}
.ymarked{font-weight:700;color:#e68a00;font-size:.92rem}
.cancelled{text-decoration:line-through 2px #e53935}
.ybinrow{display:flex;align-items:center;gap:8px}
.yside.t1 .ybinrow{justify-content:flex-end}
.ybin{position:relative;display:inline-block;width:30px;height:40px;border:1px solid #111;flex:none;overflow:hidden}
.ybin.crossed::before,.ybin.crossed::after{content:"";position:absolute;left:-10px;right:-10px;top:50%;height:4px;background:#e53935;transform:rotate(49deg)}
.ybin.crossed::after{transform:rotate(-49deg)}
.yplayer{font-size:1.1rem;font-weight:700}
.ywhistle{height:28px;width:auto}
.ysum{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:8px;margin:0 0 8px;padding:0 4px}
.ysum-c{display:flex;flex-direction:column;align-items:center}
.ystem{display:block;width:2px;height:12px;background:#9aa4b0}
.ybubble{border:1.5px solid #6b7685;border-radius:999px;padding:3px 14px;font-weight:500;font-size:.9rem;white-space:nowrap;background:var(--bg);font-variant-numeric:tabular-nums}
.ysum-r{text-align:right;font-weight:500;font-size:.9rem;padding-bottom:4px}
.ysum-l{text-align:left;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.yphase{margin:0 0 10px;padding:8px 12px;border-radius:10px;background:#eef1f5}
.yph-line{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.yph-l{text-align:left;font-size:1rem;font-weight:500}
.yph-r{text-align:right;font-size:.95rem}
.yph-c{text-align:center;font-size:.9rem;white-space:nowrap}
.ystatus{font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:1rem;text-align:center}
.yph-line.sub{margin-top:2px;color:var(--muted)}
.yph-line.total{color:var(--fg);font-weight:500}
@media (max-width:480px){
  .yrow{grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr)}
  .ylabel,.ysub,.ymarked{font-size:.82rem}
  .yplayer{font-size:1rem}
}
/* moderation assistee */
.moderation .modsec{margin:0 0 26px}
.moderation .modhead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 6px}
.moderation .modhead h2{margin:0;font-size:1.25rem;color:var(--brand);flex:1 1 auto}
.moderation .hint{margin:0 0 12px}
.modrow{display:flex;gap:10px;align-items:flex-start;margin:0 0 10px}
.modrow>input{margin-top:30px;width:20px;height:20px;flex:none}
.modcard{flex:1 1 auto;min-width:0;margin:0 0 10px}
.modrow .modcard{margin:0}
.modmetrics,.modreasons{display:flex;gap:6px;flex-wrap:wrap;padding:6px 4px 0}
.chip2.warn{background:#fff3e0;border-color:#ef6c00;color:#8a4a00}
.modundo{display:flex;gap:10px;align-items:center;margin:0 0 14px}
/* progression : graphiques match apres match */
.trends .tkpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:6px 0 14px}
.tcard{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:0 0 14px}
.tcard h2{font-size:1.05rem;margin:0;color:var(--brand)}
.tcard .tsub{margin:2px 0 8px;color:var(--muted);font-size:.85rem}
.tchart{width:100%;height:auto;display:block;color:var(--fg)}
/* performances : analyse de l'effort */
.effort{margin-top:6px}
.zbars{display:grid;gap:8px;margin:10px 0 14px}
.zbar{display:grid;grid-template-columns:28px 1fr 56px;gap:8px;align-items:center;font-size:.85rem}
.zbar i{font-style:normal;color:var(--muted)}
.zbar b{font-weight:500;font-variant-numeric:tabular-nums;text-align:right}
.zstack{display:flex;height:16px;border-radius:8px;overflow:hidden;background:var(--line)}
.ztable-wrap{overflow-x:auto;margin:0 0 14px}
.ztable{width:100%;border-collapse:collapse;font-size:.88rem;font-variant-numeric:tabular-nums}
.ztable th,.ztable td{padding:6px 8px;text-align:center;border-bottom:1px solid var(--line)}
.ztable thead th{color:var(--muted);font-weight:500;font-size:.8rem}
.ztable tbody th{text-align:left;font-weight:500;white-space:nowrap}
.ztable .zsub{font-size:.74rem;color:var(--muted)}
.ztable .ztot{font-weight:500}
.zchip{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:8px;vertical-align:-1px}
.zh{font-size:1rem;margin:0 0 6px;color:var(--brand)}
.zd.up{color:#2e7d32}.zd.down{color:#c62828}.zd.flat{color:var(--muted)}
.ptile.khr{border-bottom-color:#e53935}
.effort .ptiles .ptile.khr{grid-column:span 2}
.ptile.khi{border-bottom-color:#ef6c00}.ptile.ksp{border-bottom-color:#c62828}
.effort .ptiles{margin:0 0 14px}
.effort .ptiles .ptile{grid-column:span 3}
/* performances : vignettes de synthese et details repliables par periode */
/* ligne 1 : 80 / 100 / 120 % de la VMA ; ligne 2 : distance parcourue et vitesse max (6 colonnes : 3 x 2 puis 2 x 3) */
.ptiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.ptiles .ptile{grid-column:span 2}
.ptiles .ptile.kd,.ptiles .ptile.kv{grid-column:span 3}
.ptile.kd{border-bottom-color:#8e24aa}
@media (max-width:520px){.ptiles .ptile{grid-column:span 6}.ptiles .ptile.kd,.ptiles .ptile.kv{grid-column:span 3}}
.ptile{background:color-mix(in srgb,var(--fg) 3%,var(--bg));border-radius:12px;padding:10px 8px 8px;text-align:center;border-bottom:4px solid var(--line);min-width:0}
.ptile.k80{border-bottom-color:#cfd8dc}.ptile.k100{border-bottom-color:#80cbc4}.ptile.k120{border-bottom-color:#aed581}.ptile.kv{border-bottom-color:#1565c0}
.plb{display:block;font-size:.8rem;color:var(--muted)}
.ptile b{display:block;font-size:1.9rem;font-weight:500;line-height:1.15;font-variant-numeric:tabular-nums}
.punit{font-size:.72rem;color:var(--muted)}
.pper{display:flex;justify-content:center;gap:2px;margin-top:6px;flex-wrap:nowrap}
.pcell{display:flex;flex-direction:column;align-items:center;min-width:26px;font-size:.78rem;font-variant-numeric:tabular-nums;line-height:1.2}
.pcell i{font-style:normal;font-size:.62rem;color:var(--muted)}
.pcell.ot{border-left:1px solid #9aa4b0;margin-left:3px;padding-left:5px}
.sub2{margin-top:18px}
.pacc{border:1px solid var(--line);border-radius:10px;margin-bottom:8px;overflow:hidden}
.pacc summary{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;font-weight:700;cursor:pointer;background:var(--bg);list-style:none}
.pacc[open] summary{border-bottom:1px solid var(--line)}
.pacc summary::-webkit-details-marker{display:none}
.pacc summary svg{transition:transform .15s}
.pacc[open] summary svg{transform:rotate(180deg)}
.pruns{padding:4px 6px 6px}
.prun{display:grid;grid-template-columns:54px 56px 1fr 86px;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;margin-top:4px;background:#f5f6f8}
.prun.d-vma{background:#e0f2f1}.prun.d-high{background:#f1f8e9}
.pmin{font-weight:500;font-variant-numeric:tabular-nums}
.ppct{text-align:center;font-size:.8rem;font-weight:500;background:#fff;border:1px solid var(--line);border-radius:6px;padding:2px 0}
.pdur{text-align:center;font-weight:700;font-size:1rem;font-variant-numeric:tabular-nums}
.pspd{display:flex;flex-direction:column;text-align:right;line-height:1.25;font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums}
.pspd span:first-child{color:var(--fg);font-weight:500;font-size:1rem}
.ptabs{margin:6px 0 10px}
.seg3{display:grid;grid-template-columns:repeat(var(--n,3),1fr);background:color-mix(in srgb,var(--fg) 6%,var(--bg));border-radius:12px;padding:3px;gap:2px}
.seg3b{font:inherit;font-size:.9rem;padding:7px 4px;border:0;border-radius:9px;background:transparent;color:var(--muted);cursor:pointer}
.seg3b.on{background:var(--bg);color:var(--fg);font-weight:500;box-shadow:0 0 0 1px #9aa4b0}
/* carte Google (memes pictogrammes et bulles que la v2) */
.gm-wrap{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg)}
.gmap{width:100%;height:clamp(260px,calc(100svh - 350px),680px);background:#dfe5ea}
.gm-legend{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap;padding:6px 8px;font-size:.78rem;color:var(--muted);border-top:1px solid var(--line)}
.gm-legend i{display:inline-block;width:18px;height:5px;border-radius:3px;margin-right:5px;vertical-align:middle}
.gm-controls{padding:0 12px 6px;border-top:1px solid var(--line)}
.gm-m{position:absolute;transform:translate(-50%,-50%);cursor:pointer;display:grid;place-items:center}
.gm-m.round{width:32px;height:32px;border-radius:50%;box-shadow:0 0 0 2px #fff}
.gm-m.pin{width:40px;height:40px}
.gm-m.pin.start{color:#1efe1e}.gm-m.pin.end{color:#ff1616}
.gm-m.pin svg{filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff)}
.gm-m.bin{height:25px}
.gm-m.bin span{display:block;width:15px;height:20px;border:1px solid #212121;box-shadow:0 0 0 2px #fff}
.gm-popup{position:absolute;transform:translate(-50%,calc(-100% - 20px));background:#fff;color:#111;min-width:160px;max-width:250px;padding:0;border-radius:12px;box-shadow:0 4px 10px rgba(0,0,0,.35);z-index:1000}
.gm-popup::after{content:"";position:absolute;left:50%;bottom:-8px;margin-left:-8px;border:8px solid transparent;border-bottom:0;border-top-color:#fff}
.gm-close{position:absolute;right:6px;top:4px;border:0;background:none;font-size:1.3rem;line-height:1;color:#666;cursor:pointer;padding:2px 6px}
.gm-speed{position:absolute;transform:translate(-50%,-100%);background:#fff;color:#000;padding:5px;border-radius:8px;box-shadow:0 4px 6px rgba(0,0,0,.2);font-size:9px;text-transform:uppercase;letter-spacing:.08em;line-height:1;white-space:nowrap}
.pp-card{overflow:hidden;border-radius:12px}
.pp-head{display:flex;align-items:center;gap:8px;background:#eef1f5;padding:7px 30px 7px 10px}
.pp-name{font-weight:500;font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-row{display:flex;align-items:center;gap:10px;padding:10px 12px}
.pp-phase{padding:8px 12px 10px}
.pp-phase .yph-line{padding-right:18px}
.pp-meta{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:6px;font-size:.88rem}
.pp-meta.total{font-weight:500}
.pp-meta .ysum-l{margin-right:auto}
.gm-playrow{position:absolute;left:50%;top:24px;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;gap:8px;height:30px;cursor:default;z-index:2}
.gm-btn{display:grid;place-items:center;background:none;border:0;color:#004080;cursor:pointer;padding:0}
.gm-playlabel{padding:0 12px;font-size:1rem}
.gm-slider{position:relative;height:66px;margin:0 14px;touch-action:none;cursor:pointer}
.gm-rail,.gm-active{position:absolute;top:54px;height:4px;border-radius:2px;transform:translateY(-50%)}
.gm-rail{left:0;right:0;background:#9fb4d4}
.gm-active{background:#004080}
.gm-thumb{position:absolute;top:54px;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:#004080;cursor:grab;touch-action:none;outline:none}
.gm-thumb:focus-visible{box-shadow:0 0 0 6px rgba(0,64,128,.25)}
.gm-bubble{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);background:#616161;color:#fff;font-size:.85rem;padding:3px 8px;border-radius:4px;white-space:nowrap;opacity:0;pointer-events:none;font-variant-numeric:tabular-nums}
.gm-bubble::after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border:5px solid transparent;border-top-color:#616161}
.gm-thumb:hover .gm-bubble,.gm-thumb.drag .gm-bubble,.gm-thumb:focus-visible .gm-bubble,.gm-slider.playing .gm-bubble{opacity:1}
.gm-thumb.drag{cursor:grabbing}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
canvas.map{width:100%;height:min(60vh,420px);border:1px solid var(--line);border-radius:var(--radius);display:block}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:.82rem;color:var(--muted);margin-top:6px}
.legend i{display:inline-block;width:18px;height:6px;border-radius:3px;margin-right:4px;vertical-align:middle}
.legend i.c1{background:#2e7d32}.legend i.c2{background:#f9a825}.legend i.c3{background:#ef6c00}.legend i.c4{background:#c62828}


/* liste de matchs : regroupee par mois, une ligne par match, colonnes alignees */
.mbar{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:6px}
.segs{display:flex;gap:6px;flex-wrap:wrap}
.seg{font:inherit;font-size:.85rem;padding:5px 14px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--fg);cursor:pointer}
.seg.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.mmonth{margin:18px 4px 4px;font-size:.8rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.mrow{display:grid;grid-template-columns:62px minmax(0,1fr) 230px;grid-template-areas:"when match act";gap:18px;align-items:center;padding:12px 8px;border-bottom:1px solid var(--line)}
.mrow.go{cursor:pointer}
.mrow:hover{background:color-mix(in srgb,var(--brand) 5%,var(--bg))}
.mrow .when{grid-area:when;text-align:center;line-height:1.1}
.mrow .when b{display:block;font-size:1.35rem;font-weight:500}
.mrow .when span{display:block;font-size:.72rem;text-transform:uppercase;color:var(--muted)}
.mrow .when i{display:block;font-style:normal;font-size:.74rem;color:var(--muted);margin-top:2px}
.mrow .when .yr{display:none}
.mrow .match{grid-area:match}
.mrow .vsline{display:grid;grid-template-columns:minmax(0,1fr) 150px minmax(0,1fr);align-items:center;gap:14px}
.mrow .team{display:flex;align-items:center;gap:10px;min-width:0;font-size:1.1rem}
.mrow .team.l{justify-content:flex-end;text-align:right}
.mrow .team svg{flex:none}
.mrow .team .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mrow .score{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;background:color-mix(in srgb,var(--fg) 6%,var(--bg));border-radius:12px;padding:5px 12px;font-variant-numeric:tabular-nums}
.mrow .score b{font-size:1.6rem;font-weight:500;line-height:1.2}
.mrow .score b:first-child{text-align:right}
.mrow .score i{font-style:normal;color:var(--muted);font-size:1.2rem}
.mrow .score .win{color:#33691e;font-weight:700}
.mrow .score.vs{display:block;text-align:center;color:var(--muted);font-size:1rem;text-transform:uppercase;letter-spacing:.06em;padding:9px 12px}
.mrow .meta{display:flex;gap:6px;justify-content:center;align-items:center;margin-top:8px;flex-wrap:wrap}
.mrow .owner{font-size:.78rem;color:var(--muted);margin-right:4px}
.mrow .act{grid-area:act;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;justify-content:flex-end}
.mrow .act .wbtn{flex:none;width:150px;box-sizing:border-box}
.mperf{order:-1;flex:none;width:150px;box-sizing:border-box;padding:6px 12px;border:1px solid var(--line);border-radius:5px;display:flex;flex-direction:column;align-items:flex-end;gap:1px;text-align:right;line-height:1.3;font-size:.94rem;font-weight:600;color:var(--fg);font-variant-numeric:tabular-nums;min-height:0}
.mperf span{white-space:nowrap}
.mperf:empty{visibility:hidden}
.mrow .edit{width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;text-decoration:none;flex:none}
.mrow .edit-spacer{width:34px;flex:none}
.chip2{background:color-mix(in srgb,var(--brand) 20%,var(--bg));color:color-mix(in srgb,var(--brand) 70%,var(--fg));border-radius:999px;padding:2px 10px;font-size:.82rem}
@media (max-width:1100px){
  .mrow{grid-template-columns:62px minmax(0,1fr) 210px;gap:12px}
  .mrow .vsline{grid-template-columns:minmax(0,1fr) 130px minmax(0,1fr);gap:10px}
}
/* telephone : retour a la logique « bloc » de la v2 (date et crayon en tete, opposition centree, bouton et puces en pied) */
@media (max-width:760px){
  .mrow{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:none;gap:10px 8px;padding:10px 12px 12px;margin:0 0 12px;
    background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
  .mrow:hover{background:var(--bg)}
  .mrow .match,.mrow .act{display:contents}
  .mrow .when{grid-area:auto;grid-column:1/-1;grid-row:1;display:flex;gap:6px;justify-content:center;align-items:baseline;text-align:center;padding:0 40px;min-height:34px;align-self:center}
  .mrow .when b,.mrow .when span,.mrow .when i,.mrow .when em{display:inline;margin:0;font-size:1.05rem;font-style:normal;color:var(--fg);text-transform:none}
  .mrow .when .yr{display:inline}
  .mrow .when i::before{content:"· "}
  .mrow .edit{grid-column:2;grid-row:1;justify-self:end;align-self:center}
  .mrow .edit-spacer{display:none}
  .mrow .vsline{grid-column:1/-1;grid-row:2;grid-template-columns:minmax(0,1fr) 112px minmax(0,1fr);gap:8px}
  .mrow .team{gap:6px;font-size:1.05rem}
  .mrow .team .nm{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.15;overflow-wrap:anywhere}
  .mrow .score b{font-size:1.4rem}
  .mrow .act .wbtn{grid-column:1;grid-row:3;justify-self:start;padding:7px 12px;font-size:.85rem}
  .mrow .meta{grid-column:2;grid-row:3;margin:0;justify-content:flex-end;flex-wrap:nowrap}
  .mrow .owner{display:none}
  .mrow .mperf{grid-column:1/-1;grid-row:4;flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:4px 12px;justify-content:center;text-align:left;line-height:normal;font-size:.86rem;width:auto;margin:0;padding:0;border:0}
}
/* bouton principal de la carte et choix de montre */
.wbtn{display:flex;align-items:center;gap:8px;justify-content:flex-start;flex:0 1 55%;min-width:0;padding:7px 12px;border:1px solid var(--brand);background:var(--bg);color:var(--brand);border-radius:5px;text-transform:uppercase;letter-spacing:.03em;font:inherit;font-size:.88rem;cursor:pointer;text-decoration:none;line-height:1.2}
.wbtn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wbtn:hover:not([disabled]){background:color-mix(in srgb,var(--brand) 8%,var(--bg))}
.wbtn.todo{border-color:var(--accent);color:var(--accent)}
.wbtn.todo:hover:not([disabled]){background:color-mix(in srgb,var(--accent) 8%,var(--bg))}
.wbtn[disabled]{background:color-mix(in srgb,var(--brand) 22%,var(--bg));cursor:default}
/* liste de choix de montre (comme la liste MUI de la v2) */
.pick{list-style:none;margin:0 -20px;padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pick li+li{border-top:1px solid var(--line)}
.pick button{display:flex;align-items:center;gap:14px;width:100%;background:none;border:0;color:var(--fg);padding:10px 20px;font:inherit;cursor:pointer;text-align:left}
.pick button:hover{background:color-mix(in srgb,var(--brand) 9%,var(--bg))}
.pick .ava{width:40px;height:40px;border-radius:50%;background:color-mix(in srgb,var(--brand) 22%,var(--bg));color:var(--brand);display:grid;place-items:center;flex:none}

/* liste des montres : une ligne par montre, vignette du modele a gauche */
.wrow{display:grid;grid-template-columns:80px minmax(0,1fr) auto;gap:16px;align-items:center;padding:12px 8px;border-bottom:1px solid var(--line)}
.wrow:hover{background:color-mix(in srgb,var(--brand) 5%,var(--bg))}
.wrow .wimg{width:80px;height:80px;object-fit:contain;display:block;justify-self:center}
.wrow .wimg.ph{display:grid;place-items:center;border-radius:50%;width:64px;height:64px;background:color-mix(in srgb,var(--brand) 14%,var(--bg));color:var(--brand)}
.wrow .wtitle{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:2px}
.wrow .wtitle h3{margin:0;font-size:1.1rem;font-weight:500}
.wrow .meta{font-size:.85rem;color:var(--muted)}
.wrow .actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:760px){
  .wlist .wrow{grid-template-columns:80px minmax(0,1fr);margin:0 0 12px;padding:10px 12px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
  .wrow .actions{grid-column:1/-1;justify-content:flex-end}
}

/* page d'edition : bouton Annuler bien visible dans l'en-tete (c'est une page, plus un popup) */
.closebtn{display:inline-flex;align-items:center;gap:8px;margin-left:auto;text-decoration:none;background:#1565c0;color:#fff;border-color:#1565c0;font-weight:500;padding:9px 18px;border-radius:999px;font-size:.95rem}
.closebtn:hover{background:#0d47a1;border-color:#0d47a1;color:#fff}
@media (max-width:480px){.closebtn span{display:none}.closebtn{padding:9px}}

/* reglages de la montre : un bloc par raccourci, une ligne par choix */
.optgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:6px}
.optcard{border:1px solid var(--line);border-radius:12px;padding:12px 14px 14px;margin:0;background:color-mix(in srgb,var(--fg) 2.5%,var(--bg));min-width:0}
.optcard>legend{float:left;width:100%;padding:0;margin:0 0 10px;font-size:.95rem;font-weight:500;color:var(--fg)}
.optcard>legend+*{clear:both}
.choices.col{flex-direction:column;align-items:stretch;gap:6px}
.optcard .choice span{display:block;background:var(--bg)}

/* edition d'un match : blocs, maillots */
.blk{border:1px solid var(--line);border-radius:12px;padding:14px 16px 6px;margin:0 0 14px;background:color-mix(in srgb,var(--fg) 2.5%,var(--bg))}
.blk>h3{margin:0 0 10px;font-size:.95rem;font-weight:500}
.blk>input{width:100%;margin-bottom:10px}
.blk .choices{margin-bottom:12px}
.pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:4px 16px}
.jerseys{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-bottom:12px;justify-items:center}
.jsy{position:relative;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;cursor:pointer}
.jsy input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.jsy:has(input:checked){background:#e3e7ec;box-shadow:0 0 0 2px #6b7685}
.jsy:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:2px}
.blk .scores{margin-bottom:12px}

/* mon compte et parametres : blocs */
.acc-profile{display:flex;gap:16px;align-items:center;padding:14px 16px}
.acc-id{min-width:0}
.acc-name{font-size:1.35rem;line-height:1.2;overflow:hidden;text-overflow:ellipsis}
.acc-mail{font-size:.9rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.acc-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.acc-badges .b{font-size:.78rem;padding:2px 10px;border-radius:999px;background:color-mix(in srgb,var(--fg) 6%,var(--bg));border:1px solid var(--line)}
.blkform{display:block;padding-bottom:10px}
.blkform .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vma-row{display:flex;align-items:center;gap:12px;margin:2px 0 4px}
.vma-row .lbl{font-size:.88rem;color:var(--muted)}
.vma-row input[type=number]{width:84px;flex:none}
.vmarange{flex:1;min-width:80px;accent-color:#004080}
.vma-th{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0 14px}
.vma-th div{text-align:center;border-radius:10px;padding:8px 4px;background:color-mix(in srgb,var(--fg) 4%,var(--bg));border-bottom:4px solid var(--line)}
.vma-th span{display:block;font-size:.78rem;color:var(--muted)}
.vma-th b{display:block;font-size:1.3rem;font-weight:500;font-variant-numeric:tabular-nums}
.vma-th i{font-style:normal;font-size:.72rem;color:var(--muted)}
.vma-th .t1{border-bottom-color:#aed581}.vma-th .t2{border-bottom-color:#fdd835}.vma-th .t3{border-bottom-color:#e53935}
.meter{height:5px;border-radius:3px;background:color-mix(in srgb,var(--fg) 8%,var(--bg));margin:-6px 0 12px;overflow:hidden}
.meter i{display:block;height:100%;border-radius:3px;width:0;transition:width .15s}
.meter i.m1{width:33%;background:#e53935}.meter i.m2{width:66%;background:#f9a825}.meter i.m3{width:100%;background:#4f9446}
.feat{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.fchip{font:inherit;font-size:.85rem;padding:4px 12px;border-radius:999px;background:#e3e7ec;border:1px solid #6b7685;font-weight:500;cursor:help;color:var(--fg)}
.fchip:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.fchip.off{background:transparent;border-color:var(--line);color:var(--muted);font-weight:400}

/* FAQ : cartes video */
.faq-search{width:100%;border-radius:999px;padding-left:16px}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.vgrid .empty{grid-column:1/-1}
.vcard{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:14px;overflow:hidden;color:inherit;text-decoration:none;box-shadow:var(--shadow)}
.vcard:hover{border-color:#9aa4b0}
.vcard:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.vthumb{position:relative;aspect-ratio:16/10;background:#cfd8dc;overflow:hidden;display:grid;place-items:center}
.vthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vplay{position:relative;width:48px;height:48px;border-radius:50%;background:rgba(0,0,0,.58);color:#fff;display:grid;place-items:center}
.vcard:hover .vplay{background:var(--brand)}
.vbody{padding:10px 12px 12px}
.vtitle{margin:0;font-size:1rem;font-weight:500;color:var(--accent);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vdesc{margin:4px 0 0;font-size:.85rem;color:var(--muted);line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:600px){
  .vgrid{grid-template-columns:1fr;gap:10px}
  .vcard{flex-direction:row;align-items:stretch}
  .vthumb{width:112px;aspect-ratio:auto;flex:none;min-height:84px}
  .vplay{width:36px;height:36px}
  .vplay svg{width:20px;height:20px}
  .vbody{padding:8px 10px;min-width:0}
}

/* aide : cartes, sommaire collant, gabarits */
.help-toc{position:sticky;top:56px;z-index:5;display:flex;gap:6px;overflow-x:auto;padding:8px 0;margin:0 0 10px;background:var(--bg);scrollbar-width:thin}
.toc-chip{flex:none;max-width:230px;font:inherit;font-size:.85rem;padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--fg);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toc-chip.on{background:#e3e7ec;border-color:#6b7685;font-weight:500}
.hcard{background:var(--bg);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:14px 16px;margin:0 0 14px;scroll-margin-top:124px}
.hcard h2{margin:0 0 10px;font-size:1.1rem;font-weight:500;display:flex;align-items:center;gap:10px}
.hcard.l1 h2{font-size:1.2rem}
.hbar{display:inline-block;width:6px;height:20px;border-radius:3px;background:#4f9446;flex:none}
.hcard.l1 .hbar{background:#4f9446}.hcard.l2 .hbar{background:#8aa3c2}
.hbody p{margin:.25em 0}
.hbody img{max-width:100%;height:auto;border-radius:8px}
.hsep{border:0;border-top:1px solid var(--line);margin:8px 0}
.hdef{display:grid;grid-template-columns:minmax(100px,26%) 1fr;gap:6px 14px;padding:8px 10px;border-radius:8px}
.hdef:nth-of-type(odd){background:color-mix(in srgb,var(--fg) 3.5%,var(--bg))}
.hdef-l{font-weight:500}
.hdef-r{color:var(--fg)}
.hicon{display:grid;grid-template-columns:64px 1fr;gap:6px 14px;align-items:center;padding:6px 4px}
.hicon-l{display:grid;place-items:center}
.hstep{display:grid;grid-template-columns:34px minmax(0,1fr) minmax(0,1fr);gap:8px 14px;align-items:center;margin:10px 0}
.hnum{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#4f9446;color:#fff;font-weight:500;flex:none}
.hnum.red{background:var(--bg);border:2px solid #e53935;color:#e53935;width:34px;height:34px;font-size:1.05rem}
@media (max-width:640px){
  .hcard{padding:12px}
  .hdef{grid-template-columns:1fr}
  .hicon{grid-template-columns:48px 1fr}
  .hstep{grid-template-columns:34px 1fr}
  .hstep-i{grid-column:1/-1}
}

/* mes montres : etat de connexion, version, match en cours */
.wstate{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:center;margin-top:4px;font-size:.88rem}
.wconn,.wver{display:inline-flex;align-items:center;gap:6px}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none}
.dot.on{background:#2e9d3a;box-shadow:0 0 0 3px color-mix(in srgb,#2e9d3a 22%,transparent)}
.dot.off{background:#b0b7c0}
.vbadge{font-weight:500;font-size:.74rem;border-radius:999px;padding:1px 8px;border:1px solid}
.vbadge.ok{color:#2e7d32;border-color:#7bb972;background:#f1f8e9}
.vbadge.bad{color:var(--bad);border-color:var(--bad);background:#fdecea}
.wmatch{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:3px 10px;border-radius:999px;background:color-mix(in srgb,var(--fg) 5%,var(--bg));border:1px solid var(--line);color:var(--fg);text-decoration:none;font-size:.88rem;max-width:100%}
.wmatch span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px}
.wmatch i{font-style:normal;color:var(--muted)}
.wm-date{color:var(--muted);font-size:.8rem;white-space:nowrap;padding-right:6px;margin-right:2px;border-right:1px solid var(--line)}
@media (max-width:480px){.wmatch{flex-wrap:wrap;border-radius:12px}.wm-date{border:0;padding:0;flex-basis:100%}}
.wmatch:hover{border-color:#9aa4b0}

/* mes montres : etat vide */
.wempty{text-align:center;padding:24px 18px;max-width:560px;margin:10px auto}
.wempty-ic{width:72px;height:72px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--brand) 14%,var(--bg));color:var(--brand)}
.wempty h2{margin:0 0 14px;font-size:1.2rem;font-weight:500}
.wempty-cta{display:flex;justify-content:center;margin-top:22px}
.wsteps{list-style:none;margin:0;padding:0;text-align:left;display:grid;gap:12px}
.wsteps li{display:flex;gap:12px;align-items:center}

/* montre inactive : bien visible */
.tag.off{color:var(--bad);border-color:var(--bad);background:#fdecea;font-weight:600}
.wrow.inactive{box-shadow:inset 4px 0 0 var(--bad);background:#fff8f7}
.wrow.inactive:hover{background:#fff1ef}
.wrow.inactive .wimg{filter:grayscale(1);opacity:.6}

/* edition d'une montre : en-tete avec photo, interrupteur d'activation */
.wedit-head{display:flex;gap:16px;align-items:center;padding:12px 16px;margin-bottom:14px}
.wedit-head .wimg{width:96px;height:96px;flex:none}
.wedit-head .wimg.ph{width:80px;height:80px}
.wh-info{min-width:0;display:flex;flex-direction:column;gap:2px}
.wh-model{font-size:1.2rem;font-weight:500}
.sw{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:8px;font:inherit;font-size:.9rem;border:1px solid var(--line);background:var(--bg);color:var(--muted);border-radius:999px;padding:3px 12px 3px 4px;cursor:pointer}
.sw .knob{position:relative;width:34px;height:20px;border-radius:999px;background:#b0b7c0;flex:none;transition:background .15s}
.sw .knob::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s}
.sw.on{color:#2e7d32;border-color:#7bb972;font-weight:500}
.sw.on .knob{background:#4f9446}
.sw.on .knob::after{transform:translateX(14px)}
.sw:not(.on){color:var(--bad);border-color:var(--bad);background:#fdecea;font-weight:500}
.sw[disabled]{opacity:.6;cursor:default}

/* utilisateurs (admin) */
.ubar-top{display:flex;gap:10px;align-items:center}
.ubar-top .faq-search{flex:1 1 auto;min-width:0;width:auto}
.sortbox{display:inline-flex;align-items:center;gap:8px;flex:none}
.sorttxt{font-size:.88rem;color:var(--muted);white-space:nowrap}
.selwrap{position:relative;display:inline-flex;flex:none}
.selwrap::after{content:"";position:absolute;right:16px;top:50%;width:7px;height:7px;border-right:2px solid #6b7685;border-bottom:2px solid #6b7685;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.sortsel{-webkit-appearance:none;appearance:none;width:auto;min-height:40px;font:inherit;font-size:.9rem;line-height:1.2;padding:8px 38px 8px 16px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--fg);cursor:pointer}
.ubar-top .faq-search{min-height:40px}
.urow{display:grid;grid-template-columns:44px minmax(0,1fr) minmax(140px,220px) auto;gap:14px;align-items:center;padding:10px 8px;border-bottom:1px solid var(--line)}
.urow:hover{background:color-mix(in srgb,var(--brand) 5%,var(--bg))}
.urow.current{background:color-mix(in srgb,var(--brand) 10%,var(--bg));box-shadow:inset 4px 0 0 var(--brand)}
.uava{width:40px;height:40px;border-radius:50%;background:#c8d6e5;color:#33475b;display:grid;place-items:center;font-weight:500;font-size:.9rem}
.uname{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.usub{font-size:.85rem;color:var(--muted);display:flex;align-items:center;gap:6px}
.uact{min-width:0}
.ubar{height:8px;border-radius:4px;background:color-mix(in srgb,var(--fg) 8%,var(--bg));overflow:hidden}
.ubar i{display:block;height:100%;background:var(--brand);border-radius:4px}
.ucnt{font-size:.8rem;color:var(--muted);margin-top:3px;white-space:nowrap}
.ucur{border-color:var(--brand);color:var(--brand);background:color-mix(in srgb,var(--brand) 12%,var(--bg));cursor:default}
.ushort{display:none}
@media (max-width:640px){
  .urow{grid-template-columns:40px minmax(0,1fr) auto;gap:10px}
  .uact{grid-column:2/-1;grid-row:2}
  .ulong{display:none}.ushort{display:inline}
  .ubar-top{flex-wrap:wrap}.ubar-top .faq-search{flex-basis:100%}
  .sortbox{flex:1}.sortbox .selwrap{flex:1}.sortsel{width:100%}
}

/* bandeau « mise a jour montre » : montres concernees et lien du magasin */
.warnlist{list-style:none;margin:6px 0 4px;padding:0;display:grid;gap:2px}
.warnlist li::before{content:"\2192";margin-right:8px;color:var(--warn)}
.warnlist a,.warnlink{color:var(--fg);text-decoration:underline;text-underline-offset:2px;font-weight:500}
.warnlink{display:inline-block;margin-top:4px}

/* fonctions limitees par une montre a mettre a jour */
.fchip.limited{background:#fff4e5;border-color:#ef9f27;color:#7a4a00;display:inline-flex;align-items:center;gap:6px}
.limitbox{margin-top:12px;padding:10px 12px;border:1px solid #ef9f27;border-left-width:4px;border-radius:10px;background:#fffaf2}
.limit-title{display:flex;align-items:center;gap:8px;font-weight:500;color:#7a4a00;margin-bottom:6px}
.limitbox ul{margin:0 0 6px;padding-left:18px;display:grid;gap:4px}
.limitbox a{color:var(--fg);text-decoration:underline;text-underline-offset:2px;font-weight:500}

/* accueil : site vitrine */
.hero-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero .hero-btns{margin-top:4px}
.hero-ghost{background:transparent;border:2px solid rgba(255,255,255,.85);color:#fff;font-weight:500;padding:9px 20px;border-radius:12px}
.hero-ghost:hover{background:rgba(255,255,255,.12)}
.how{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.how li{display:flex;gap:12px;align-items:flex-start}
.how .hnum{width:34px;height:34px;font-size:1rem;flex:none}
.how h3{margin:0 0 4px;font-size:1.02rem}
.how p{margin:0;color:var(--muted);font-size:.93rem}
.after{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.shot{margin:0;background:var(--bg);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.shot-img{aspect-ratio:4/3;overflow:hidden;background:#eef1f5}
.shot-img img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
.shot figcaption{padding:12px 14px 14px}
.shot h3{margin:0 0 4px;font-size:1.05rem}
.shot p{margin:0;color:var(--muted);font-size:.9rem}
.fams{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.fam{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-weight:500}
.fam i{font-style:normal;font-weight:400;font-size:.8rem;color:var(--muted)}
a.fam{color:inherit;text-decoration:none}
a.fam:hover,a.fam:focus-visible{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 8%,var(--card))}
.famgroup{margin-top:18px}
.famtitle{margin:0 0 10px;text-align:center;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.final-cta{margin-top:48px;background:linear-gradient(180deg,var(--hero),color-mix(in srgb,var(--hero) 78%,#000));color:#fff;text-align:center;padding:42px 18px}
.final-cta h2{margin:0 0 8px;font-size:1.7rem;font-weight:600}
.final-cta p{margin:0 auto 18px;max-width:560px;opacity:.95}

/* accueil : l'appel final touche le pied de page ; les autres pages publiques gardent leur marge */
.site-main>*:last-child{margin-bottom:56px}
.site-main>*:has(>.final-cta:last-child){margin-bottom:0}

/* ---- connexion / inscription : formulaire sur la scene du stade (comme les cartes de fonctions) ---- */
.auth-scene::before{height:64px;background:linear-gradient(180deg,var(--brand),rgba(74,124,39,0))}
/* L'arbitre reste dans le premier quart gauche quelle que soit la taille de la fenetre (decalage calcule sur la scene) */
.auth-scene{container-type:inline-size;--sh:max(680px,calc(100dvh - 120px))}
.auth-scene .scene-bg{--iw:max(calc(2.357 * var(--sh)),130cqw);inset:auto;top:0;height:100%;width:var(--iw);max-width:none;object-fit:cover;object-position:left top;
  left:clamp(calc(100cqw - var(--iw)),min(calc(26cqw - .45 * var(--iw)),calc(100cqw - 340px - 5cqw - .66 * var(--iw))),0px)}
/* voile sombre cote formulaire : les tribunes s'effacent, la boite ressort */
.auth-scene::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(8,20,12,0) 30%,rgba(8,20,12,.55) 100%)}
.site-main>.auth-scene:last-child{margin-bottom:0}
.auth-scene .scene-grid{display:flex;justify-content:flex-end;align-items:center;padding:36px max(26px,5vw)}
.auth-scene .scene-col.flank{display:none}
.auth-slot{display:flex;justify-content:center;min-width:0}
.auth-box{width:100%;max-width:420px;background:rgba(18,24,32,.88);color:#fff;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.45);overflow:hidden}
.auth-box h1{margin:0;padding:18px 24px;background:rgba(0,0,0,.35);font-size:1.6rem;font-weight:600;text-align:center;color:#fff}
.auth-body{padding:22px 24px 24px}
.auth-box label.field{margin:0}
.auth-box label.field>span{color:#d5dbe3}
.auth-box input{background:#fff;color:#12202e;border-color:transparent}
.auth-box .muted,.auth-box .hint{color:#c3cbd6}
.auth-box .err{color:#ffb4b4}
.auth-box a{color:#fff;text-decoration:underline}
.auth-box .btn.block{width:100%;justify-content:center;background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:700;border-radius:999px;padding:11px 18px}
.auth-box .btn.block:hover{filter:brightness(1.12)}
.auth-links{text-align:center;font-size:.92rem}
.auth-alt{text-align:center;color:#c3cbd6;padding-top:12px;margin-top:6px;border-top:1px solid rgba(255,255,255,.18)}
.auth-box .btn:not(.block){color:#fff}
@media (max-width:900px){
  .auth-scene{container-type:normal}
  .auth-scene .scene-bg{inset:auto;left:0;top:auto;width:100%;max-width:100%;height:200px}
  .auth-scene .scene-grid{display:block;padding:0}
  .auth-scene .auth-slot{margin-top:-60px;position:relative;padding:0 12px 24px}
}
/* la scene de connexion occupe toute la hauteur de la fenetre : le pied de page reste en bas, sans bande blanche */
#app:has(.auth-scene){display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
#app:has(.auth-scene) .site-main{flex:1;display:flex;flex-direction:column}
#app:has(.auth-scene) .auth-scene{flex:1}
/* fenetre haute et etroite : l'image est agrandie par la hauteur, la boite descend sur les jambes de l'arbitre */
@media (min-width:901px) and (max-aspect-ratio:1/1){.auth-scene .scene-grid{align-items:flex-end;padding-bottom:40px}}

/* accueil : videos de la FAQ sur une seule ligne (defilement horizontal si elles ne tiennent pas) */
.vrow{display:flex;flex-wrap:nowrap;justify-content:center;gap:16px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:thin}
.vrow .vcard{flex:1 1 0;min-width:240px;max-width:340px}
@media (max-width:640px){.vrow{justify-content:flex-start;scroll-snap-type:x proximity}.vrow .vcard{flex:0 0 78%;max-width:none;scroll-snap-align:start}}

/* mobile : taille figee (pas de zoom ni de defilement lateral), champs date contenus dans leur bloc */
input[type=date],input[type=datetime-local],input[type=time]{-webkit-appearance:none;appearance:none;display:block;width:100%;min-width:0;max-width:100%;min-height:42px;margin:0}
input[type=date]::-webkit-date-and-time-value,input[type=datetime-local]::-webkit-date-and-time-value,input[type=time]::-webkit-date-and-time-value{min-height:1.4em;text-align:center}
@media (pointer:coarse){input,select,textarea{font-size:16px}}  /* sous 16 px, iOS zoome la page au focus et ne revient pas */

/* carte : bouton plein ecran maison */
.gm-fs{position:absolute;top:10px;right:10px;z-index:3;width:42px;height:42px;border-radius:8px;border:0;background:#fff;color:#333;box-shadow:0 1px 5px rgba(0,0,0,.45);display:grid;place-items:center;cursor:pointer;padding:0}
.gm-fs:hover{background:#f1f3f4}
.gm-wrap.gm-full{position:fixed;inset:0;z-index:1000;border:0;border-radius:0;display:flex;flex-direction:column;background:var(--bg);padding-bottom:env(safe-area-inset-bottom)}
.gm-wrap.gm-full .gmap{flex:1;height:auto;min-height:0}
html.gm-lock,html.gm-lock body{overflow:hidden}
.gm-wrap.osm canvas.map{border:0;border-radius:0}
.gm-wrap.osm .legend{margin:0;padding:6px 8px;border-top:1px solid var(--line)}
.gm-wrap.gm-full canvas.map{flex:1 1 0;height:0;min-height:0}

/* Mon espace : pas de pincement ni de defilement lateral de la page (le site public reste agrandissable) */
html.fixed-size{touch-action:pan-y}

.chip2.sport{background:var(--brand,#5b8e3a);color:#fff}
.sportpick{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
button.fab{border:0;cursor:pointer}
.sport-title{display:flex;align-items:center;gap:10px;margin:0 0 6px}
.chip.fixed{opacity:.85}

/* un espace par sport : selecteur dans le bloc de profil du menu (sous l'avatar), couleur d'accent du sport */
.sportlogos{display:flex;gap:8px;padding:0 18px 16px}
.sportlogo{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;height:38px;border-radius:999px;color:#fff;opacity:.78;text-decoration:none;border:2px solid rgba(255,255,255,.35);font-size:.95rem}
.sportlogo:hover{opacity:1;background:rgba(255,255,255,.14)}
.sportlogo.on{opacity:1;background:rgba(255,255,255,.24);border-color:#fff;font-weight:500}
.sportlogo .sl-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top-sport{font-weight:400;opacity:.85}
:root[data-sport="football"]{--brand:#1565a8;--hero:#2b78bf}
:root[data-sport="neutral"]{--brand:#4a5967;--hero:#5d6c7a}
@media (prefers-color-scheme:dark){:root[data-sport="football"]{--brand:#64b5f6;--on-brand:#0a1a2a;--hero:#1c4a73}:root[data-sport="neutral"]{--brand:#a3b1be;--on-brand:#101820;--hero:#3a4753}}
/* choix de sports a la creation du compte (carte sombre) : texte lisible sur les pastilles claires */
.auth-box .choice span{color:#1c2530}
.auth-box .choice input:checked+span{color:#1c2530}
.auth-box fieldset{border:0;padding:0;margin:8px 0}
.auth-box fieldset legend{padding:0;margin:0 0 6px;color:#c7d0d9;font-size:.9rem}
.auth-box fieldset .hint{color:#c7d0d9;margin:8px 0 0}

.sport-feats{list-style:none;margin:8px 0 4px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}
.sport-feats li{display:flex;align-items:center;gap:6px;font-size:.85rem;color:#12315c}
.sport-feats svg{flex:none;color:var(--c)}
.sport-card .soon{display:inline-block;margin-top:8px;padding:4px 12px;border-radius:999px;background:var(--c);color:#fff;font-size:.85rem;font-weight:600}
@media(min-width:901px){.scene-grid.sports{align-items:center;padding-top:60px;padding-bottom:120px}}
.sport-card>div{flex:1;min-width:0}
.sport-card .btn,.sport-card .soon{display:block;width:fit-content;margin:10px auto 0}
.sport-card .btn,.sport-card .soon{font:inherit;font-size:.9rem;font-weight:600;line-height:1.2;padding:8px 16px;border-radius:10px;border:1px solid var(--c);background:var(--c);color:#fff;box-sizing:border-box}
.sport-card .btn:hover,.sport-card .btn:focus-visible{filter:brightness(1.1);color:#fff}
.sport-card .soon{opacity:.85;cursor:default}
@media(min-width:901px){.sport-card{min-height:15rem;align-items:stretch}.sport-card>div{display:flex;flex-direction:column}.sport-card .btn,.sport-card .soon{margin-top:auto;align-self:center}.sport-feats{margin-bottom:12px}}
@media(min-width:901px){.scene-grid.sports{align-items:stretch;align-content:center}.scene-grid.sports .scene-col{display:flex}.sport-card{flex:1;min-height:0}}
.sport-card{flex-direction:column;align-items:stretch;gap:10px}
.sport-card>.sport-head{display:flex;flex-direction:row;gap:14px;align-items:flex-start;flex:1}
.sport-card>.sport-head>div{display:block;flex:1;min-width:0}
.sport-card .btn,.sport-card .soon{margin:0;align-self:center}
.sport-card>.sport-head{flex:none;align-items:center}
.sport-card>.sport-head h3{margin:0;font-size:1.25rem}
.sport-card>.sport-feats{margin:2px 0 0;grid-template-columns:1fr 1fr;flex:1;align-content:start;gap:6px 14px}
.sport-card>.sport-fill{flex:1}
@media(max-width:380px){.sport-card>.sport-feats{grid-template-columns:1fr}}
.feat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.feat-grid .sc-card{position:relative;background:var(--card,#fff);border:1px solid var(--line,#d8dee6);box-shadow:none;padding-right:54px}
.fsports{position:absolute;top:10px;right:12px;display:flex;gap:4px}
.fsport{display:inline-flex;align-items:center;gap:4px}
.feat-legend{display:flex;justify-content:center;gap:18px;font-size:.9rem}
.fdetail{margin-top:6px!important;color:#3a4756}
.fdetail .fsport{vertical-align:-3px}
.pg-wide{max-width:1100px}
.pg-wide .section{max-width:none;padding:26px 0 0}
.pg-wide .section>h2{text-align:left;font-size:1.4rem;color:var(--brand)}
.pg-wide .section>h2::after{display:none}
.pg-wide .section>.lead{text-align:left;margin:8px 0 16px}
.pg-wide .feat-legend{justify-content:flex-start;margin:0 0 14px}
/* editeur des ecrans de la montre */
.layed h4{margin:14px 0 6px;font-size:.95rem;color:var(--muted)}
.lay-bar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.lay-bar h4{margin:0}
.lay-grid{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.lay-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 8px 8px;border:1px solid var(--line,#d8dee6);border-radius:12px;background:var(--card,#fff);text-align:center;cursor:grab}
.lay-card.locked{cursor:default;background:var(--bg-soft,#f3f5f8)}
.lay-card.free{opacity:.7;border-style:dashed}
.lay-card.drag{opacity:.4}
.lay-card.over{outline:2px solid var(--brand);outline-offset:1px}
.lay-pos{position:absolute;top:6px;left:6px;min-width:22px;height:22px;border-radius:11px;background:var(--brand);color:var(--on-brand,#fff);font-size:.8rem;font-weight:700;display:grid;place-items:center}
.lay-thumb{width:92px;height:92px}
.lay-thumb svg,.lay-thumb img{width:100%;height:100%;display:block;border-radius:50%}
.lay-label{font-size:.88rem;font-weight:600;line-height:1.2;display:flex;flex-direction:column;gap:2px}
.lay-label small{font-weight:400;color:var(--muted);font-size:.74rem}
.lay-actions{display:flex;gap:4px}
.lay-btn{border:1px solid var(--line,#d8dee6);background:var(--bg,#fff);border-radius:8px;width:28px;height:28px;line-height:1;cursor:pointer;font-size:1rem;color:inherit}
.lay-btn:disabled{opacity:.35;cursor:default}
.lay-lock{opacity:.7;font-size:.9rem}
.layed.ro .lay-card{cursor:default;opacity:.75}
.layblock{margin-top:16px}
.layblock .choice{margin:8px 0}

/* montre (photo detouree) sur l'illustration de l'accueil, dont le cadran fait defiler les ecrans */
.watchshow{position:absolute;z-index:2;filter:drop-shadow(0 6px 8px rgba(0,0,0,.35))}
.watchshow>img{position:absolute;inset:0;width:100%;height:100%;user-select:none}
.ws-face{position:absolute;left:11.1%;top:10.1%;width:79.4%;height:72.2%;border-radius:50%;overflow:hidden;background:#000}
.ws-slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.ws-slide.on{opacity:1}
.ws-slide svg{position:absolute;left:50%;top:50%;width:108.7%;height:108.7%;transform:translate(-50%,-50%)}
/* defilement vertical (slide, press) : la page suivante monte, la precedente sort par le haut */
.watchshow:not([data-mode=fade]) .ws-slide{opacity:1;transform:translateY(100%);transition:none}
.watchshow:not([data-mode=fade]) .ws-slide.on{transform:none;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.watchshow:not([data-mode=fade]) .ws-slide.out{transform:translateY(-100%);transition:transform .45s cubic-bezier(.4,0,.2,1)}
/* bouton BAS (a gauche, en bas) qui s'enfonce */
.ws-btn{position:absolute;left:3%;top:68.5%;width:9%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.9);opacity:0;pointer-events:none}
.ws-btn.go{animation:wspress .4s ease-out}
@keyframes wspress{0%{opacity:0;transform:scale(.4)}30%{opacity:.95;transform:scale(1)}100%{opacity:0;transform:scale(1.6)}}
/* logo et nom du sport de l'ecran affiche */
.ws-badge{position:absolute;left:50%;top:94%;transform:translate(-50%,6px);display:inline-flex;align-items:center;gap:5px;padding:3px 10px 3px 7px;border-radius:99px;background:#fff;color:var(--c);font:600 .78rem/1.2 inherit;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.3);opacity:0;transition:opacity .4s ease}
.ws-badge.on{opacity:1}
@media (prefers-reduced-motion:reduce){.ws-slide,.ws-badge{transition:none}.ws-btn.go{animation:none}}

input.invalid,input.invalid:focus,select.invalid,select.invalid:focus,textarea.invalid,textarea.invalid:focus{border-color:#e02020;box-shadow:0 0 0 3px rgba(224,32,32,.25);outline:none}

/* carte publique des stades */
.stadiums .scount{margin:0 0 10px;font-weight:600}
.smap{position:relative;height:min(62vh,560px);min-height:320px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#dfe5ea;touch-action:none;cursor:grab;user-select:none}
.smap.grab{cursor:grabbing}
.stiles,.smarks{position:absolute;inset:0}
.stiles img{position:absolute;left:0;top:0;width:256px;height:256px;max-width:none;pointer-events:none}
.smarks .sdot{position:absolute;left:0;top:0;padding:0;border-radius:50%;border:1px solid var(--accent);background:color-mix(in srgb,var(--accent) 45%,transparent);cursor:pointer}
.smarks .sdot:hover,.smarks .sdot:focus-visible{background:color-mix(in srgb,var(--accent) 75%,transparent)}
.stools{position:absolute;top:8px;right:8px;display:flex;flex-direction:column;gap:6px}
.sbtn{width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--fg);font-size:1.15rem;line-height:1;cursor:pointer}
.sbtn:hover{background:color-mix(in srgb,var(--brand) 8%,var(--bg))}
.sattr{position:absolute;right:0;bottom:0;padding:2px 6px;font-size:.7rem;background:rgba(255,255,255,.8);color:#222;text-decoration:none}
.sinfo{min-height:1.6em;margin-top:10px;color:var(--muted)}

/* records publics */
.records .rsport{margin:0 0 30px}
.records .rsport h2{display:flex;align-items:center;gap:10px;margin:8px 0 14px}
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.rcard{border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:var(--bg)}
.rcard h3{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 12px;font-size:1.1rem}
.rhelp{flex:none;width:24px;height:24px;padding:0;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--muted);font-weight:700;font-size:.8rem;cursor:pointer}
.rhelp:hover{color:var(--accent);border-color:var(--accent)}
.rval{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rval .rnum{white-space:nowrap}
.rval .rfmt{margin-left:auto;font-size:.78rem;font-weight:400}
.rmedals{display:grid;gap:10px}
.rmedal{display:flex;align-items:center;gap:14px;padding:10px 16px 10px 12px;border-radius:12px;background:color-mix(in srgb,var(--fg) 4%,var(--bg))}
.rmedal.gold{background:color-mix(in srgb,#f5b301 14%,var(--bg))}
.rmedal .cup{width:54px;height:54px;flex:none}
.cup .h{fill:none;stroke-width:2.6;stroke-linecap:round}
.cup .s{fill:none;stroke-width:4;stroke-linecap:round}
.cup .b{stroke-width:1.4;stroke-linejoin:round}
.cup .g{fill:none;stroke:#fff;stroke-opacity:.55;stroke-width:2.2;stroke-linecap:round}
.cup.gold .b{fill:#f5b301;stroke:#b98300}.cup.gold .h,.cup.gold .s{stroke:#d99b00}
.cup.silver .b{fill:#c3cad3;stroke:#8d97a3}.cup.silver .h,.cup.silver .s{stroke:#a4adb8}
.rtext{min-width:0;flex:1}
.rlabel{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.rval{font-size:1.9rem;font-weight:700;line-height:1.15}
.rval.none{color:var(--muted)}
.rprops{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.rchip{font-size:.78rem;padding:2px 9px;border-radius:999px;background:var(--bg);border:1px solid var(--line);white-space:nowrap}

/* classement personnel (Progression) */
.rk-grid{display:grid;gap:0}
.rk-row{display:grid;grid-template-columns:minmax(120px,1.1fr) 1fr 1fr;gap:14px;align-items:start;padding:12px 0;border-top:1px solid var(--line)}
.rk-head{border-top:0;padding:0 0 6px;font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.rk-name{font-weight:600}
.rk-cell.none{color:var(--muted)}
.rk-val{display:flex;align-items:center;gap:6px;font-size:1.4rem}
.rk-val .cup{width:28px;height:28px}
.rk-rank{font-weight:600;margin-top:2px}
.rk-rec{font-size:.78rem;color:var(--muted);margin-top:3px}
.rk-gauge{position:relative;height:6px;border-radius:3px;background:color-mix(in srgb,var(--fg) 12%,var(--bg));margin:7px 8px 0 0}
.rk-gauge i{position:absolute;top:-4px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--accent);border:2px solid var(--bg)}
.rk-link{display:inline-block;margin-top:10px}
@media (max-width:640px){.rk-row{grid-template-columns:1fr 1fr}.rk-name{grid-column:1/-1}.rk-head div:first-child{display:none}}

/* bandeau chiffres de la page d'accueil */
.rband{position:relative;z-index:1;display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin:0 auto;max-width:900px;padding:0 16px 33px;color:inherit;text-decoration:none}
.rband-tile{display:flex;align-items:center;gap:12px;padding:10px 18px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.92);box-shadow:0 3px 10px rgba(10,30,60,.25);color:#1c2530;width:270px;box-sizing:border-box}
.rband-tile .cup{width:40px;height:40px;flex:none}
.rband-tile b{display:block;font-size:1.6rem;line-height:1.15}
.rband-tile span{display:block;font-size:.78rem;color:#4a5665}
.rband-tile em{display:block;font-style:normal;font-size:.78rem}
.rband-tile.matches{justify-content:center;text-align:center}
.rband-tile{color:#1c2530;text-decoration:none}
.rband-tile:hover{border-color:var(--accent)}
@media (max-width:640px){.rband-tile{width:min(100%,270px)}}

/* mentions legales */
.legal{max-width:820px}
.legal h3{margin:22px 0 4px}
.legal .legal-t1{margin:30px 0 8px;font-size:1.5rem}
.legal p{margin:.35em 0;line-height:1.55}

.choice.cgu.invalid{outline:2px solid var(--bad);outline-offset:3px;border-radius:6px}
.choice.cgu{display:flex;position:relative;align-items:flex-start;gap:10px;padding:2px 0;color:inherit;font-size:.9rem;line-height:1.4}
.choice.cgu input{position:static;opacity:1;flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--accent);cursor:pointer}
.choice.cgu span,.choice.cgu input:checked+span{border:0;background:transparent;padding:0;font-weight:inherit;color:inherit}
.choice.cgu input:checked+span::before{content:none}
.choice.cgu a{color:inherit;text-decoration:underline;font-weight:600}
fieldset.invalid{outline:2px solid var(--bad);outline-offset:4px;border-radius:8px}

/* planification des matchs d'une montre (file d'attente) */
.qline{display:inline-flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap}
.qline time{color:var(--muted);font-size:.82rem}
.qline .qn{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qline i{font-style:normal;color:var(--muted)}
.qline em{font-style:normal;font-size:.72rem;padding:1px 7px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.wqueue{display:flex;flex-direction:column;gap:4px;margin-top:8px;font-size:.88rem}
.wqueue b{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.qbox h4{margin:14px 0 6px;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.qcur{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--brand) 9%,var(--bg))}
.qlist{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:10px}
.qlist li{display:flex;align-items:center;gap:10px;padding:7px 10px}
.qlist li+li{border-top:1px solid var(--line)}
.qlist li .qline{flex:1}
.qrank{width:22px;height:22px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:.78rem;font-weight:700;background:color-mix(in srgb,var(--fg) 8%,var(--bg))}
.qacts{display:flex;gap:4px;flex:none}
.qbtn{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg);cursor:pointer}
.qbtn:disabled{opacity:.35;cursor:default}
.pick .nm small{display:block;color:var(--muted);font-size:.78rem}

/* page Nouveautes + point « nouveau » du menu */
.wn-new{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;padding:1px 8px;border-radius:999px;background:var(--accent,#c0306a);color:#fff}
.newdot{width:9px;height:9px;border-radius:50%;background:var(--accent,#c0306a);margin-left:auto;flex:none}

/* bouton « N nouveautes » (accueil, barre de l'espace connecte) et compteur du menu */
.newsbtn{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;background:var(--accent,#c0306a);color:#fff;text-decoration:none;font-size:.88rem;font-weight:600;white-space:nowrap}
.newsbtn:hover{filter:brightness(1.1)}
.newsbtn svg{fill:currentColor;stroke:currentColor}
.newsbtn.inbar{background:#fff;color:var(--accent);padding:0 14px;height:38px;box-sizing:border-box}
.newsbtn.inbar:hover{filter:none;background:rgba(255,255,255,.88)}
@media (max-width:560px){.newsbtn.inbar .nt{display:none}}
.newcount{margin-left:auto;min-width:20px;height:20px;padding:0 6px;box-sizing:border-box;border-radius:999px;background:var(--accent,#c0306a);color:#fff;font-size:.74rem;font-weight:700;display:grid;place-items:center}
.side .item.news-item{background:color-mix(in srgb,var(--accent,#c0306a) 14%,transparent);font-weight:700}
.side .item.news-item svg{fill:currentColor}
.whatsnew{display:grid;gap:22px}
.wn{border:1px solid var(--line);border-radius:16px;padding:26px 32px;background:var(--bg);box-shadow:var(--shadow)}
.wn h2{margin:8px 0 10px;font-size:1.5rem}
.wn p{margin:0 0 18px;font-size:1.08rem;line-height:1.55}
.wn .btn{padding:9px 20px;font-size:.95rem}
.wn-head{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.92rem}
@media (max-width:560px){.wn{padding:18px 18px}.wn h2{font-size:1.25rem}}

/* Guide de la montre (pas a pas / tout afficher) */
.pg-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.guide .gbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 8px;flex-wrap:wrap}
.guide .gmodes{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.guide .gmode{border:0;background:transparent;color:var(--fg);padding:7px 16px;font:inherit;cursor:pointer}
.guide .gmode[aria-pressed=true]{background:var(--brand);color:var(--on-brand)}
.guide .gcount{color:var(--muted);font-size:.95rem}
.guide .gprog{height:6px;background:var(--line);border-radius:3px;overflow:hidden;margin-bottom:12px}
.guide .gprog i{display:block;height:100%;background:var(--brand);transition:width .3s}
.guide .gtoc{display:flex;gap:6px;overflow-x:auto;padding:4px 0 10px;margin-bottom:6px}
.guide .gtoc .toc-chip{flex:none;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.guide .gstage{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px 20px;margin-bottom:14px}
.guide .gstep+.gstep{border-top:1px solid var(--line);margin-top:26px;padding-top:24px}
.guide .gstep h2{display:flex;align-items:center;gap:12px;margin:0 0 10px;font-size:1.45rem}
.guide .gnum{flex:none;width:36px;height:36px;border-radius:50%;background:var(--brand);color:var(--on-brand);display:inline-flex;align-items:center;justify-content:center;font-size:1.05rem;font-weight:700}
.guide .glead{margin:.3em 0;color:var(--muted);font-size:1.05rem;max-width:780px}
.guide .glist,.guide .gsteps{margin:.6em 0;padding-left:1.3em;font-size:1.08rem;line-height:1.6;max-width:780px}
.guide .gnote{margin:.8em 0;color:var(--muted)}
.guide .gshots{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 26px;margin-top:16px}
.guide .gfig{margin:0;text-align:center;width:min(100%,250px)}
.guide .gshots.n1 .gfig,.guide .gshots.n2 .gfig{width:min(100%,290px)}
.guide .gfig figcaption{margin-top:8px;font-weight:600;font-size:.95rem}
.guide .gwatch{position:relative}
.guide .gwatch img{display:block;width:100%;height:auto}
.guide .gmarks{position:absolute;z-index:3;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
/* Wear OS : ecran rond dans un boitier, avec les deux boutons lateraux */
.guide .gwatch.wos{aspect-ratio:1;padding:10%}
.guide .gwatch.wos img{border-radius:50%;position:relative;z-index:1;background:#000}
.guide .gwatch.wos::before{content:"";position:absolute;inset:3%;border-radius:50%;background:#23282e;box-shadow:inset 0 0 0 3px #4b545e,0 6px 14px rgba(0,0,0,.3)}
.guide .gwatch.wos::after{content:"";position:absolute;right:-2%;top:30%;width:4%;height:12%;border-radius:3px;background:#3a424a;box-shadow:0 52px 0 #3a424a}
.guide .gwatch.gar img{filter:drop-shadow(0 6px 8px rgba(0,0,0,.3))}
.guide .glegend{display:flex;gap:24px;align-items:center;flex-wrap:wrap;justify-content:center;margin-top:12px}
.guide .glegend ul{flex:1 1 300px;margin:0;padding-left:1.1em;list-style:none;font-size:1.05rem;line-height:1.65}
.guide .glegend .gshots{flex:0 1 300px;margin-top:0}
.guide .gnav{display:flex;justify-content:space-between;gap:12px;margin-bottom:16px}
.guide .gother{color:var(--muted)}
@media (max-width:640px){.guide .gstage{padding:16px 12px}.guide .gstep h2{font-size:1.2rem}}

/* Ligne speciale « Guides des montres » : grandes cartes, une par application et par univers de montre */
.gguides{margin:6px 0 30px}
.gguides h2{margin:0 0 14px;font-size:1.3rem;display:flex;align-items:center;gap:8px}
.gcards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.gcard{--acc:#3b4752;display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:16px 18px;border-radius:14px;background:var(--bg);color:var(--fg);text-decoration:none;border:1px solid var(--line);transition:transform .15s,box-shadow .15s}
.gcard.wearos{--acc:#6b4fbb}
.gcard.site{--acc:#4a7c27}
.gcard:hover,.gcard:focus-visible{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.12)}
.gcard .gpic{flex:none;width:84px;height:84px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.gcard .gphoto{width:100%;height:100%;object-fit:contain;transform:scale(1.12)}
.gcard .gtxt{flex:1 1 170px;display:flex;flex-direction:column;gap:2px;min-width:0}
.gcard .gtxt b{font-size:1.35rem;line-height:1.15;white-space:nowrap}
.gcard .gtxt span{color:var(--acc);font-weight:600}
.gcard .gcta{flex:1 1 100%;font-weight:700;text-align:center;color:#fff;background:var(--acc);padding:9px 14px;border-radius:999px;white-space:nowrap}

/* Montres compatibles : un onglet par univers (couleur propre : graphite = Garmin, violet = Wear OS ; vert / bleu restent ceux des sports) */
.u-garmin{--u:#3b4752}
.u-wearos{--u:#6b4fbb}
.wtabs{display:flex;gap:28px;margin:18px 0 6px;border-bottom:1px solid var(--line)}
.wtab{display:flex;align-items:center;gap:14px;text-align:left;padding:8px 4px 12px;background:none;color:var(--fg);font:inherit;cursor:pointer;border:0;border-bottom:4px solid transparent;margin-bottom:-1px;opacity:.55;transition:opacity .15s}
.wtab:hover{opacity:.85}
.wtab[aria-selected=true]{opacity:1;border-bottom-color:var(--u)}
.wtab .wphoto{flex:none;width:60px;height:60px;border-radius:50%;background:#fff;border:2px solid var(--u);overflow:hidden;display:flex;align-items:center;justify-content:center}
.wtab .wphoto img{width:100%;height:100%;object-fit:contain;transform:scale(1.12)}
.wtab .wtxt{display:flex;flex-direction:column;gap:1px;min-width:0}
.wtab .wtxt b{font-size:1.35rem;line-height:1.1;color:var(--u)}
.wtab .wtxt small{color:var(--muted);font-size:.88rem}
.wtab .wtxt em{font-style:normal;font-weight:700;font-size:.9rem;color:var(--u)}
.wpanel{padding:2px 0 8px;margin:0 0 20px}
.wpanel[hidden]{display:none}
.wsec{padding:14px 0}
.wsec+.wsec{border-top:1px solid var(--line)}
.wsec h2{margin:0 0 10px;font-size:1.15rem;color:var(--u)}
.wdl p{margin:0 0 12px;max-width:760px}
.wsports{display:flex;flex-wrap:wrap;gap:12px}
.wsport{--s:#4a7c27;display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:999px;background:var(--s);color:#fff;font-weight:700;font-size:1.05rem;text-decoration:none;box-shadow:var(--shadow);transition:transform .15s}
.wsport.football{--s:#1565a8}
.wsport:hover{transform:translateY(-2px)}
.wsport em{font-style:normal;font-size:.78rem;font-weight:600;background:rgba(255,255,255,.25);padding:2px 8px;border-radius:999px}
.wsport i{font-style:normal}
.wsport.off{opacity:.5;filter:grayscale(.35);box-shadow:none;cursor:default}
.wsport.off:hover{transform:none}
@media (max-width:640px){.wtabs{gap:10px}.wtab{gap:8px}.wtab .wphoto{width:44px;height:44px}.wtab .wtxt small{display:none}}
.wsport.ghost{background:var(--bg);color:var(--s);border:2px solid var(--s);box-shadow:none}
.wsport.ghost:hover{background:var(--s);color:#fff}
.wsport.ghost small{font-weight:600;font-size:.8rem;opacity:.85}
.wsport.ghost.off{border-style:dashed;opacity:.55;filter:none}
.wsport.ghost.off:hover{background:var(--bg);color:var(--s)}
.wsport .wlogo{width:22px;height:22px;flex:none}
.wsport.ghost.off .wlogo{filter:grayscale(.6)}
.guide .gget{margin:6px 0 18px;padding:14px 0;border-top:1px solid var(--line)}
.guide .gget h2{margin:0 0 10px;font-size:1.1rem}

/* Guide du site : definitions, captures d'ecran du site */
.guide .gdefs{display:grid;grid-template-columns:minmax(150px,230px) 1fr;gap:6px 18px;margin:.8em 0;max-width:820px}
.guide .gdefs dt{font-weight:700;color:var(--brand)}
.guide .gdefs dd{margin:0;display:flex;flex-direction:column}
.guide .gfig.site{max-width:100%;text-align:left}
.guide .gfig.site img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow)}
.guide .gshots:has(.gfig.site){justify-content:flex-start}
@media (max-width:640px){.guide .gdefs{grid-template-columns:1fr}}

/* Page d'un sport : banniere puis sections standard faites des memes cartes */
.hub .hubhero{position:relative;border-radius:var(--radius);overflow:hidden;min-height:230px;display:flex;align-items:flex-end;margin-bottom:26px;background:#10151a}
.hub .hubhero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%}
.hub .hubhero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,26,18,.82) 0%,rgba(11,26,18,.45) 55%,rgba(11,26,18,0) 100%)}
.hub .hubtitle{position:relative;z-index:1;padding:26px 28px;color:#fff;max-width:640px}
.hub .hubtitle h1{margin:6px 0 8px;color:#fff;font-size:clamp(1.6rem,4vw,2.3rem)}
.hub .hubtitle p{margin:0;font-size:1.05rem;opacity:.95;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.hub .hlogo{color:var(--brand);display:inline-flex;width:56px;height:56px;border-radius:50%;background:#fff;align-items:center;justify-content:center}
.hub .hubsec{margin:0 0 30px}
.hub .hubsec>h2{margin:0 0 14px;font-size:1.3rem}
.hub .hubgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.hub .hubgrid.two{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.hubcard{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;color:var(--fg);box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s}
.hubcard:hover,.hubcard:focus-visible{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.2)}
.hubcard .himg{display:block;height:150px;overflow:hidden;background:var(--card);border-bottom:1px solid var(--line)}
.hubcard .himg img{width:100%;height:100%;object-fit:cover;object-position:top}
.hubcard .hbody{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px;flex:1}
.hubcard .hbody b{font-size:1.1rem;color:var(--brand)}
.hubcard .hbody span{color:var(--muted);font-size:.95rem;flex:1}
.hubcard .hbody i{font-style:normal;font-weight:700;color:var(--brand)}
.hub .gguides{margin-top:0}

.guide .gsplit{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 30px;align-items:start}
.guide .gsplit .gshots{flex-direction:column;flex-wrap:nowrap;margin-top:8px;gap:18px}
.guide .gsplit .gshots .gfig{width:auto}
@media (max-width:900px){.guide .gsplit{grid-template-columns:1fr}.guide .gsplit .gshots{flex-direction:row;flex-wrap:wrap}}

/* Page sport : une ligne de cartes compactes a pictogramme */
.hub .hubrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.hubtile{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:14px;background:var(--bg);border:1px solid var(--line);color:var(--fg);text-decoration:none;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s}
.hubtile:hover,.hubtile:focus-visible{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.2)}
.hubtile .hico{width:52px;height:52px;border-radius:50%;background:color-mix(in srgb,var(--brand) 14%,var(--bg));color:var(--brand);display:flex;align-items:center;justify-content:center;margin-bottom:4px}
.hubtile b{color:var(--brand);font-size:1.02rem;line-height:1.25}
.hubtile span:not(.hico){color:var(--muted);font-size:.9rem;flex:1}
.hubtile i{font-style:normal;font-weight:700;color:var(--brand);font-size:.92rem}

/* Aide : le guide du site occupe la 1re ligne, les guides de montre (Garmin, Wear OS) la 2e */
.gcards.stack{grid-template-columns:1fr 1fr}
.gcards.stack>li:first-child:nth-last-child(3){grid-column:1/-1}
@media (max-width:620px){.gcards.stack{grid-template-columns:1fr}}

/* Guides : selecteur Site web / Garmin / Wear OS */
.guide .gtabs{display:flex;flex-wrap:nowrap;gap:10px;margin:14px 0 10px}
.guide .gtab{min-width:0}
.guide .gtab{--u:#3b4752;display:inline-flex;align-items:center;gap:10px;padding:6px 20px 6px 8px;border-radius:999px;border:2px solid var(--line);background:var(--bg);color:var(--fg);font:inherit;font-weight:700;cursor:pointer;opacity:.7}
.guide .gtab.u-site{--u:#4a7c27}
.guide .gtab.u-wearos{--u:#6b4fbb}
.guide .gtab.u-videos{--u:#c62828}
.guide .gtab.u-videos .gtabpic{color:var(--u)}
.guide .gtab:hover{opacity:1}
.guide .gtab[aria-selected=true]{opacity:1;background:var(--u);border-color:var(--u);color:#fff}
.guide .gtabpic{width:44px;height:44px;border-radius:50%;background:#fff;overflow:hidden;display:flex;align-items:center;justify-content:center;flex:none}
.guide .gtabpic img{width:100%;height:100%;object-fit:contain;transform:scale(1.12)}
.guide .gtab[aria-selected=true] .gtabpic{box-shadow:0 0 0 2px rgba(255,255,255,.7)}
.guide .gstage{background:none;border:0;padding:0}
.guide .gstage .gstep{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px 20px;margin:0 0 16px;border-top-width:1px;scroll-margin-top:70px}
.guide .gstep+.gstep{margin-top:0}

/* Guides : contenu et selecteur adaptes au mobile */
.guide,.guide .gstage,.guide .gstep,.guide .gtext{min-width:0}
.guide .gstep{overflow-wrap:anywhere}
.guide .gsplit{grid-template-columns:minmax(0,1fr) auto}
@media (max-width:900px){.guide .gsplit{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .pg.guide,.pg-wide.guide{padding:16px 10px 8px}
  .guide .gtabs{gap:6px}
  .guide .gtab{flex:1 1 0;justify-content:center}
  .guide .gtab{gap:6px;padding:4px 10px 4px 4px;font-size:.85rem;border-width:1.5px}
  .guide .gtabpic{width:30px;height:30px}
  .guide .gstage .gstep{padding:14px 12px;margin-bottom:12px}
  .guide .gstep h2{font-size:1.15rem;gap:8px}
  .guide .gnum{width:28px;height:28px;font-size:.9rem}
  .guide .gdefs{grid-template-columns:minmax(0,1fr);gap:0}
  .guide .gdefs dt{margin-top:.7em}
  .guide .gfig.site{width:100% !important}
  .guide .gsplit .gshots{flex-direction:column;flex-wrap:nowrap}
  .guide .gfig{width:min(100%,260px)}
  .guide .gshots.n3 .gfig{width:min(46%,200px)}
  .guide .glegend ul{flex-basis:100%}
  .gcard{padding:12px 12px}
}
@media (max-width:420px){.guide .gtab{padding-right:6px}.guide .gtab span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}

/* Page sport : fonctions condensees */
.hub .hubhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.hub .hubhead h2{margin:0;font-size:1.3rem}
.hub .hubhead a{font-weight:700;text-decoration:none}
.hub .hubfeats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.hub .hubfeats li{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg);font-weight:600;font-size:.95rem;line-height:1.25}
.hub .hubfeats .hfi{flex:none;width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--brand) 14%,var(--bg));color:var(--brand);display:flex;align-items:center;justify-content:center}
.gcard.off{opacity:.55;filter:grayscale(.4);cursor:default}
.gcard.off:hover{transform:none;box-shadow:none}
.gcard.off .gcta{background:var(--line);color:var(--muted)}

/* Fonctionnalites d'un sport : une carte par fonction (illustration de l'ecran de la montre + description) */
.features .ftoc{margin:12px 0 18px}
.features .fcard{display:grid;grid-template-columns:200px minmax(0,1fr);gap:8px 28px;align-items:center;padding:22px 20px;margin:0 0 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);scroll-margin-top:70px}
.features .fcard:nth-of-type(even){grid-template-columns:minmax(0,1fr) 200px}
.features .fcard:nth-of-type(even) .fthumb{order:2}
.features .fthumb svg{width:100%;height:auto;display:block;filter:drop-shadow(0 6px 8px rgba(0,0,0,.25))}
.features .ftext h2{display:flex;align-items:center;gap:12px;margin:0 0 8px;font-size:1.4rem}
.features .hfi{flex:none;width:40px;height:40px;border-radius:50%;background:color-mix(in srgb,var(--brand) 14%,var(--bg));color:var(--brand);display:inline-flex;align-items:center;justify-content:center}
.features .flead{margin:0 0 10px;font-size:1.08rem;color:var(--fg)}
.features .ftext ul{margin:0;padding-left:1.2em;line-height:1.6;color:var(--muted)}
.features .ftext li+li{margin-top:2px}
@media (max-width:700px){.features .fcard,.features .fcard:nth-of-type(even){grid-template-columns:minmax(0,1fr);padding:16px 12px}.features .fthumb{width:150px;margin:0 auto}.features .fcard:nth-of-type(even) .fthumb{order:0}.features .ftext h2{font-size:1.2rem}}
.pg .afig{margin:14px 0 4px;max-width:420px}
.pg .afig img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:12px}
.pg .afig figcaption{margin-top:6px;color:var(--muted);font-size:.9rem}