/* Police Hanken Grotesk, hébergée avec le site (aucun appel à Google, plus rapide). Licence : fonts/OFL.txt */
@font-face{font-family:"Hanken Grotesk";src:url("fonts/hanken-grotesk.woff") format("woff");font-weight:400 700;font-style:normal;font-display:swap}

/* Layout: a personal home screen. Sticky bar on top, then a 4-column widget grid (2 on phones) that the viewer rearranges in "jiggle" edit mode. */
:root{
  --bg:#E8ECF2; --glass:rgba(255,255,255,.88); --surface:#FFFFFF; --surface-2:#F2F4F8; --ink:#0D1626; --muted:#5A6578; --line:#DDE2EA;
  --accent:#2F5BFF; --live:#E0263C; --win:#0B8F63; --draw:#98A1B0; --loss:#D04040; --star:#E8A400;
  --shadow:0 1px 2px rgba(13,22,38,.06),0 10px 28px rgba(13,22,38,.07);
  --f-display:"Big Shoulders Display","Arial Narrow","Roboto Condensed",Impact,sans-serif;
  --f-body:"Barlow","Segoe UI",system-ui,-apple-system,sans-serif;
  --r:22px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#090D14; --glass:rgba(21,28,40,.86); --surface:#141B27; --surface-2:#1C2534; --ink:#E9EEF7; --muted:#8D99AD; --line:#27334A;
  --live:#FF5266; --win:#3DD39C; --draw:#6E7A8E; --loss:#FF7A7A; --star:#FFC233; --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 30px rgba(0,0,0,.35); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#090D14; --glass:rgba(21,28,40,.86); --surface:#141B27; --surface-2:#1C2534; --ink:#E9EEF7; --muted:#8D99AD; --line:#27334A;
  --live:#FF5266; --win:#3DD39C; --draw:#6E7A8E; --loss:#FF7A7A; --star:#FFC233; --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 30px rgba(0,0,0,.35); color-scheme:dark}

*{box-sizing:border-box}
html,body{min-height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.4;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--surface)}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
/* Repère de focus : seulement l'élément actif (jamais tout le bloc qui l'entoure). Les zones de texte ont leur propre
   contour discret (voir « .inp:focus ») ; un bouton d'import de photo montre le repère clavier sur le bouton lui-même. */
button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.file-btn:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wall{position:fixed;inset:0;z-index:-1;background-size:cover;background-position:center}
.wall::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 35%,transparent),color-mix(in srgb,var(--bg) 70%,transparent))}

/* Top bar */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top-row{display:flex;align-items:center;gap:12px;padding-block:10px}
.brand{font-family:var(--f-display);font-weight:900;font-size:28px;text-transform:uppercase;letter-spacing:.02em;line-height:1}
.brand i{font-style:normal;color:var(--accent)}
.hello{color:var(--muted);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.top-actions{margin-left:auto;display:flex;gap:8px;align-items:center;flex:none}
.pill{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px;border-radius:999px;font-weight:700;font-size:14px;background:var(--surface-2);border:1px solid var(--line);white-space:nowrap}
.pill svg{width:16px;height:16px}
.pill.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;background:var(--accent);font-family:var(--f-display);font-size:17px;flex:none}
.pill.edit{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
@media (max-width:520px){.hello{display:none}.pill .lbl{display:none}.pill{padding:0 11px}.pill.edit .lbl{display:inline}}

main{padding-block:20px 40px}
.tip{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);margin-bottom:14px;min-height:20px}
.tip b{color:var(--ink)}
body.editing .tip{color:var(--accent);font-weight:600}

/* Widget grid */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:176px;gap:16px}
.s-S{grid-column:span 1;grid-row:span 1}.s-M{grid-column:span 2;grid-row:span 1}.s-L{grid-column:span 2;grid-row:span 2}.s-XL{grid-column:span 4;grid-row:span 2}
@media (max-width:760px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:158px;gap:12px}.s-XL{grid-column:span 2}}

.w{position:relative;border-radius:var(--r);background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:var(--shadow);border:1px solid color-mix(in srgb,var(--line) 70%,transparent);
  padding:14px 16px;display:flex;flex-direction:column;gap:8px;min-width:0;overflow:hidden;overflow:clip;--wm:var(--muted);--wl:var(--line);--wacc:var(--accent);
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.w-head{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--wm);flex:none;min-width:0}
.w-head .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.w-head .meta{margin-left:auto;font-weight:600;letter-spacing:.02em;text-transform:none;white-space:nowrap}
.w-head .ico{width:8px;height:8px;border-radius:50%;background:var(--wacc);flex:none}
.w-body{flex:1;min-height:0;overflow:hidden;overflow:clip;display:flex;flex-direction:column}
.w-body.scroll{overflow-y:auto;scrollbar-width:thin}
.w-foot{font-size:11px;color:var(--wm);flex:none}
.empty-w{margin:auto;text-align:center;color:var(--wm);font-size:14px}

/* Rows inside widgets */
.mrow{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--wl);font-size:14px}
.mrow:first-child{border-top:0}
.mrow .h{display:flex;align-items:center;justify-content:flex-end;gap:7px;min-width:0;text-align:right}
.mrow .a{display:flex;align-items:center;gap:7px;min-width:0}
.mrow .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.mrow .won .nm{font-weight:700}
.mrow .sc{font-family:var(--f-display);font-weight:800;font-size:20px;min-width:52px;text-align:center;line-height:1}
.mrow .sc.when{font-family:var(--f-body);font-size:11px;font-weight:700;color:var(--wm);line-height:1.2;text-transform:capitalize}
.mrow .sc.live{color:var(--live)}
.mrow .lg{grid-column:1/-1;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--wm);margin-bottom:-4px}
.two-col{display:grid !important;grid-template-columns:1fr 1fr;column-gap:24px;align-content:start}
.two-col .mrow:nth-child(2){border-top:0}
@media (max-width:760px){.two-col{grid-template-columns:1fr}.two-col .mrow:nth-child(2){border-top:1px solid var(--wl)}}

.crest{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:9px;color:#fff;flex:none;letter-spacing:.02em}
.crest.lg{width:46px;height:46px;border-radius:14px;font-size:16px}
.crest{box-shadow:inset 0 0 0 1px rgba(13,22,38,.14);white-space:nowrap;overflow:hidden}
.crest.n4{font-size:7.5px;letter-spacing:0}.crest.n5{font-size:6.5px;letter-spacing:-.02em}
.crest.lg.n4{font-size:13px}.crest.lg.n5{font-size:11px}
.tbtn{min-width:0;display:flex;align-items:center;gap:7px;text-align:inherit}
.tbtn:hover .nm{text-decoration:underline}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--live);display:inline-block;animation:pulse 1.6s infinite;flex:none}
@keyframes pulse{50%{opacity:.3}}

table.tb{width:100%;border-collapse:collapse;font-size:13px}
.tb td,.tb th{padding:5px 4px;text-align:right;white-space:nowrap;border-top:1px solid var(--wl)}
.tb th{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--wm);font-weight:700;border-top:0;position:sticky;top:0;background:var(--surface)}
.w.st-solid .tb th{background:var(--wbg)}
.tb td:nth-child(2),.tb th:nth-child(2){text-align:left;width:100%;max-width:0}
.tb td.rk{color:var(--wm);width:22px}
.tb td.pts{font-weight:700}
.tb .tcell{display:flex;align-items:center;gap:7px;min-width:0}
.tb .tcell .nm{overflow:hidden;text-overflow:ellipsis}
.ctabs{display:flex;gap:2px;margin-left:auto}
.ctabs button{font-size:10px;font-weight:700;letter-spacing:.06em;padding:3px 7px;border-radius:999px;color:var(--wm)}
.ctabs button[aria-pressed="true"]{background:var(--wl);color:inherit}
.ctabs-sub{margin:-2px 0 6px;justify-content:flex-start;flex-wrap:wrap} /* NFL : divisions sous le titre */

.lead{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:4px 8px;align-items:center;padding:5px 0;border-top:1px solid var(--wl);font-size:14px}
.lead:first-child{border-top:0}
.lead .rk{color:var(--wm);font-weight:700;font-size:12px}
.lead .pl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.lead .pl small{color:var(--wm);font-weight:600;margin-left:5px;font-size:11px}
.lead .v{font-family:var(--f-display);font-weight:800;font-size:19px}
.lead .bar{grid-column:2/-1;height:3px;border-radius:9px;background:var(--wl);overflow:hidden}
.lead .bar span{display:block;height:100%;background:var(--wacc)}
.hero-stat{display:flex;flex-direction:column;justify-content:flex-end;flex:1;min-height:0}
.hero-stat .big{font-family:var(--f-display);font-weight:900;font-size:52px;line-height:.85}
.hero-stat .big small{font-family:var(--f-body);font-size:12px;font-weight:600;color:var(--wm);margin-left:4px}
.hero-stat .who{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:6px}
.hero-stat .who small{display:block;color:var(--wm);font-size:12px;font-weight:600}

.team-top{display:flex;align-items:center;gap:12px;min-width:0}
.team-top h3{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:24px;line-height:.95;margin:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.team-top p{margin:2px 0 0;font-size:12px;color:var(--wm);font-weight:600}
.next{margin-top:auto;font-size:13px}
.next b{display:block;font-family:var(--f-display);font-weight:800;font-size:22px;line-height:1}
.next span{color:var(--wm)}
.form{display:flex;gap:4px}
.form .fm{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-weight:700;font-size:11px;color:#fff}
.form .W{background:var(--win)}.form .D{background:var(--draw)}.form .L{background:var(--loss)}
.w.st-solid .form .fm{background:rgba(255,255,255,.22)}
.w.st-solid .form .W{background:rgba(255,255,255,.95);color:#111}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;flex:1;min-height:0}
.sub-h{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--wm);margin:6px 0 2px}

.trow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:6px 0;border-top:1px solid var(--wl);font-size:14px}
.trow:first-child{border-top:0}
.trow .tour{grid-column:1/-1;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--wm)}
.trow .p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trow .p.lost{color:var(--wm)}
.trow .sets{display:flex;gap:6px;font-family:var(--f-display);font-weight:800;font-size:17px;justify-content:flex-end}
.trow .sets .l{color:var(--wm);font-weight:600}

.prof{display:flex;align-items:center;gap:12px;min-width:0}
.prof .avatar{width:52px;height:52px;font-size:24px}
.prof h3{margin:0;font-family:var(--f-display);font-weight:900;font-size:26px;text-transform:uppercase;line-height:.95;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prof p{margin:3px 0 0;font-size:13px;color:var(--wm)}
.tags{display:flex;flex-wrap:wrap;gap:5px}
.tags span{font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--wl)}
.bio{margin:0;font-size:13px;color:var(--wm);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.p-banner{height:54px;margin:-14px -16px 0;background:linear-gradient(120deg,var(--accent),color-mix(in srgb,var(--accent) 45%,#0D1626)) center/cover;flex:none}
.p-banner + .prof{margin-top:-26px}
.p-banner + .prof .avatar{box-shadow:0 0 0 3px var(--surface)}
.w.has-banner .w-head{position:absolute;top:12px;left:16px;right:16px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.w.has-banner .w-head .ico{background:#fff}
.pf-banner{height:120px;border-radius:16px;background:linear-gradient(120deg,var(--accent),color-mix(in srgb,var(--accent) 45%,#0D1626)) center/cover;display:flex;align-items:flex-end;padding:12px}
.pf-banner .avatar{width:56px;height:56px;font-size:26px;box-shadow:0 0 0 3px var(--surface)}
textarea.inp{height:auto;min-height:76px;padding:10px 14px;resize:vertical;line-height:1.4}
select.inp{appearance:auto}
.add-row{display:flex;gap:8px}.add-row .inp{flex:1;min-width:0}.add-row .btn{height:44px}

/* Edit (jiggle) mode */
.w-ctrl{display:none}
body.editing .w-ctrl{display:grid}
body.editing .w{cursor:grab;animation:jiggle .32s ease-in-out infinite alternate}
body.editing .w.s-L,body.editing .w.s-XL{animation-name:jiggle-sm}
body.editing .w-body{pointer-events:none}
@keyframes jiggle{from{transform:rotate(-.9deg)}to{transform:rotate(.9deg)}}
@keyframes jiggle-sm{from{transform:rotate(-.35deg)}to{transform:rotate(.35deg)}}
@media (prefers-reduced-motion:reduce){body.editing .w{animation:none;outline:2px dashed var(--accent);outline-offset:2px}.live-dot{animation:none}}
.w-del{position:absolute;top:8px;left:8px;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--surface);place-items:center;z-index:3;font-weight:800}
.w-size{position:absolute;bottom:8px;right:8px;height:28px;border-radius:999px;background:var(--ink);color:var(--surface);z-index:3;font-size:12px;font-weight:800;letter-spacing:.04em;overflow:hidden}
body.editing .w-size{display:flex;align-items:stretch}
.w-size button{color:inherit;font:inherit;letter-spacing:inherit;padding:0 10px;min-width:28px}
.sz-opts{display:none}
.sz-opts button{padding:0 8px;opacity:.62;transition:opacity .12s,background .12s}
.sz-opts button[aria-pressed="true"]{opacity:1;background:color-mix(in srgb,currentColor 18%,transparent)}
.sz-opts button:hover,.sz-opts button:focus-visible{opacity:1}
.w-size.open .sz-cur{display:none}
.w-size.open .sz-opts{display:flex}
@media (hover:hover) and (pointer:fine){.w-size:hover .sz-cur,.w-size:focus-within .sz-cur{display:none}.w-size:hover .sz-opts,.w-size:focus-within .sz-opts{display:flex}}
@media (pointer:coarse){.w-size{height:32px}.sz-opts button{min-width:36px}}
.w.st-solid .w-del,.w.st-solid .w-size{background:#fff;color:#111}
/* Drag handle: desktop only, shown on hover */
.w-grip{display:none;position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:9px;place-items:center;background:var(--surface);color:var(--muted);border:1px solid var(--line);z-index:3;cursor:grab;opacity:0;transition:opacity .15s}
.w-grip svg{width:14px;height:14px}
.w.st-solid .w-grip{background:rgba(255,255,255,.2);color:#fff;border-color:transparent}
@media (hover:hover) and (pointer:fine){.w-grip{display:grid}.w:hover .w-grip,.w:focus-within .w-grip{opacity:1}}
/* Onglets à droite du titre (conférences NBA, AFC/NFC) : place laissée à la poignée pour qu'elle ne cache pas le dernier onglet */
@media (hover:hover) and (pointer:fine){body:not(.editing) .w-head:has(.ctabs){padding-right:30px}}
body.editing .w-grip{display:none}
@media (prefers-reduced-motion:reduce){.w-grip{transition:none}}
.add-tile{border:2px dashed var(--line);border-radius:var(--r);display:none;place-items:center;color:var(--muted);font-weight:700;gap:6px;background:color-mix(in srgb,var(--surface) 40%,transparent)}
body.editing .add-tile,.add-tile.always{display:grid}
.add-tile span{font-size:34px;line-height:1;font-weight:400}

/* Sheets */
.scrim{position:fixed;inset:0;background:rgba(5,10,20,.5);z-index:40;display:grid;place-items:end center}
@media (min-width:761px){.scrim{place-items:center}}
.sheet{width:min(560px,100%);max-height:min(88vh,860px);overflow-y:auto;background:var(--surface);border-radius:24px 24px 0 0;padding:20px max(18px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 22px) max(18px,env(safe-area-inset-left,0px));display:grid;gap:16px;align-content:start;box-shadow:0 -10px 40px rgba(0,0,0,.25)}
@media (min-width:761px){.sheet{border-radius:24px}}
.sheet.wide{width:min(720px,100%)}
.sh-head{display:flex;align-items:center;gap:10px}
.sh-head h2{margin:0;font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:28px;line-height:1}
.sh-head .back,.sh-head .x{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);flex:none}
.sh-head .x{margin-left:auto}
.field{display:grid;gap:8px}
.field > span{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.inp{height:44px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);padding:0 14px;width:100%}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 13px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-weight:600;font-size:14px}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.chip .crest{width:20px;height:20px;font-size:8px;border-radius:6px}.chip .crest.n4{font-size:7px}.chip .crest.n5{font-size:6px}
.chip .rm{margin-left:2px;font-weight:800;color:var(--muted)}
.chip:disabled{opacity:.5;cursor:not-allowed}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.sw{width:36px;height:36px;border-radius:50%;border:3px solid transparent;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.sw[aria-pressed="true"]{border-color:var(--ink)}
.sw.none{background:var(--glass);display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--muted)}
.seg{display:flex;background:var(--surface-2);border-radius:12px;padding:3px;gap:3px}
.seg button{flex:1;height:36px;border-radius:9px;font-weight:700;font-size:13px;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.btn{height:48px;border-radius:14px;font-weight:700;font-size:15px;background:var(--surface-2);border:1px solid var(--line);padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.danger{color:var(--loss)}
.btn.primary.danger-fill{background:var(--loss);border-color:var(--loss);color:#fff}
.acc-h{margin:18px 0 4px;font-size:15px}
.row-btns{display:flex;gap:8px;flex-wrap:wrap}
.row-btns .btn{flex:1}
.preview{background:var(--bg);border-radius:18px;padding:16px;display:grid;justify-items:center}
.preview .w{width:100%;animation:none !important;cursor:default}
.preview .w.s-S{max-width:190px;height:176px}.preview .w.s-M{max-width:400px;height:176px}.preview .w.s-L{max-width:400px;height:368px}.preview .w.s-XL{height:368px}

.gal-list{display:grid;gap:6px}
.gal-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;border:1px solid var(--line);text-align:left;width:100%}
.gal-item:hover{border-color:var(--accent)}
.gal-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--surface-2);color:var(--accent);flex:none}
.gal-ico svg{width:20px;height:20px}
.gal-item b{display:block;font-size:15px}
.gal-item small{color:var(--muted);font-size:13px}
.gal-sec{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:6px 0 0}
.muted{color:var(--muted);font-size:13px;margin:0}
.stats3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat{background:var(--surface-2);border-radius:14px;padding:10px 12px}
.stat b{display:block;font-family:var(--f-display);font-weight:900;font-size:28px;line-height:1}
.stat span{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* Onboarding */
.onb{position:fixed;inset:0;z-index:50;background:var(--bg);overflow-y:auto}
.onb-in{max-width:760px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;gap:22px;padding:calc(env(safe-area-inset-top,0px) + 28px) max(18px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 28px) max(18px,env(safe-area-inset-left,0px))}
.onb-top{display:flex;align-items:center;gap:12px}
.progress{flex:1;height:6px;border-radius:9px;background:var(--line);overflow:hidden}
.progress span{display:block;height:100%;background:var(--accent);border-radius:inherit;transition:width .25s}
.onb-count{font-size:13px;font-weight:700;color:var(--muted);white-space:nowrap}
.btn.small{height:36px;padding:0 16px;font-size:14px;border-radius:999px}
@media (prefers-reduced-motion:reduce){.progress span{transition:none}}
.onb h1{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(40px,8vw,68px);line-height:.88;margin:0;text-wrap:balance}
.onb h1 em{font-style:normal;color:var(--accent)}
.onb .lede{margin:0;color:var(--muted);font-size:17px;max-width:52ch}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.tile{position:relative;border-radius:20px;border:2px solid var(--line);background:var(--surface);padding:16px;display:grid;gap:18px;text-align:left;min-height:130px;align-content:space-between}
.tile svg{width:34px;height:34px;color:var(--accent)}
.tile b{font-family:var(--f-display);font-weight:800;font-size:22px;text-transform:uppercase;line-height:1}
.tile small{display:block;color:var(--muted);font-size:12px;margin-top:3px;font-family:var(--f-body);text-transform:none;font-weight:500}
.tile[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--surface))}
.tile[aria-pressed="true"]::after{content:"✓";position:absolute;top:12px;right:14px;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px}
.tile:disabled{opacity:.55;cursor:not-allowed}
.onb-sec{display:grid;gap:10px}
.onb-sec h2{margin:0;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.onb-nav{margin-top:auto;display:flex;gap:10px;align-items:center;position:sticky;bottom:0;padding-top:12px;background:linear-gradient(transparent,var(--bg) 30%)}
.onb-nav .btn.primary{flex:1;max-width:320px;margin-left:auto}
.skip{color:var(--muted);font-weight:600;font-size:14px;text-decoration:underline}
.wall-prev{width:100%;height:120px;border-radius:16px;background:var(--surface-2) center/cover;display:grid;place-items:center;color:var(--muted);font-size:13px;border:1px dashed var(--line)}
.file-btn{position:relative;overflow:hidden}
.file-btn input{position:absolute;inset:0;opacity:0;cursor:pointer}
footer{color:var(--muted);font-size:12px;padding-block:0 30px}
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);transform:translateX(-50%);background:var(--ink);color:var(--surface);padding:10px 16px;border-radius:999px;font-weight:600;font-size:14px;z-index:60;box-shadow:var(--shadow)}

/* v4: widgets placed on precise cells, drag and drop, four widget styles, scrolling inside widgets */
.grid > .w,.grid > .add-tile,.grid > .ph{min-height:0}
.w{--wc:var(--accent);--wacc:var(--wc)}
.w.st-glass.has-c{background:color-mix(in srgb,var(--wc) 14%,var(--glass));border-color:color-mix(in srgb,var(--wc) 35%,transparent)}
.w.st-solid{background:var(--wbg,var(--accent));color:var(--wink,#fff);border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;--wm:color-mix(in srgb,var(--wink,#fff) 72%,transparent);--wl:color-mix(in srgb,var(--wink,#fff) 22%,transparent);--wacc:var(--wink,#fff);--live:var(--wink,#fff)}
.w.st-outline{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none;border:2px solid var(--wc);box-shadow:none}
/* Style « Translucide » (valeur interne « transparent ») : voir la partie « Pages et widget translucide » en fin de fichier */
body.has-wall .w.st-transparent,.preview.has-wall .w.st-transparent{text-shadow:0 1px 1px color-mix(in srgb,var(--bg) 55%,transparent)}
.w.st-solid .tb th{background:var(--wbg,var(--accent))}
.w.st-glass.has-c .tb th{background:color-mix(in srgb,var(--wc) 10%,var(--surface))}
.w.st-transparent .tb th{background:transparent;position:static}
.w.st-solid.ink-dark .w-del,.w.st-solid.ink-dark .w-size{background:var(--ink);color:var(--surface)}
.w.st-solid.ink-dark .form .fm{background:color-mix(in srgb,var(--wink) 16%,transparent);color:var(--wink)}.w.st-solid.ink-dark .form .W{background:var(--wink);color:var(--wbg)}

.w-body.scroll{overflow-y:auto;scrollbar-width:none;overscroll-behavior-y:auto}
.w-body.scroll::-webkit-scrollbar{display:none}
@media (hover:hover) and (pointer:fine){.w-body.scroll{scrollbar-width:thin;scrollbar-color:var(--wl) transparent}.w-body.scroll::-webkit-scrollbar{display:block;width:6px}.w-body.scroll::-webkit-scrollbar-thumb{background:var(--wl);border-radius:9px}}
.w-body.scroll.more{-webkit-mask-image:linear-gradient(#000 calc(100% - 28px),transparent);mask-image:linear-gradient(#000 calc(100% - 28px),transparent)}
.w-body.gap10{gap:10px}
.pager-wrap{position:relative}
.pager{display:flex;flex:1;min-height:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;scroll-behavior:smooth}
.pager::-webkit-scrollbar{display:none}
.page{flex:0 0 100%;min-width:0;scroll-snap-align:start;display:flex;flex-direction:column;justify-content:flex-end}
.page .trow{border-top:0}
.dots{position:absolute;top:0;right:0;display:flex;gap:4px;align-items:center}
.dot{width:6px;height:6px;border-radius:9px;background:var(--wl);position:relative;transition:width .2s,background-color .2s}
.dot::after{content:"";position:absolute;inset:-8px -3px}
.dot[aria-current="true"]{width:14px;background:var(--wacc)}
.hero-stat .rk-mini{color:var(--wm);margin-right:4px}
.hero-stat .big{white-space:nowrap}
@media (max-width:760px){.s-S .hero-stat .big{font-size:44px}}

.ph{border:2px dashed color-mix(in srgb,var(--accent) 65%,transparent);border-radius:var(--r);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.w.floating{position:fixed;z-index:45;margin:0;animation:none!important;pointer-events:none;scale:1.03;box-shadow:0 18px 44px rgba(13,22,38,.28)}
.w.lift{scale:1.03;transition:scale .15s}
body.dragging,body.dragging *{cursor:grabbing!important;-webkit-user-select:none;user-select:none}
body.dragging .add-tile{display:none!important}
body.dragging .w-grip{opacity:0!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

.cfg-opts{display:grid;gap:16px}
.seg4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.seg4 button{display:flex;align-items:center;justify-content:center;gap:6px;padding:0 6px;font-size:13px;white-space:nowrap}
@media (max-width:440px){.seg4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stl{width:14px;height:14px;border-radius:4px;flex:none;border:1.5px solid currentColor}
.stl-transparent{background:linear-gradient(135deg,color-mix(in srgb,currentColor 34%,transparent),transparent 65%);border-color:color-mix(in srgb,currentColor 70%,transparent)}
.stl-glass{background:color-mix(in srgb,currentColor 28%,transparent)}
.stl-solid{background:currentColor}
.sw.club{display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:10px;letter-spacing:0}
.fnote{text-transform:none;letter-spacing:0;font-weight:600}
.preview{background-size:cover;background-position:center;min-height:208px;align-content:center}
.preview .w{transition:background-color .25s,border-color .25s,color .25s,box-shadow .25s,max-width .25s,height .25s}
@media (prefers-reduced-motion:reduce){.w.floating,.w.lift{scale:1;transition:none}.dot,.preview .w{transition:none}.pager{scroll-behavior:auto}}

/* v5 · Charte « Papier » : fond blanc, filets fins, aucune ombre sur les widgets, une seule police (Hanken Grotesk), casse normale partout.
   La marque reste noire, blanche et grise ; la couleur vient de l'utilisateur (accent, couleurs de widget, club). */
:root{--bg:#FFFFFF;--glass:rgba(255,255,255,.86);--surface:#FFFFFF;--surface-2:#F7F7F5;--ink:#2F2E2B;--muted:#73726E;--line:#E9E8E5;
  --live:#D93A3A;--win:#2E8B57;--draw:#A3A29E;--loss:#D9534F;--shadow:none;--shadow-pop:0 12px 32px rgba(15,15,15,.12),0 2px 6px rgba(15,15,15,.06);
  --f-display:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--f-body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--r:10px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#191919;--glass:rgba(32,32,32,.86);--surface:#202020;--surface-2:#262626;--ink:#E8E7E4;--muted:#9B9A96;--line:#2F2F2F;
  --live:#FF6B6B;--win:#4CC38A;--draw:#6F6E6A;--loss:#FF7A73;--shadow:none;--shadow-pop:0 12px 32px rgba(0,0,0,.5);color-scheme:dark}}
:root[data-theme="dark"]{--bg:#191919;--glass:rgba(32,32,32,.86);--surface:#202020;--surface-2:#262626;--ink:#E8E7E4;--muted:#9B9A96;--line:#2F2F2F;
  --live:#FF6B6B;--win:#4CC38A;--draw:#6F6E6A;--loss:#FF7A73;--shadow:none;--shadow-pop:0 12px 32px rgba(0,0,0,.5);color-scheme:dark}
body{line-height:1.45}
body::before{background:var(--bg)}
.top{background:color-mix(in srgb,var(--bg) 88%,transparent)}
.brand{font-family:var(--f-body);font-weight:700;font-size:20px;text-transform:none;letter-spacing:-.015em}
.pill{height:36px;border-radius:8px;font-weight:600;background:var(--surface)}
.pill.primary{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.pill.edit{border-color:var(--line);color:var(--ink);background:var(--surface)}
.avatar{font-family:var(--f-body);font-weight:600;font-size:16px}
body.editing .tip{color:var(--ink)}
/* Widgets */
.w{border:1px solid var(--line);box-shadow:none;padding:12px 14px}
.w-head{font-size:13px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--ink)}
.w-head .meta{font-weight:400;font-size:12px;letter-spacing:0;color:var(--wm)}
.w-head .ico{width:6px;height:6px}
.w.st-solid .w-head{color:var(--wink,#fff)}
.w-foot{font-size:12px}
.mrow .sc{font-family:var(--f-body);font-weight:600;font-size:16px;min-width:48px}
.mrow .sc.when{font-size:12px;font-weight:500;text-transform:none}
.mrow .won .nm{font-weight:600}
.mrow .lg{font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;margin-bottom:-2px}
.crest{border-radius:5px;font-family:var(--f-body);font-weight:700}
.crest.lg{border-radius:10px}
.tb td,.tb th{padding:5px 4px}
.tb th{font-size:12px;font-weight:500;letter-spacing:0;text-transform:none}
.tb td.pts{font-weight:600}
.tb tr.mine .nm{font-weight:600}
.ctabs button{font-size:12px;font-weight:500;letter-spacing:0;border-radius:6px}
.lead .pl{font-weight:500}
.lead .v{font-family:var(--f-body);font-weight:600;font-size:16px}
.hero-stat .big{font-family:var(--f-body);font-weight:600;font-size:40px;line-height:1;letter-spacing:-.02em}
.hero-stat .big small{font-weight:500}
.hero-stat .who{font-weight:600}
.team-top h3{font-family:var(--f-body);font-weight:600;text-transform:none;font-size:18px;line-height:1.2;letter-spacing:-.01em;text-wrap:balance;overflow-wrap:break-word}
.team-top p{font-weight:500}
.next b{font-family:var(--f-body);font-weight:600;font-size:17px;line-height:1.2}
.form .fm{border-radius:5px;font-weight:600}
.sub-h{font-size:12px;font-weight:600;letter-spacing:0;text-transform:none}
.trow .tour{font-size:12px;font-weight:500;letter-spacing:0;text-transform:none}
.trow .sets{font-family:var(--f-body);font-weight:600;font-size:15px}
.prof h3{font-family:var(--f-body);font-weight:600;font-size:18px;text-transform:none;line-height:1.2;letter-spacing:-.01em}
.tags span{border-radius:5px;font-weight:500}
.w-size{font-weight:600;letter-spacing:0;border-radius:6px}
.w-grip{border-radius:6px}
.add-tile{border:1.5px dashed var(--line);font-weight:500}
.ph{border-width:1.5px}
.w.floating{box-shadow:var(--shadow-pop)}
/* Noms longs sur téléphone : moins d'écusson, plus de place pour le nom, deux lignes équilibrées */
@media (max-width:760px){
  .s-S .hero-stat .big{font-size:32px}
  .s-M .cols{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:10px}
  .team-top{gap:10px}
  .s-M .team-top .crest.lg,.s-S .team-top .crest.lg{width:34px;height:34px;font-size:11px;border-radius:8px}
  .s-M .team-top h3,.s-S .team-top h3{font-size:16px}
}
/* Feuilles, champs, boutons */
.scrim{background:rgba(15,15,15,.4)}
.sheet{border-radius:14px 14px 0 0;box-shadow:var(--shadow-pop)}
@media (min-width:761px){.sheet{border-radius:14px}}
.sh-head h2{font-family:var(--f-body);font-weight:600;text-transform:none;font-size:20px;line-height:1.2;letter-spacing:-.01em}
.sh-head .back,.sh-head .x{border-radius:8px}
.field > span{font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink)}
.inp{border-radius:8px;background:var(--surface)}
/* Zone de texte active : bordure foncée et halo gris très léger, dans l'esprit « Papier » (pas de bleu, pas de contour sur le bloc).
   Visible aussi au clavier : c'est le repère de la navigation au clavier pour les champs. */
.inp{transition:border-color .15s,box-shadow .15s}
.inp:hover{border-color:color-mix(in srgb,var(--ink) 25%,var(--line))}
.inp:focus,.inp:focus-visible{outline:none;border-color:color-mix(in srgb,var(--ink) 60%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 9%,transparent)}
@media (forced-colors:active){.inp:focus{outline:2px solid CanvasText;outline-offset:1px}}
.chip{border-radius:6px;font-weight:500;min-height:34px}
.seg{border-radius:8px}
.seg button{border-radius:6px;font-weight:600}
.seg button[aria-pressed="true"]{box-shadow:0 0 0 1px var(--line)}
.btn{height:44px;border-radius:8px;font-weight:600}
.btn.primary{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.btn.small{border-radius:8px}
.gal-item{border-radius:8px}
.gal-item:hover{border-color:var(--muted);background:var(--surface-2)}
.gal-ico{border-radius:8px;color:var(--ink)}
.gal-sec{font-size:13px;font-weight:600;letter-spacing:0;text-transform:none}
.stat{border-radius:8px}
.stat b{font-family:var(--f-body);font-weight:600;font-size:24px}
.stat span{font-size:12px;font-weight:500;letter-spacing:0;text-transform:none}
.preview{border-radius:12px;background-color:var(--surface-2)}
.wall-prev,.pf-banner{border-radius:10px}
.sw.club{font-family:var(--f-body)}
.toast{border-radius:8px;box-shadow:var(--shadow-pop)}
/* Accueil */
.onb h1{font-family:var(--f-body);font-weight:700;text-transform:none;font-size:clamp(34px,6vw,52px);line-height:1.05;letter-spacing:-.03em}
.onb h1 em{color:inherit}
.progress{height:4px}
.tile{border-radius:10px;border:1px solid var(--line)}
.tile[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.tile svg{color:var(--ink)}
.tile b{font-family:var(--f-body);font-weight:600;font-size:17px;text-transform:none;line-height:1.2}
.onb-sec h2{font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink)}

/* Chantier 6 · vrai site */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0}
.mrow .cap{grid-column:1/-1;text-align:center;font-size:11px;color:var(--wm);margin-top:-4px;line-height:1.2}
.mrow .cap.live{color:var(--live);font-weight:600}
.mrow.is-off .nm{color:var(--wm)}
/* Tes équipes (lignes de match et classements) : nom en gras et petite étoile dorée, sans surlignage (03/11/2026) */
.mrow .fav .nm{font-weight:700}
.fstar{flex:none;color:#B8860B;font-size:.85em;line-height:1;margin:0 1px}
[data-theme="dark"] .fstar{color:#F2C230}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fstar{color:#F2C230}}
.w.st-solid .fstar{color:#F5C518;text-shadow:0 0 1px rgba(0,0,0,.45)}
.w.st-solid.ink-dark .fstar{color:#8A6400;text-shadow:none}
.mrow .sc.off{font-weight:600;color:var(--wm)}
.mrow .sc.off .num{font-weight:600}
.w-foot{margin-top:auto;padding-top:2px}
footer p{margin:0 0 6px}
.empty-w .btn{margin-top:12px}
body.viewing .tip{color:var(--ink)}
noscript p{max-width:560px;margin:40px auto;padding:0 16px;font-family:system-ui,sans-serif}

/* ================= Détail d'un match (chantier « stats en direct ») ================= */
/* Le score d'une ligne de match est un bouton : il ouvre le détail */
.mrow .mbtn{color:inherit;border-radius:6px;padding:3px 2px;cursor:pointer;transition:background .15s}
.mrow .mbtn:hover{background:color-mix(in srgb,currentColor 8%,transparent)}
.mrow .mbtn:focus-visible{outline:2px solid var(--wacc,var(--accent));outline-offset:1px}
.mrow .mbtn.live{color:var(--live)}
body.editing .grid .mrow .mbtn{pointer-events:none}

.mx{display:grid;gap:16px}
.mx .sh-head{margin-bottom:-6px}
.mx-lg{margin:0;font-size:13px;color:var(--muted);text-transform:capitalize}
.mx-score{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px}
.mx-team{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-weight:600;font-size:15px;min-width:0;color:inherit;padding:4px;border-radius:8px}
.mx-team span{overflow:hidden;text-overflow:ellipsis;max-width:100%}
.mx-team:hover{background:var(--surface-2)}
.mx-mid{display:flex;flex-direction:column;align-items:center;gap:6px}
.mx-mid b{font-size:34px;font-weight:600;letter-spacing:-.02em;line-height:1}
.mx-mid b.live,.mx-st.live{color:var(--live)}
.mx-st{font-size:12px;color:var(--muted);text-align:center;display:inline-flex;align-items:center;gap:5px}
.mx-sec{display:grid;gap:8px}
.mx-sec .gal-sec{margin:0}
.mx-src{font-size:12px}
.mx-q td:first-child,.mx-q th:first-child{text-align:left;width:auto;max-width:none}
.mx-q td:nth-child(2),.mx-q th:nth-child(2){text-align:right;width:auto;max-width:none}

/* Tableau des joueurs (NBA) : les colonnes « x » se cachent sur téléphone */
.mx-box{overflow-x:auto;-webkit-overflow-scrolling:touch}
.bx td:first-child,.bx th:first-child{text-align:left;width:100%;max-width:0;white-space:nowrap}
.bx td:nth-child(2),.bx th:nth-child(2){text-align:right;width:auto;max-width:none}
.bx .pn{overflow:hidden;text-overflow:ellipsis}
.bx .pcell{display:flex;align-items:baseline;gap:6px;min-width:0}
.bx td small{color:var(--muted);font-size:11px;flex:none}
.bx td small.red{color:var(--live)}
.bx tr.grp td{font-size:12px;color:var(--muted);padding-top:10px}
.bx .short{display:none}
@media (max-width:560px){.bx .x{display:none}.bx .full{display:none}.bx .short{display:inline}}

/* Comparaison d'équipes : deux valeurs et une barre partagée */
.cmp{display:grid;grid-template-columns:3.5em 1fr 3.5em;align-items:center;gap:2px 8px;font-size:14px}
.cmp .num:last-of-type{text-align:right}
.cmp-l{text-align:center;color:var(--muted);font-size:13px}
.cmp-bar{grid-column:1/-1;display:flex;gap:3px;height:4px}
.cmp-bar i{display:block;border-radius:2px;background:var(--accent)}
.cmp-bar i+i{background:var(--draw)}

/* Fil des buts, essais et cartons : équipe à domicile à gauche, à l'extérieur à droite */
.tl{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.tl li{display:grid;grid-template-columns:1fr 3.4em 1fr;align-items:center;gap:8px;font-size:14px;padding:5px 0;border-top:1px solid var(--line)}
.tl li:first-child{border-top:0}
.tl .min{grid-column:2;text-align:center;color:var(--muted);font-size:13px;display:flex;flex-direction:column;line-height:1.2}
.tl .min small{font-size:11px;color:var(--ink)}
.tl li.h .ev{grid-column:1;grid-row:1;text-align:right;justify-content:flex-end}
.tl li.a .ev{grid-column:3;grid-row:1}
.tl .ev{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;min-width:0}
.tl .ev small{flex-basis:100%;color:var(--muted);font-size:12px}
.tl li.h .ev small{text-align:right}
.card{display:inline-block;width:9px;height:12px;border-radius:2px;background:#F2C200;flex:none;vertical-align:-1px}
.card.r{background:#D93A3A}
.ball{display:inline-block;width:10px;height:10px;border-radius:50%;border:2px solid currentColor;flex:none;vertical-align:-1px;box-sizing:border-box}

/* Compositions */
.lu-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:480px){.lu-cols{grid-template-columns:1fr}}
.lu-cols h4{margin:0 0 4px;font-size:14px;font-weight:600}
.lu-cols h4 small{color:var(--muted);font-weight:500}
.lu{list-style:none;margin:0;padding:0}
.lu li{display:flex;align-items:center;gap:8px;font-size:14px;padding:4px 0;border-top:1px solid var(--line)}
.lu li:first-child{border-top:0}
.lu .nb{width:1.8em;color:var(--muted);text-align:right;flex:none;font-size:13px}
.lu .pn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lu.nfl-l .nb{width:5.6em;text-align:left;font-size:12px}
.lu.nfl-l .pn{white-space:normal}
.lu.nfl-l .pn small{display:block;color:var(--muted);font-size:12px}
.lu .marks{display:flex;align-items:center;gap:4px;flex:none}
.lu .sub{font-size:12px;font-weight:700}
.lu .sub.out{color:var(--loss)}
.lu .sub.in{color:var(--win)}
.lu-h{margin:8px 0 2px;font-size:12px;color:var(--muted)}

/* ================= Pages et widget translucide ================= */
/* Widget « Translucide » : verre clair façon Apple (Liquid Glass). Le fond d'écran se voit à travers, légèrement flouté ;
   un liseré lumineux (plus clair en haut à gauche et en bas à droite) et une ombre très douce dessinent la forme.
   Seule exception à la règle « aucune ombre sur les widgets » de la charte : sans elle, la forme disparaît. */
:root{--tl-fill-a:rgba(255,255,255,.55);--tl-fill-b:rgba(255,255,255,.18);--tl-rim-a:rgba(255,255,255,.95);--tl-rim-b:rgba(20,20,20,.10);--tl-edge:rgba(20,20,20,.07);--tl-drop:rgba(20,20,20,.14)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--tl-fill-a:rgba(255,255,255,.11);--tl-fill-b:rgba(255,255,255,.03);--tl-rim-a:rgba(255,255,255,.42);--tl-rim-b:rgba(255,255,255,.07);--tl-edge:rgba(0,0,0,.35);--tl-drop:rgba(0,0,0,.45)}}
:root[data-theme="dark"]{--tl-fill-a:rgba(255,255,255,.11);--tl-fill-b:rgba(255,255,255,.03);--tl-rim-a:rgba(255,255,255,.42);--tl-rim-b:rgba(255,255,255,.07);--tl-edge:rgba(0,0,0,.35);--tl-drop:rgba(0,0,0,.45)}
/* Sur un fond d'écran, le verre est plus transparent pour laisser passer l'image */
body.has-wall,.preview.has-wall{--tl-fill-a:rgba(255,255,255,.30);--tl-fill-b:rgba(255,255,255,.06)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) body.has-wall,:root:not([data-theme="light"]) .preview.has-wall{--tl-fill-a:rgba(255,255,255,.12);--tl-fill-b:rgba(255,255,255,.02);--tl-rim-a:rgba(255,255,255,.5)}}
:root[data-theme="dark"] body.has-wall,:root[data-theme="dark"] .preview.has-wall{--tl-fill-a:rgba(255,255,255,.12);--tl-fill-b:rgba(255,255,255,.02);--tl-rim-a:rgba(255,255,255,.5)}

.w.st-transparent{
  background:linear-gradient(155deg,var(--tl-fill-a),var(--tl-fill-b) 55%,color-mix(in srgb,var(--tl-fill-a) 60%,transparent));
  -webkit-backdrop-filter:blur(14px) saturate(1.7);backdrop-filter:blur(14px) saturate(1.7);
  border-color:transparent;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--tl-rim-a) 70%,transparent),0 0 0 1px var(--tl-edge),0 10px 28px -16px var(--tl-drop)}
.w.st-transparent::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;
  background:linear-gradient(140deg,var(--tl-rim-a),var(--tl-rim-b) 32%,var(--tl-rim-b) 68%,color-mix(in srgb,var(--tl-rim-a) 75%,transparent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
/* Avec une couleur choisie, le verre et son liseré prennent une légère teinte */
.w.st-transparent.has-c{background:linear-gradient(155deg,color-mix(in srgb,var(--wc) 16%,var(--tl-fill-a)),color-mix(in srgb,var(--wc) 8%,var(--tl-fill-b)) 55%,color-mix(in srgb,var(--wc) 12%,transparent))}
.w.st-transparent.has-c::before{background:linear-gradient(140deg,var(--tl-rim-a),color-mix(in srgb,var(--wc) 40%,transparent) 35%,color-mix(in srgb,var(--wc) 25%,transparent) 65%,color-mix(in srgb,var(--tl-rim-a) 75%,transparent))}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.w.st-transparent{background:color-mix(in srgb,var(--surface) 72%,transparent)}}
.w.floating.st-transparent{box-shadow:var(--shadow-pop)}

/* Fond d'écran : deux couches pour passer d'un fond à l'autre en fondu quand on change de page */
.wall .wl{position:absolute;inset:0;background-size:cover;background-position:center}
.wall::after{z-index:1}

/* Onglets des pages : une capsule discrète, lisible aussi par-dessus un fond d'écran */
.ptabs{display:flex;margin:-4px 0 12px}
.ptabs[hidden]{display:none}
.ptabs-in{display:inline-flex;gap:2px;padding:3px;max-width:100%;overflow-x:auto;scrollbar-width:none;border-radius:10px;
  background:color-mix(in srgb,var(--surface-2) 82%,transparent);border:1px solid var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.ptabs-in::-webkit-scrollbar{display:none}
.ptab{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:7px;font-size:14px;font-weight:500;color:var(--muted);white-space:nowrap;flex:none;transition:background-color .2s,color .2s}
.ptab:hover{color:var(--ink)}
.ptab.on{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 0 0 1px var(--line)}
.ptab .pname{max-width:16ch;overflow:hidden;text-overflow:ellipsis}
.pdot{width:7px;height:7px;border-radius:50%;background:var(--pc,var(--muted));opacity:.55;flex:none;display:inline-block}
.ptab.on .pdot{background:var(--pc,var(--accent));opacity:1}
.ptab .ppen{display:inline-grid;margin-right:-4px;color:var(--muted)}
.ptab .ppen svg{width:13px;height:13px}
.ptab.padd{color:var(--muted);gap:5px;padding:0 10px}
.ptab.padd svg{width:14px;height:14px}
.chip .pdot{opacity:1;background:var(--pc,var(--accent))}
.chip[aria-pressed="true"] .pdot{box-shadow:0 0 0 1.5px var(--surface)}
@media (prefers-reduced-motion:reduce){.ptab{transition:none}}

/* Les pages côte à côte : on les fait glisser, chacune s'arrête bien en place.
   Chaque page déborde sur les marges pour que le glissement aille d'un bord à l'autre de l'écran. */
main.wrap{--gl:max(16px,env(safe-area-inset-left,0px));--gr:max(16px,env(safe-area-inset-right,0px))}
.pages{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;
  margin:-4px calc(-1 * var(--gr)) -4px calc(-1 * var(--gl));transition:height .22s ease;-webkit-overflow-scrolling:touch}
.pages::-webkit-scrollbar{display:none}
.pages > .grid{flex:1;padding:4px var(--gr) 4px var(--gl)}
.pg{flex:0 0 100%;min-width:0;padding:4px var(--gr) 4px var(--gl);scroll-snap-align:start;scroll-snap-stop:always;align-self:flex-start}
body:not(.multi) .pages{scroll-snap-type:none}
body.dragging .pages{transition:none;overflow-x:hidden}
@media (prefers-reduced-motion:reduce){.pages{transition:none}}
.gal-item:disabled{opacity:.5;cursor:not-allowed}
.gal-item:disabled:hover{border-color:var(--line);background:none}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn svg{width:16px;height:16px}
@media (max-width:520px){.pill.add .lbl{display:inline}}
/* Par-dessus un fond d'écran, l'aide sous la barre du haut garde un petit fond pour rester lisible */
body.has-wall .tip span{padding:3px 9px;border-radius:7px;background:color-mix(in srgb,var(--bg) 72%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* ================= Retouches rapides (30/10/2026) ================= */
/* Police choisie (Mon profil → Police) : remplace Hanken Grotesk partout */

/* Couleur principale lisible : encre posée sur la couleur, et version « texte » assez contrastée sur la page */
:root{--accent-ink:#fff;--accent-text:var(--accent)}
.avatar,.tile[aria-pressed="true"]::after{color:var(--accent-ink)}
.brand i,.onb h1 em,.gal-ico,.tile svg{color:var(--accent-text)}

/* Roue chromatique */
.sw.wheel{background:conic-gradient(from 0deg,#f33,#fc2,#5d4,#2cd,#36f,#c4f,#f33);position:relative}
.sw.wheel::after{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--surface);box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.sw.wheel.custom::after{background:var(--cur)}
.cwheel{display:grid;grid-template-columns:168px 1fr;gap:16px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.cw-ring{position:relative;width:168px;aspect-ratio:1;border-radius:50%;touch-action:none;cursor:crosshair;
  background:radial-gradient(circle closest-side,hsl(0 0% var(--cwl)),transparent),conic-gradient(hsl(0 100% var(--cwl)),hsl(60 100% var(--cwl)),hsl(120 100% var(--cwl)),hsl(180 100% var(--cwl)),hsl(240 100% var(--cwl)),hsl(300 100% var(--cwl)),hsl(360 100% var(--cwl)))}
.cw-ring:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.cw-thumb{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.25),0 2px 6px rgba(0,0,0,.25);pointer-events:none}
.cw-side{display:grid;gap:10px;min-width:0}
.cw-l{display:grid;gap:4px;font-size:13px;font-weight:600}
.cw-l input{width:100%;accent-color:var(--ink)}
.cw-prev{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:10px 12px;border-radius:8px}
.cw-prev b{font-size:20px;font-weight:700}
.cw-prev span{font-weight:600}
@media (max-width:520px){.cwheel{grid-template-columns:1fr;justify-items:center}.cw-ring{width:min(220px,70vw)}.cw-side{width:100%}}

/* Fonds d'écran : galerie de fonds maison, photo importée, « Appliquer à » */
.wtiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px}
.wtile{display:flex;flex-direction:column;gap:4px;align-items:stretch;text-align:center;font-size:11px;color:var(--muted)}
.wtile i{display:grid;place-items:center;height:52px;border-radius:8px;background:var(--surface-2) center/cover;border:1px solid var(--line);font-style:normal;font-size:11px;color:var(--muted)}
.wtile[aria-pressed="true"] i{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--ink);border-color:transparent}
.wtile[aria-pressed="true"]{color:var(--ink);font-weight:600}
.wscope{display:grid;gap:8px;padding-top:2px}
.wscope .seg{max-width:460px}
.sh-hint{font-size:12px;text-align:center}
.row-btns .sp{flex:1 1 0;min-width:0}
.row-btns:has(.sp) .btn{flex:0 1 auto}
.sh-end{margin-top:4px}

/* ================= Réglages d'un widget (refonte du 30/10/2026) ================= */
/* Un panneau, trois onglets. Téléphone : feuille qui s'arrête sous le haut de la page, onglets dans une capsule de verre en bas.
   Ordinateur : panneau à droite, la page reste visible (et se resserre sur les écrans larges), le widget réglé est entouré. */
.scrim:has(.sheet.wcfg){background:rgba(15,15,15,.28)}
.sheet.wcfg{position:fixed;left:0;right:0;bottom:0;top:min(110px,16vh);width:auto;max-height:none;margin:0 auto;max-width:640px;padding:0;gap:0;
  display:flex;flex-direction:column;overflow:hidden;border-radius:18px 18px 0 0;
  background:color-mix(in srgb,var(--surface) 94%,transparent);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4)}
:root[data-theme="dark"] .sheet.wcfg{background:color-mix(in srgb,#1E1E1E 95%,transparent)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .sheet.wcfg{background:color-mix(in srgb,#1E1E1E 95%,transparent)}}
.wc-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--line);flex:none}
.wc-head h2{margin:0;font-size:16px;font-weight:600;letter-spacing:-.01em;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wc-cancel,.wc-save{min-height:44px;padding:0 10px;border-radius:8px;font-size:15px}
.wc-cancel{justify-self:start;color:var(--muted)}
.wc-save{justify-self:end;font-weight:700;color:var(--ink)}
.wc-cancel:hover,.wc-save:hover{background:var(--surface-2)}
.wc-head .x{display:none}
.wc-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px max(16px,env(safe-area-inset-right,0px)) 104px max(16px,env(safe-area-inset-left,0px));display:grid;grid-auto-rows:max-content;gap:22px;align-content:start}
.wc-body .field > span{display:flex;align-items:center;gap:6px}
.wc-foot{display:none}

/* Capsule d'onglets flottante (téléphone) */
.wc-tabs{position:absolute;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:3;display:flex;gap:4px;padding:5px;border-radius:999px;
  background:color-mix(in srgb,var(--surface) 58%,transparent);-webkit-backdrop-filter:blur(20px) saturate(1.8);backdrop-filter:blur(20px) saturate(1.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 0 0 1px rgba(20,20,20,.08),0 12px 30px -10px rgba(20,20,20,.35)}
:root[data-theme="dark"] .wc-tabs{background:color-mix(in srgb,#2A2A2A 62%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(0,0,0,.5),0 12px 30px -10px rgba(0,0,0,.7)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .wc-tabs{background:color-mix(in srgb,#2A2A2A 62%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(0,0,0,.5),0 12px 30px -10px rgba(0,0,0,.7)}}
.wc-tab{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:44px;min-width:52px;padding:0 14px;border-radius:999px;color:var(--ink);font-size:14px;font-weight:600;transition:background-color .2s,color .2s}
.wc-tab svg{width:20px;height:20px;flex:none}
.wc-tab span{display:none}
.wc-tab.on{background:var(--ink);color:var(--surface);padding:0 16px 0 14px}
.wc-tab.on span{display:inline}
.wc-tab:focus-visible{outline:2px solid var(--accent-text,var(--ink));outline-offset:2px}

/* Onglet Apparence : quatre aperçus de style avec le vrai contenu du widget */
.wc-styles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.wc-style{position:relative;display:flex;flex-direction:column;gap:6px;text-align:center;font-size:13px;color:var(--muted);border-radius:12px}
.wc-style.on{color:var(--ink);font-weight:600}
.wc-mini{position:relative;display:block;height:108px;border-radius:12px;overflow:hidden;background:var(--surface-2) center/cover;box-shadow:inset 0 0 0 1px var(--line);pointer-events:none}
.wc-style.on .wc-mini{box-shadow:0 0 0 2px var(--ink)}
.wc-mini.tl-bg{background-image:linear-gradient(135deg,#FFD8C4 0%,#F3B9CF 40%,#B7C3F2 75%,#9ED8E4 100%)}
:root[data-theme="dark"] .wc-mini.tl-bg{background-image:linear-gradient(135deg,#3B2A4E 0%,#25345E 55%,#14505A 100%)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .wc-mini.tl-bg{background-image:linear-gradient(135deg,#3B2A4E 0%,#25345E 55%,#14505A 100%)}}
.wc-sc{position:absolute;left:0;top:0;width:var(--nw,340px);height:var(--nh,216px);padding:14px;box-sizing:border-box;transform:scale(var(--k,.5));transform-origin:0 0;display:block}
.wc-sc > .w{width:100%;height:100%;animation:none !important;cursor:default}
.wc-mini .w-body.scroll::after{display:none}
.wc-check{position:absolute;top:7px;right:7px;width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--surface);display:none;place-items:center;box-shadow:0 0 0 2px var(--surface)}
.wc-check svg{width:13px;height:13px}
.wc-style.on .wc-check{display:grid}
.wc-name{line-height:1.2}
.wc-style:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* Le verre se comporte dans un aperçu comme sur la page */
.wc-mini.has-wall,.wc-mini.tl-bg{--tl-fill-a:rgba(255,255,255,.30);--tl-fill-b:rgba(255,255,255,.06)}
.wc-mini.has-wall .w.st-transparent,.wc-mini.tl-bg .w.st-transparent{text-shadow:0 1px 1px color-mix(in srgb,var(--bg) 55%,transparent)}
:root[data-theme="dark"] .wc-mini.has-wall,:root[data-theme="dark"] .wc-mini.tl-bg{--tl-fill-a:rgba(255,255,255,.12);--tl-fill-b:rgba(255,255,255,.02);--tl-rim-a:rgba(255,255,255,.5)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .wc-mini.has-wall,:root:not([data-theme="light"]) .wc-mini.tl-bg{--tl-fill-a:rgba(255,255,255,.12);--tl-fill-b:rgba(255,255,255,.02);--tl-rim-a:rgba(255,255,255,.5)}}

/* Appliquer aussi à : les autres widgets de la page, en vignettes ; cochés, ils montrent déjà leur nouveau look */
.wc-ah{display:flex;align-items:center;justify-content:space-between;gap:8px}
.wc-al{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--ink)}
.wc-al svg{width:17px;height:17px}
.wc-all{min-height:44px;padding:0 4px;font-size:14px;font-weight:600;color:var(--accent-text,var(--ink));text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.wc-vigs{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 20px) / 3);gap:10px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;padding:3px 3px 6px;margin:-3px -3px 0}
.wc-vig{position:relative;border-radius:12px;scroll-snap-align:start;transition:opacity .2s}
.wc-vig .wc-mini{height:106px}
.wc-vig:not(.on) .wc-mini{opacity:.5}
.wc-vig.on .wc-mini{box-shadow:0 0 0 2px var(--ink)}
.wc-tick{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--muted);background:color-mix(in srgb,var(--surface) 80%,transparent)}
.wc-vig.on .wc-tick{background:var(--ink);border-color:var(--ink);color:var(--surface);box-shadow:0 0 0 2px var(--surface)}
.wc-tick svg{width:12px;height:12px}
.wc-vig:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.wc-apply .muted{margin:0;font-size:12px}

/* Onglets Contenu et Plus */
.wc-body .preview{min-height:0;padding:12px}
.wc-body .preview .w.s-S{height:150px;max-width:170px}.wc-body .preview .w.s-M{height:150px;max-width:360px}.wc-body .preview .w.s-L,.wc-body .preview .w.s-XL{height:260px;max-width:360px}
.wc-body .chip:disabled{opacity:.45;cursor:not-allowed}
.wc-acts{display:grid;gap:10px}
.wc-acts .btn{width:100%;justify-content:center}
.wc-acts .muted{margin:0;font-size:12px}
/* Couleurs : 8 ou 9 pastilles sur une ligne, cibles de 44 px au plus large */
.wc-body .swatches{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,44px);justify-content:space-between;gap:4px}
.wc-body .swatches .sw{width:100%;height:auto;aspect-ratio:1}
.wc-body .muted{margin:0}

/* Ordinateur : panneau à droite, pleine hauteur, la page reste visible */
@media (min-width:761px){
  .scrim.side,.scrim.side:has(.sheet.wcfg){background:transparent;display:block}
  .sheet.wcfg{left:auto;right:0;top:0;bottom:0;width:420px;max-width:100vw;border-radius:0;box-shadow:-12px 0 36px rgba(15,15,15,.12),-1px 0 0 var(--line);
    background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none;animation:wc-in .22s ease-out}
  :root[data-theme="dark"] .sheet.wcfg{background:#1E1E1E;box-shadow:-12px 0 36px rgba(0,0,0,.5),-1px 0 0 var(--line)}
  .wc-head{display:flex;justify-content:space-between;padding:14px 14px 10px 20px;border-bottom:0}
  .wc-head h2{text-align:left;font-size:20px}
  .wc-cancel,.wc-save{display:none}
  .wc-head .x{display:grid;width:36px;height:36px;border-radius:8px;place-items:center;background:var(--surface-2);flex:none}
  .wc-tabs{position:static;transform:none;margin:0 20px 6px;border-radius:9px;padding:3px;gap:3px;background:var(--surface-2);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  :root[data-theme="dark"] .wc-tabs{background:var(--surface-2);box-shadow:none}
  .wc-tab{flex:1;height:38px;border-radius:7px;font-size:14px;color:var(--muted);padding:0 10px}
  .wc-tab span{display:inline}
  .wc-tab.on{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(0,0,0,.06);padding:0 10px}
  .wc-body{padding:14px 20px 20px}
  .wc-foot{display:flex;gap:8px;padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);flex:none}
  .wc-foot .btn{flex:1}
  .w.cfg-on{outline:2px solid #2F5BFF;outline-offset:3px;animation:none !important}
}
@media (min-width:761px) and (prefers-color-scheme: dark){:root:not([data-theme="light"]) .sheet.wcfg{background:#1E1E1E;box-shadow:-12px 0 36px rgba(0,0,0,.5),-1px 0 0 var(--line)}:root:not([data-theme="light"]) .wc-tabs{background:var(--surface-2);box-shadow:none}}
@media (min-width:761px){:root[data-theme="dark"] .w.cfg-on{outline-color:#6F8DFF}}
@media (min-width:761px) and (prefers-color-scheme: dark){:root:not([data-theme="light"]) .w.cfg-on{outline-color:#6F8DFF}}
/* Écrans larges : la page se resserre à gauche du panneau pour rester entièrement visible */
@media (min-width:1100px){body.cfg-side main.wrap{margin-left:max(0px,calc((100% - 420px - 1240px) / 2));margin-right:420px}}
@keyframes wc-in{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
@media (max-width:760px){.sheet.wcfg{animation:wc-up .24s cubic-bezier(.2,.8,.2,1)}}
@keyframes wc-up{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.sheet.wcfg{animation:none}.wc-tab,.wc-vig{transition:none}}

/* ===== Compte (01/11/2026) ===== */
.acc-form{display:grid;gap:14px;margin:14px 0}
.acc-form .btn.primary{justify-self:start;min-height:44px}
.acc-err{margin:0;color:#C8243A;font-size:14px;font-weight:600}
.acc-err:empty{display:none}
.acc-info{margin:0;font-size:14px;font-weight:600;color:inherit}
.acc-info:empty{display:none}
.acc-cap:empty{display:none}
.acc-cap{min-height:0}
.linkbtn{background:none;border:0;padding:6px 0;min-height:44px;font:inherit;font-size:14px;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.linkbtn:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:4px}
[data-theme="dark"] .acc-err{color:#FF8A96}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .acc-err{color:#FF8A96}}
.pill.acc{position:relative}
.pill.acc.on::after{content:"";position:absolute;top:5px;right:5px;width:8px;height:8px;border-radius:50%;background:#0E9F6E;box-shadow:0 0 0 2px var(--surface)}
.onb-acc{margin:18px 0 0;color:var(--muted);font-size:14px}

/* 03/11/2026 · Widget Équipe : prochain match et forme cliquables, bulle de la forme */
.nbtn{display:block;width:100%;text-align:left;border-radius:8px;padding:4px 6px;margin-left:-6px;margin-right:-6px;width:calc(100% + 12px);transition:background .15s}
.nbtn:hover{background:color-mix(in srgb,currentColor 7%,transparent)}
.nbtn:focus-visible{outline:2px solid var(--wacc,var(--accent));outline-offset:-2px}
.form .fm{cursor:pointer;transition:transform .12s}
.form .fm:hover,.form .fm.on{transform:translateY(-2px)}
.form .fm:focus-visible{outline:2px solid var(--wacc,var(--accent));outline-offset:2px}
@media (hover:none){.form .fm{position:relative}.form .fm::after{content:'';position:absolute;inset:-8px -3px}}
body.editing .grid .nbtn,body.editing .grid .form .fm{pointer-events:none}
#ftip{position:fixed;z-index:80;max-width:240px;padding:8px 11px;border-radius:10px;background:#191919;color:#fff;font-size:13px;line-height:1.35;box-shadow:0 6px 24px rgba(0,0,0,.22);pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s}
#ftip.show{opacity:1;transform:none}
#ftip.tap{pointer-events:auto;cursor:pointer}
#ftip b{display:block;font-weight:700}
#ftip small{display:block;color:rgba(255,255,255,.7);font-size:12px}
#ftip .go{display:block;margin-top:5px;font-size:12px;font-weight:600;color:#9DB4FF}
[data-theme="dark"] #ftip{background:#F1F0ED;color:#191919}
[data-theme="dark"] #ftip small{color:rgba(0,0,0,.6)}
[data-theme="dark"] #ftip .go{color:#2F5BFF}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #ftip{background:#F1F0ED;color:#191919}:root:not([data-theme="light"]) #ftip small{color:rgba(0,0,0,.6)}:root:not([data-theme="light"]) #ftip .go{color:#2F5BFF}}
@media (prefers-reduced-motion:reduce){#ftip,.form .fm{transition:none}}

/* ================= Joueurs (04/11/2026) : noms cliquables, widget Joueur, fiche d'un joueur ================= */
.plk{display:inline;padding:0;margin:0;border:0;background:none;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;text-align:inherit;cursor:pointer;border-radius:4px}
.plk:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.plk:focus-visible{outline:2px solid var(--wacc,var(--accent));outline-offset:1px}
.plk.fav{font-weight:700}
.lead .pl .plk,.hero-stat .who .plk{white-space:nowrap}
.pl-top h3 .plk{-webkit-line-clamp:2}
.pl-match{display:block;font-size:13px;min-width:0}
.pl-match small{display:block;color:var(--wm);font-size:12px;font-weight:500;line-height:1.35}
.pl-match b{display:block;font-weight:600;font-size:14px;line-height:1.3;overflow-wrap:anywhere}
.pl-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px 16px}
.pl-season{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:6px}
.w .pl-season .stat{background:color-mix(in srgb,currentColor 6%,transparent);border-radius:10px;padding:7px 9px;min-width:0}
.w .pl-season .stat b{font-family:var(--f-body);font-weight:600;font-size:19px}
.w .pl-season .stat span{display:block;font-size:10.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--wm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#plx .pl-season .stat b{font-family:var(--f-body);font-weight:600;font-size:22px}
#plx .pl-season .stat span{letter-spacing:0;text-transform:none;font-weight:600;font-size:12px}
#plx .pl-match small{color:var(--muted)}
/* 5 derniers matchs : pastilles colorées par le résultat de l'équipe, avec le chiffre clé du joueur */
.form.pform{flex-wrap:wrap}
.form.pform .fm{width:auto;min-width:24px;padding:0 5px;font-variant-numeric:tabular-nums}
.pf-fig{flex:none;display:grid;place-items:center;min-width:30px;height:24px;padding:0 6px;border-radius:6px;font-weight:600;font-size:12px;color:#fff;font-variant-numeric:tabular-nums}
.pf-fig.W{background:var(--win)}.pf-fig.D{background:var(--draw)}.pf-fig.L{background:var(--loss)}
.w.st-solid .pf-fig{background:rgba(255,255,255,.22)}.w.st-solid .pf-fig.W{background:rgba(255,255,255,.95);color:#111}
.w.st-solid.ink-dark .pf-fig{background:color-mix(in srgb,var(--wink) 16%,transparent);color:var(--wink)}.w.st-solid.ink-dark .pf-fig.W{background:var(--wink);color:var(--wbg)}
.pl-rec{display:flex;align-items:center;gap:10px;padding:6px 0;border-top:1px solid var(--wl,var(--line));min-width:0}
.pl-rec.nbtn{padding:6px 0;margin:0;width:100%;border-top:1px solid var(--wl,var(--line));border-radius:0}
.pl-rec-t{min-width:0}
.pl-rec-t small{display:block;color:var(--wm,var(--muted));font-size:12px;line-height:1.3}
.pl-rec-t b{display:block;font-weight:600;font-size:13.5px;line-height:1.3;overflow-wrap:anywhere}
.pl-legend{margin:4px 0 0;font-size:11px;color:var(--wm,var(--muted))}
.pl-res{margin-top:8px}
.pl-res .pl-act{margin-left:auto;font-weight:600;font-size:13px;white-space:nowrap;color:var(--muted)}
.pl-res .pl-hit[aria-pressed="true"] .pl-act{color:#B8860B}
[data-theme="dark"] .pl-res .pl-hit[aria-pressed="true"] .pl-act{color:#F2C230}
.chip .fstar{margin-left:-3px}

/* Lot C « Simplifier » (04/11/2026) : onglet Apparence sur un seul écran. 4 petites vignettes de style sur une ligne,
   aperçu du vrai widget en haut sur téléphone, « Appliquer aussi à » replié sur une ligne. */
.wc-styles{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.wc-style{font-size:12px;gap:5px}
.wc-style .wc-mini{height:64px;border-radius:10px}
.wc-check{top:4px;right:4px;width:18px;height:18px}.wc-check svg{width:11px;height:11px}
.wc-lookprev{padding:8px}
.wc-apply .wc-all{white-space:nowrap}
.wc-body .wc-lookprev .w.s-S,.wc-body .wc-lookprev .w.s-M,.wc-body .wc-lookprev .w.s-L,.wc-body .wc-lookprev .w.s-XL{height:138px}
.wc-aline{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:48px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);text-align:left}
.wc-aline small{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);white-space:nowrap}
.wc-aline i{font-style:normal;font-size:18px;line-height:1;transition:transform .2s}
.wc-aline[aria-expanded="true"] i{transform:rotate(90deg)}
.wc-apply .wc-ah .muted{font-size:12px}
@media (prefers-reduced-motion:reduce){.wc-aline i{transition:none}}

/* Formes libres (lot C) : coin à étirer en bas à droite en mode Modifier ; la pastille de taille se décale à sa gauche */
.w-rsz{position:absolute;right:4px;bottom:4px;width:36px;height:36px;border-radius:10px;z-index:4;place-items:center;color:var(--ink);background:color-mix(in srgb,var(--surface) 85%,transparent);box-shadow:0 0 0 1px var(--line);cursor:nwse-resize;touch-action:none}
.w-rsz svg{width:16px;height:16px}
.w-rsz:hover{background:var(--surface)}
.w.st-solid .w-rsz{background:#fff;color:#111;box-shadow:none}
@media (pointer:coarse){.w-rsz{width:40px;height:40px}}
body.editing .w-size{right:46px}
@media (pointer:coarse){body.editing .w-size{right:50px}}
.w.resizing{opacity:.55}
.rsz-ph{position:relative;border-style:solid;border-color:var(--ink)}
.rsz-ph::after{content:attr(data-label);position:absolute;right:10px;bottom:10px;padding:4px 9px;border-radius:999px;background:var(--ink);color:var(--surface);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
/* Widget haut et étroit (1 colonne, 2 rangées ou plus) : contenu « Grand » un peu resserré */
.w.sh-w1.s-L{font-size:14px}
@media (max-width:760px){.w.sh-w1.s-L .mrow .nm{display:none}.w.sh-w1.s-L .mrow{justify-content:center}}
/* Étroit sur téléphone : l'en-tête ne garde que le titre (la petite info à droite chevauchait le titre) */
@media (max-width:760px){.w.sh-w1:not(.s-S) .w-head .meta{display:none}.w.sh-w1:not(.s-S) .w-head .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}}
@media (max-width:760px){.w.sh-w1:not(.s-S) .p-banner{display:none}.w.sh-w1:not(.s-S) .p-banner + .prof{margin-top:0}}

/* ---- Premiers pas (lot F, 04/11/2026) : carte du tutoriel et contour sur l'élément à toucher ---- */
#tuto{position:fixed;z-index:35;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 12px);background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 40px rgba(13,22,38,.22);padding:14px 16px 16px;display:grid;gap:8px;max-height:min(60vh,460px);overflow-y:auto;animation:tutoIn .25s ease}
@media (min-width:761px){#tuto{left:auto;right:24px;bottom:24px;width:360px}}
#tuto h2{margin:0;font-size:18px;font-weight:700;letter-spacing:-.01em}
.tuto-top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:24px}
.tuto-n{font-size:13px;font-weight:600;color:var(--muted)}
.tuto-txt{font-size:15px;line-height:1.45;color:var(--ink)}
.tuto-ol{margin:8px 0 0;padding-left:22px;display:grid;gap:4px}
.tuto-note{margin:10px 0 0;font-size:13px;color:var(--muted)}
.tuto-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.tuto-btns .btn.primary{flex:1}
#sheet-root:not(:empty) ~ #tuto,#onb-root:not(:empty) ~ #tuto{display:none}
body.dragging #tuto{opacity:.2;pointer-events:none}
body.tuto main{padding-bottom:230px}
.tuto-hl{outline:3px solid var(--accent);outline-offset:3px;animation:tutoPulse 1.6s ease-in-out infinite}
.w-rsz.tuto-hl{outline-offset:2px}
.gal-item.tuto-pick{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
@keyframes tutoPulse{50%{outline-color:color-mix(in srgb,var(--accent) 35%,transparent)}}
@keyframes tutoIn{from{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){.tuto-hl,#tuto{animation:none}}
body.tuto .toast{bottom:auto;top:calc(env(safe-area-inset-top,0px) + 76px)}
.wel-q{display:flex;gap:8px;max-width:480px}.wel-q .inp{flex:1;min-width:0}.wel-q .btn{flex:none}

/* ================= Mode appli sur téléphone (04/11/2026) =================
   Pas de zoom ni de glissement de côté, pas de rebond de la page, pas de sélection de texte ni de menu « copier »
   sur l'interface (les champs restent normaux), champs en 16 px (sinon l'iPhone zoome), panneaux calés au-dessus du clavier. */
html{overflow-x:hidden;overscroll-behavior:none;touch-action:pan-x pan-y}
body{overflow-x:clip;overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent}
img,svg{-webkit-user-drag:none}
@media (pointer:coarse){
  body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  input,textarea,select,[contenteditable]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
  input,textarea,select,.inp{font-size:16px}
}
/* Panneau ou accueil ouvert sur téléphone : la page derrière ne bouge plus. */
@media (max-width:760px){html:has(#sheet-root .scrim),html:has(#onb-root .onb){overflow:hidden}}
.scrim,.onb,.sheet,.wc-body,#tuto{overscroll-behavior:contain}
/* Clavier ouvert (téléphone) : fond et panneaux limités à la partie visible de l'écran. */
@media (max-width:760px){
  .scrim,.onb{top:var(--vvt,0px);bottom:auto;height:var(--vvh,100%)}
  .sheet{max-height:min(88vh,calc(var(--vvh,100vh) - 12px),860px)}
  .sheet.wcfg{top:calc(var(--vvt,0px) + min(110px,16vh));bottom:var(--kb,0px)}
  body.kb .sheet.wcfg{top:calc(var(--vvt,0px) + 8px)}
  body.kb .wc-tabs{display:none}
  body.kb .toast{bottom:calc(var(--kb,0px) + 12px)}
  body.kb #tuto{bottom:calc(var(--kb,0px) + 8px);max-height:40vh}
}
footer a,.muted a{color:inherit;text-underline-offset:3px}