/* ============================================================================
   IKORUN — feuille de style (sortie d'index.html le 28/09, V3.3.0)
   Avant : 232 Ko de CSS écrits dans index.html, page que le téléphone retélécharge
   à chaque ouverture pour chercher une mise à jour. Ici, le fichier est mis en cache
   jusqu'à ce qu'il change : /!\ à CHAQUE modification, monter app.css?v=N dans
   index.html (servi « immutable » un an, voir _headers ; le pre-commit le vérifie).
   ============================================================================ */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500 700;font-display:swap;src:url(fonts/jetbrains-mono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500 700;font-display:swap;src:url(fonts/jetbrains-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:500 800;font-display:swap;src:url(fonts/unbounded-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:500 800;font-display:swap;src:url(fonts/unbounded-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root{
  --bg:#07090D; --s1:#12161D; --s2:#1A2028; --s3:#232B37; --marineL:#1F2F50; --hair:#252D3A; --hair2:#323C4C;
  --dim:#8B94A7; --muted:#97A0B2; --snow:#F4F6F9; --e:#4F8DFF; --e2:#6FA0FF; --ed:rgba(var(--e-rgb),.14);
  --e-rgb:79,141,255; --e2-rgb:111,160,255;
  --bronze:#C97B4A; --argent:#D7DCE3; --or:#F2B84B; --platine:#9FD8FF;
  --diamant:#7FE0E8; --maitre:#A98CF0; --legende:#FFD76A;
  --ok:#33D399; --warn:#FFB454; --bad:#FF6B7A;
  /* ===== DESIGN SYSTEM TOKENS ===== */
  --r-xs:10px; --r-sm:14px; --r-md:18px; --r-lg:22px; --r-pill:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --ease:cubic-bezier(.22,1,.36,1); --ease-spring:cubic-bezier(.34,1.4,.5,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --sh-sm:0 1px 2px rgba(0,0,0,.24),0 1px 0 rgba(255,255,255,.02) inset;
  --sh-md:0 6px 20px -8px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.03) inset;
  --sh-lg:0 16px 40px -12px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.04) inset;
  --sh-e:0 8px 22px -6px rgba(var(--e-rgb),.45),0 2px 6px -2px rgba(var(--e-rgb),.3);
  --grad-card:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 40%);
  --grad-btn:linear-gradient(180deg,#3775F2,#2961E0 55%,#2152CC);
  --sh-hero:0 24px 60px -16px rgba(0,0,0,.7),0 8px 24px -8px rgba(var(--e-rgb),.18),0 1px 0 rgba(255,255,255,.05) inset;
  --sh-deep:0 10px 28px -10px rgba(0,0,0,.65),0 2px 6px -2px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.03) inset;
  --bg-rgb:7,9,13;
  /* ===== RELIEF — élévation renforcée pour l'effet "flottant" ===== */
  --float-sm:0 10px 24px -10px rgba(0,0,0,.5),0 2px 6px -2px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.05) inset,0 0 0 1px rgba(255,255,255,.02) inset;
  --float-md:0 18px 40px -14px rgba(0,0,0,.62),0 4px 12px -4px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.06) inset;
  --float-lg:0 26px 60px -18px rgba(0,0,0,.7),0 8px 20px -6px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.07) inset;
  /* ===== LIQUID GLASS — surfaces translucides & givrées ===== */
  --s1-rgb:18,22,29; --s2-rgb:26,32,40; --s3-rgb:35,43,55;
  --glass-blur:26px; --glass-sat:1.5;
  /* Opacité relevée (.46→.82 / .5→.85) : calculée pour garder un ratio ≥4.5:1
     même dans le pire cas réel de l'app (halo d'accent jaune à son opacité
     maximale déclarée, .30, derrière la carte) — le verre reste "givré" mais
     n'est plus assez transparent pour qu'une couleur vive derrière fasse
     chuter le contraste du texte --dim/--muted au-dessus.
     18/09 (2) : redescendu a .68/.72 (demande explicite "plus transparent,
     comme l'accueil") -- volontairement PAS revenu a .46 (l'opacite d'origine
     qui avait cause le probleme de contraste a l'epoque) : .68 reste un cran
     au-dessus, a re-verifier si un theme d'accent tres vif + le halo qu'on
     vient d'ajouter sur les autres ecrans posent souci. Saturate aussi baisse
     (1.9->1.5) : moins "chrome epais", aligne sur .hv7-day/.hv7-score. */
  --glass-bg:rgba(var(--s1-rgb),.68); --glass-bg-2:rgba(var(--s2-rgb),.72);
  --glass-border:rgba(255,255,255,.14); --glass-border-soft:rgba(255,255,255,.08);
  --glass-shine:linear-gradient(155deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 22%,rgba(255,255,255,0) 45%);
  --glass-sheen:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.22) 48%,transparent 66%);
  --glass-shadow:0 20px 50px -16px rgba(0,0,0,.65),0 2px 10px -2px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.14) inset,0 -1px 0 rgba(0,0,0,.2) inset;
}
@keyframes glassFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
@keyframes glassSheenSweep{0%{transform:translateX(-120%) skewX(-12deg);}100%{transform:translateX(220%) skewX(-12deg);}}
@keyframes glassGlow{0%,100%{opacity:.55;}50%{opacity:1;}}
/* ===== MODE CLAIR ===== */
html[data-mode="light"]{
  --bg:#F2F4F8; --s1:#FFFFFF; --s2:#EDF0F5; --marineL:#D7E3FF; --hair:#E2E6ED; --hair2:#CDD3DD;
  --dim:#5F6675; --muted:#525A68; --snow:#10141B;
  /* vert/orange/rouge d'état assombris : #11A56B/#D98914/#E0394A tombaient à
     2,9–3,7:1 sur blanc (petits textes « −17 % », « 75 % de la cible »…) */
  --ok:#066B45; --warn:#9A5B00; --bad:#C42536;
  --or:#945800; --platine:#1B6FA3; --bronze:#9A5A2E; --maitre:#6E4FC4;
  --bg-rgb:242,244,248;
  --s1-rgb:255,255,255; --s2-rgb:237,240,245; --s3:#E0E5ED; --s3-rgb:224,229,237;
  /* --dim était trop clair (#9AA3B2, ~2.5:1 sur blanc) : assombri pour repasser
     au-dessus de 4.5:1. Opacité du verre relevée (.55→.88 / .6→.90) pour la
     même raison que côté sombre : moins sensible à ce qui défile derrière. */
  --glass-bg:rgba(255,255,255,.74); --glass-bg-2:rgba(237,240,245,.78);
  --glass-border:rgba(255,255,255,.6); --glass-border-soft:rgba(20,25,35,.06);
  --glass-shine:linear-gradient(155deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,.15) 25%,rgba(255,255,255,0) 48%);
  --glass-shadow:0 16px 40px -16px rgba(30,40,60,.22),0 2px 8px -2px rgba(30,40,60,.1),0 1px 0 rgba(255,255,255,.8) inset;
  /* 27/09 : ombres propres au mode clair. Il héritait des ombres NOIRES du mode sombre
     (50 à 70 %) : les tuiles et les boutons avaient un fondu sale et lourd, alors que
     les cartes voisines (--glass-shadow ci-dessus) restaient légères. Même dessin,
     teinte ardoise, intensité réduite. Le filet --hair2 manquait aussi (il restait
     à la valeur sombre #323C4C : contour quasi noir sur les boutons secondaires). */
  --sh-sm:0 1px 2px rgba(30,40,60,.10),0 1px 0 rgba(255,255,255,.8) inset;
  --sh-md:0 6px 18px -8px rgba(30,40,60,.18),0 1px 0 rgba(255,255,255,.8) inset;
  --sh-lg:0 16px 40px -12px rgba(30,40,60,.22),0 1px 0 rgba(255,255,255,.8) inset;
  --sh-deep:0 10px 28px -10px rgba(30,40,60,.22),0 2px 6px -2px rgba(30,40,60,.10);
  --float-sm:0 8px 20px -10px rgba(30,40,60,.20),0 2px 6px -2px rgba(30,40,60,.08),0 1px 0 rgba(255,255,255,.8) inset;
  --float-md:0 14px 34px -14px rgba(30,40,60,.22),0 3px 10px -3px rgba(30,40,60,.09),0 1px 0 rgba(255,255,255,.8) inset;
  --float-lg:0 22px 50px -18px rgba(30,40,60,.26),0 6px 16px -6px rgba(30,40,60,.10),0 1px 0 rgba(255,255,255,.8) inset;
}
html[data-mode="light"] #nav{background:rgba(255,255,255,.92);}
html[data-mode="light"] .ov{background:rgba(120,130,150,.35);}
html[data-mode="light"] .tb-gear{background:var(--s2);}
html[data-mode="light"] .topbar{background:linear-gradient(180deg,rgba(var(--bg-rgb),.5) 0%,rgba(var(--bg-rgb),.26) 65%,rgba(var(--bg-rgb),0) 100%);}
/* Bleu (défaut) en mode clair : le bleu vif pensé pour fond sombre est
   trop pâle sur fond clair (contraste < 3:1) → version assombrie, lisible
   comme texte/icône sur blanc tout en gardant l'identité "bleu". */
html[data-mode="light"][data-accent="blue"]{
  --e:#2864E8; --e2:#1A4BB8; --e-rgb:40,100,232; --e2-rgb:26,75,184;
  --grad-btn:linear-gradient(180deg,#3E78F5,#2864E8 55%,#1A4BB8);
}

/* ===== COULEURS D'ACCENT — Bleu (défaut) / Vert militaire chromé / Marron boisé chromé / Jaune chromé / Fibre de carbone ===== */
html[data-accent="green"]{
  --e:#7FB856; --e2:#A6D687; --e-rgb:127,184,86; --e2-rgb:166,214,135;
  --grad-btn:linear-gradient(180deg,#4E8734,#3E7229 55%,#325E1D);
  --marineL:#24361F; --hair:#1E2A1B; --hair2:#2C3D27;
  --bg:#0A0D08; --s1:#141C10; --s2:#1D2818; --s3:#293620;
  --bg-rgb:10,13,8; --s1-rgb:20,28,16; --s2-rgb:29,40,24; --s3-rgb:41,54,32;
}
html[data-mode="light"][data-accent="green"]{
  --marineL:#DCEBD0; --hair:#CFE3C2; --hair2:#B9D8A5;
  --bg:#F3F7EF; --s1:#FFFFFF; --s2:#E9F1E3; --bg-rgb:243,247,239; --s1-rgb:255,255,255; --s2-rgb:233,241,227; --s3:#D8E5CE; --s3-rgb:216,229,206;
  /* vert clair/pâle du dark mode illisible sur fond clair → vert forêt assombri */
  --e:#3F7A26; --e2:#2E5C1B; --e-rgb:63,122,38; --e2-rgb:46,92,27;
  --grad-btn:linear-gradient(180deg,#4F9530,#3F7A26 55%,#2E5C1B);
}
html[data-accent="brown"]{
  --e:#C88A4E; --e2:#DDA873; --e-rgb:200,138,78; --e2-rgb:221,168,115;
  --grad-btn:linear-gradient(180deg,#B07434,#93602B 55%,#7A4E22);
  --marineL:#3A2A1C; --hair:#2C2019; --hair2:#3D2C21;
  --bg:#0D0A07; --s1:#1E150E; --s2:#281C13; --s3:#36271A;
  --bg-rgb:13,10,7; --s1-rgb:30,21,14; --s2-rgb:40,28,19; --s3-rgb:54,39,26;
}
html[data-mode="light"][data-accent="brown"]{
  --marineL:#F0DFC9; --hair:#E9D2B8; --hair2:#DEC09B;
  --bg:#FAF4EC; --s1:#FFFFFF; --s2:#F1E4D3; --bg-rgb:250,244,236; --s1-rgb:255,255,255; --s2-rgb:241,228,211; --s3:#E6D2B7; --s3-rgb:230,210,183;
  /* marron/beige clair du dark mode illisible sur fond crème → café assombri */
  --e:#8C5726; --e2:#6E3F17; --e-rgb:140,87,38; --e2-rgb:110,63,23;
  --grad-btn:linear-gradient(180deg,#A66B32,#8C5726 55%,#6E3F17);
}
html[data-accent="red"]{
  --e:#FF5A45; --e2:#FF8A75; --e-rgb:255,90,69; --e2-rgb:255,138,117;
  --grad-btn:linear-gradient(180deg,#E84A36,#CC3522 55%,#A82816);
  --marineL:#3A1712; --hair:#2A1310; --hair2:#3D1B16;
  --bg:#0D0605; --s1:#1E0F0B; --s2:#281511; --s3:#361D17;
  --bg-rgb:13,6,5; --s1-rgb:30,15,11; --s2-rgb:40,21,17; --s3-rgb:54,29,23;
}
html[data-mode="light"][data-accent="red"]{
  --marineL:#F8DAD1; --hair:#F0C7BA; --hair2:#E4AFA0;
  --bg:#FCF1EC; --s1:#FFFFFF; --s2:#F6E0D8; --bg-rgb:252,241,236; --s1-rgb:255,255,255; --s2-rgb:246,224,216; --s3:#EBC5B4; --s3-rgb:235,197,180;
  /* rouge vif du dark mode trop pâle sur fond clair → rouge brique assombri */
  --e:#C23A24; --e2:#9C2C19; --e-rgb:194,58,36; --e2-rgb:156,44,25;
  --grad-btn:linear-gradient(180deg,#D8462C,#C23A24 55%,#9C2C19);
}
html[data-accent="yellow"]{
  --e:#F4C430; --e2:#FFDD75; --e-rgb:244,196,48; --e2-rgb:255,221,117;
  --grad-btn:linear-gradient(180deg,#FFDE7A,#F4C430 55%,#D9A518);
  --marineL:#3A310F; --hair:#332C10; --hair2:#473C16;
  --bg:#0D0B05; --s1:#1D170C; --s2:#282010; --s3:#362B16;
  --bg-rgb:13,11,5; --s1-rgb:29,23,12; --s2-rgb:40,32,16; --s3-rgb:54,43,22;
}
html[data-mode="light"][data-accent="yellow"]{
  --marineL:#FBF0C8; --hair:#F0E2AC; --hair2:#E4D189;
  --bg:#FAF6E8; --s1:#FFFFFF; --s2:#F3EBCC; --bg-rgb:250,246,232; --s1-rgb:255,255,255; --s2-rgb:243,235,204; --s3:#EBDCAB; --s3-rgb:235,220,171;
  /* jaune vif du dark mode quasi invisible sur fond clair → miel/moutarde assombri */
  --e:#8C6209; --e2:#6B4A06; --e-rgb:140,98,9; --e2-rgb:107,74,6;
  --grad-btn:linear-gradient(180deg,#A97A0C,#8C6209 55%,#6B4A06);
}

/* ===== FIBRE DE CARBONE — vrai tressage twill + reflets chromés ===== */
html[data-accent="carbon"]{
  --e:#C3C9D1; --e2:#F0F3F6; --e-rgb:195,201,209; --e2-rgb:240,243,246;
  --grad-btn:linear-gradient(108deg,#0a0b0d 0%,#1c1e22 20%,#4a4e55 34%,#eef1f4 45%,#ffffff 49%,#c7cdd4 54%,#2a2c30 70%,#0e0f11 100%);
  --marineL:#1B1D21; --hair:#2A2D32; --hair2:#3D4147;
  --bg:#040404; --s1:#0D0E10; --s2:#151619; --s3:#1F2023;
  --bg-rgb:4,4,4; --s1-rgb:13,14,16; --s2-rgb:21,22,25; --s3-rgb:31,32,35;
  --sh-e:0 8px 24px -6px rgba(195,201,209,.45),0 2px 8px -2px rgba(195,201,209,.28);
  --glass-border:rgba(220,224,229,.22); --glass-border-soft:rgba(220,224,229,.09);
  --glass-shine:linear-gradient(112deg,rgba(255,255,255,.18) 6%,rgba(255,255,255,.03) 18%,transparent 34%);
  --chrome-base:linear-gradient(165deg,#34373c 0%,#17181b 38%,#060607 62%,#212327 100%);
  --chrome-border:rgba(216,221,227,.32);
  --chrome-edge:linear-gradient(180deg,rgba(230,234,238,.6),rgba(230,234,238,0) 30%);
  --chrome-sheen:linear-gradient(100deg,transparent 24%,rgba(230,234,238,.7) 46%,rgba(230,234,238,.08) 55%,transparent 72%);
}
html[data-mode="light"][data-accent="carbon"]{
  --marineL:#DDE1E6; --hair:#D2D6DB; --hair2:#BFC4CB;
  --bg:#EEF0F2; --s1:#FFFFFF; --s2:#E4E7EB; --bg-rgb:238,240,242; --s1-rgb:255,255,255; --s2-rgb:228,231,235; --s3:#D2D7DD; --s3-rgb:210,215,221;
  /* chrome/argent quasi blanc du dark mode invisible sur fond clair → acier brossé foncé, lisible */
  --e:#43474E; --e2:#22252A; --e-rgb:67,71,78; --e2-rgb:34,37,42;
  --sh-e:0 8px 22px -6px rgba(67,71,78,.3),0 2px 6px -2px rgba(67,71,78,.2);
  --glass-shine:linear-gradient(112deg,rgba(255,255,255,.55) 6%,rgba(255,255,255,.1) 20%,transparent 38%);
}
/* PLAQUE DE CARBONE (V3.5.0) — html[data-carbon="twill|forged"], posé par carbonApply :
   deux tuiles calculées au canevas (lumière à 0° et à 90°) fondues l'une dans l'autre selon
   le défilement ou l'inclinaison, un vernis qui glisse par-dessus, puis une vignette. */
#ikCarbon{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:#07080a;}
#ikCarbon i{position:absolute;inset:0;background-image:var(--cf-a,none);background-size:var(--cf-sz,28px) var(--cf-sz,28px);}
#ikCarbon i.b{background-image:var(--cf-b,none);opacity:.5;will-change:opacity;}
#ikCarbon b{position:absolute;inset:-30%;will-change:transform;
  background:linear-gradient(118deg,transparent 30%,rgba(255,255,255,.035) 40%,rgba(255,255,255,.1) 47%,rgba(255,255,255,.16) 50%,rgba(255,255,255,.06) 54%,transparent 64%),
    radial-gradient(38% 26% at 28% 30%,rgba(255,255,255,.07),transparent 70%);}
html[data-carbon] body::before{background:#07080a;}
html[data-carbon] body::after{inset:0;opacity:1;mix-blend-mode:normal;background-size:auto;
  background-image:radial-gradient(130% 75% at 50% 0%,rgba(0,0,0,0) 35%,rgba(0,0,0,.55) 100%),linear-gradient(180deg,rgba(0,0,0,.16),rgba(0,0,0,.42));}
/* en clair : carbone argent (fibre aluminisée), vernis plus brillant */
html[data-carbon][data-mode="light"] #ikCarbon{background:#c9ced4;}
html[data-carbon][data-mode="light"] #ikCarbon b{background:linear-gradient(118deg,transparent 30%,rgba(255,255,255,.25) 44%,rgba(255,255,255,.55) 50%,rgba(255,255,255,.2) 56%,transparent 68%);}
html[data-carbon][data-mode="light"] body::before{background:#c9ced4;}
html[data-carbon][data-mode="light"] body::after{background-image:radial-gradient(130% 75% at 50% 0%,rgba(255,255,255,.22) 30%,rgba(236,239,242,.66) 100%),linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.3));}
/* cartes : verre fumé posé sur la plaque, vernis net en haut, arête chromée. Le voile est
   volontairement léger et le flou quasi nul — sinon le tressage se noie sous la carte et
   ne se voit plus (c'était le cas avant : « on dirait du mono », ou pire, du bruit flou). */
html[data-carbon]{--lg-fill:rgba(5,6,8,.4);--lg-blur:blur(3px) saturate(150%);
  --lg-spec:linear-gradient(180deg,rgba(255,255,255,.1) 0,rgba(255,255,255,.03) 22%,transparent 42%),radial-gradient(120% 70% at 12% -20%,rgba(255,255,255,.14),transparent 55%);
  --lg-rim:inset 0 0 0 1px rgba(220,226,232,.14),inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.45);
  --chrome-base:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0) 42%,rgba(0,0,0,.34)),var(--cf-a,none) 0 0/var(--cf-sz,28px) var(--cf-sz,28px),#0a0b0d;}
html[data-carbon][data-mode="light"]{--lg-fill:rgba(255,255,255,.5);--lg-blur:blur(3px) saturate(120%);
  --lg-spec:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.28) 30%,transparent 52%);
  --lg-rim:inset 0 0 0 1px rgba(255,255,255,.7),inset 0 1px 0 #fff,0 0 0 1px rgba(20,30,50,.1);}
html[data-accent="carbon"] .card,html[data-accent="carbon"] #s-outils .card,
html[data-accent="carbon"] .grp-card,html[data-accent="carbon"] .chrome-box,
html[data-accent="carbon"] .chrome-sbox,html[data-accent="carbon"] .chrome-chip,
html[data-accent="carbon"] #nav{border-color:var(--chrome-border);}
html[data-accent="carbon"] .nb.on{color:var(--e2);text-shadow:0 0 12px rgba(var(--e-rgb),.5);}
/* bouton carbone : filet chromé mobile sur nappe carbone — texte protégé par une ombre nette */
html[data-accent="carbon"] .btn{text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 10px rgba(0,0,0,.55);}
/* ===== LISIBILITÉ DU TEXTE DES BOUTONS SUR LES ACCENTS CLAIRS =====
   .btn est en texte blanc sur --grad-btn. Selon l'accent, le haut du dégradé est
   clair (jaune, vert...) et le blanc y devient peu lisible. Deux mesures :
   1) une ombre portée légère sur tous les accents (ce qui était déjà fait pour
      le carbone) — détache le texte quel que soit le point du dégradé ;
   2) pour le jaune en mode sombre, le dégradé est clair sur TOUTE sa hauteur :
      l'ombre ne suffit pas, on passe donc le texte en foncé (contraste ~10:1). */
.btn{text-shadow:0 1px 2px rgba(0,0,0,.45);}
html[data-mode="dark"][data-accent="yellow"] .btn{color:#2A2205;text-shadow:0 1px 1px rgba(255,255,255,.35);}
html[data-mode="dark"][data-accent="yellow"] .btn.ghost{color:var(--snow);text-shadow:none;}
html[data-accent="carbon"] .accent-dot.on{box-shadow:var(--sh-sm),0 0 0 1px rgba(230,234,238,.5);}

.accent-picker{display:flex;gap:9px;align-items:center;flex-wrap:wrap;}
.accent-dot{width:24px;height:24px;border-radius:50%;cursor:pointer;flex-shrink:0;
  border:2px solid transparent;box-shadow:var(--sh-sm);transition:transform .2s var(--ease-spring),border-color .2s ease;}
.accent-dot:active{transform:scale(.88);}
.accent-dot.on{border-color:var(--snow);transform:scale(1.14);}
.accent-dot[data-a="blue"]{background:linear-gradient(135deg,#6FA0FF,#2660DB);}
.accent-dot[data-a="red"]{background:linear-gradient(135deg,#FF8A75,#D93A26);}
.accent-dot[data-a="green"]{background:linear-gradient(135deg,#A6D687,#5E9339);}
.accent-dot[data-a="brown"]{background:linear-gradient(135deg,#DDA873,#98602E);}
.accent-dot[data-a="yellow"]{background:linear-gradient(135deg,#FFDD75,#D9A518);}
.accent-dot[data-a="forged"]{background:
    linear-gradient(115deg,transparent 32%,rgba(255,255,255,.8) 48%,transparent 62%),
    conic-gradient(from 30deg at 40% 60%,#15171a,#5c6168,#101113,#3c4046,#0b0c0d,#6e737a,#1b1d20,#15171a);}
.accent-dot[data-a="carbon"]{background:
    linear-gradient(115deg,transparent 32%,rgba(255,255,255,.95) 48%,transparent 64%),
    repeating-linear-gradient(45deg,#2b2d31 0 2px,#050506 2px 4px),
    repeating-linear-gradient(-45deg,#2b2d31 0 2px,#050506 2px 4px);}


/* ===================================================================
   NOUVELLES COULEURS (V3.4.0) — neuf thèmes, pensés comme les six d'origine : fond et
   surfaces teintés dans la couleur (mode sombre), accent assombri en mode clair pour
   rester lisible sur blanc. Contrastes vérifiés : texte d'accent ≥ 7:1 sur le fond
   sombre, ≥ 4,5:1 sur blanc ; texte blanc des boutons ≥ 4,8:1 sur leur dégradé.
   =================================================================== */
/* Océan : cyan clair sur bleu nuit */
html[data-accent="ocean"]{
  --e:#2FB4F0; --e2:#7DD3FC; --e-rgb:47,180,240; --e2-rgb:125,211,252;
  --grad-btn:linear-gradient(180deg,#1690CF,#0A6FAD 55%,#085A8F);
  --marineL:#0E2A4A; --hair:#13233A; --hair2:#1D3150;
  --bg:#040A12; --s1:#0B1522; --s2:#101D2E; --s3:#17283D;
  --bg-rgb:4,10,18; --s1-rgb:11,21,34; --s2-rgb:16,29,46; --s3-rgb:23,40,61;
}
html[data-mode="light"][data-accent="ocean"]{
  --marineL:#D4ECFB; --hair:#CCE1F0; --hair2:#AFCDE4;
  --bg:#EFF6FB; --s1:#FFFFFF; --s2:#DFEDF7; --bg-rgb:239,246,251; --s1-rgb:255,255,255; --s2-rgb:223,237,247; --s3:#D0E4F2; --s3-rgb:208,228,242;
  --e:#0369A1; --e2:#075985; --e-rgb:3,105,161; --e2-rgb:7,89,133;
  --grad-btn:linear-gradient(180deg,#0C7FC0,#0369A1 55%,#075985);
}
.accent-dot[data-a="ocean"]{background:linear-gradient(135deg,#7DD3FC,#0A6FAD);}
/* Améthyste : violet profond */
html[data-accent="violet"]{
  --e:#9B6BFF; --e2:#B894FF; --e-rgb:155,107,255; --e2-rgb:184,148,255;
  --grad-btn:linear-gradient(180deg,#8455F2,#6D3FE0 55%,#5A2FC4);
  --marineL:#2A1F48; --hair:#251C36; --hair2:#33284A;
  --bg:#0B0812; --s1:#161022; --s2:#1E162E; --s3:#2A1F3F;
  --bg-rgb:11,8,18; --s1-rgb:22,16,34; --s2-rgb:30,22,46; --s3-rgb:42,31,63;
}
html[data-mode="light"][data-accent="violet"]{
  --marineL:#E5DAFB; --hair:#E2D9F2; --hair2:#CFC2E8;
  --bg:#F6F3FC; --s1:#FFFFFF; --s2:#ECE6F7; --bg-rgb:246,243,252; --s1-rgb:255,255,255; --s2-rgb:236,230,247; --s3:#DDD2EE; --s3-rgb:221,210,238;
  --e:#6B3FD6; --e2:#522CAE; --e-rgb:107,63,214; --e2-rgb:82,44,174;
  --grad-btn:linear-gradient(180deg,#7C52E6,#6B3FD6 55%,#522CAE);
}
.accent-dot[data-a="violet"]{background:linear-gradient(135deg,#B894FF,#6D3FE0);}
/* Lavande : lilas doux */
html[data-accent="lavender"]{
  --e:#B7A2F5; --e2:#D4C7FA; --e-rgb:183,162,245; --e2-rgb:212,199,250;
  --grad-btn:linear-gradient(180deg,#8570D6,#6E58C2 55%,#5A46A8);
  --marineL:#2B2545; --hair:#221E33; --hair2:#312B47;
  --bg:#0C0A13; --s1:#171424; --s2:#1F1B30; --s3:#2A253F;
  --bg-rgb:12,10,19; --s1-rgb:23,20,36; --s2-rgb:31,27,48; --s3-rgb:42,37,63;
}
html[data-mode="light"][data-accent="lavender"]{
  --marineL:#EAE4FB; --hair:#E4DEF4; --hair2:#D2C9EC;
  --bg:#F7F5FD; --s1:#FFFFFF; --s2:#EEEAF8; --bg-rgb:247,245,253; --s1-rgb:255,255,255; --s2-rgb:238,234,248; --s3:#E0D9F2; --s3-rgb:224,217,242;
  --e:#6250B8; --e2:#4A3A96; --e-rgb:98,80,184; --e2-rgb:74,58,150;
  --grad-btn:linear-gradient(180deg,#7362C8,#6250B8 55%,#4A3A96);
}
.accent-dot[data-a="lavender"]{background:linear-gradient(135deg,#D4C7FA,#7560C8);}
/* Framboise : rose vif */
html[data-accent="pink"]{
  --e:#FF5FA2; --e2:#FF8DBE; --e-rgb:255,95,162; --e2-rgb:255,141,190;
  --grad-btn:linear-gradient(180deg,#E0418A,#C92A6C 55%,#A81F58);
  --marineL:#3A1628; --hair:#2B1320; --hair2:#3D1C2D;
  --bg:#0F070B; --s1:#1D0F16; --s2:#27141E; --s3:#351B29;
  --bg-rgb:15,7,11; --s1-rgb:29,15,22; --s2-rgb:39,20,30; --s3-rgb:53,27,41;
}
html[data-mode="light"][data-accent="pink"]{
  --marineL:#F9DCE8; --hair:#F0CFDD; --hair2:#E5B7CA;
  --bg:#FCF1F5; --s1:#FFFFFF; --s2:#F6E1EA; --bg-rgb:252,241,245; --s1-rgb:255,255,255; --s2-rgb:246,225,234; --s3:#ECC9D8; --s3-rgb:236,201,216;
  --e:#C22E6E; --e2:#9B1F55; --e-rgb:194,46,110; --e2-rgb:155,31,85;
  --grad-btn:linear-gradient(180deg,#D43F80,#C22E6E 55%,#9B1F55);
}
.accent-dot[data-a="pink"]{background:linear-gradient(135deg,#FF8DBE,#C92A6C);}
/* Sakura : rose poudré */
html[data-accent="sakura"]{
  --e:#F7A6C8; --e2:#FFC9DF; --e-rgb:247,166,200; --e2-rgb:255,201,223;
  --grad-btn:linear-gradient(180deg,#C9608F,#B24A7C 55%,#963B67);
  --marineL:#3A2230; --hair:#2A1B22; --hair2:#3B2731;
  --bg:#100A0D; --s1:#1E1419; --s2:#281B21; --s3:#36252D;
  --bg-rgb:16,10,13; --s1-rgb:30,20,25; --s2-rgb:40,27,33; --s3-rgb:54,37,45;
}
html[data-mode="light"][data-accent="sakura"]{
  --marineL:#FBE3EE; --hair:#F3D6E2; --hair2:#E9C0D1;
  --bg:#FDF4F8; --s1:#FFFFFF; --s2:#F8E6EE; --bg-rgb:253,244,248; --s1-rgb:255,255,255; --s2-rgb:248,230,238; --s3:#F0D4E0; --s3-rgb:240,212,224;
  --e:#B3477A; --e2:#8C3560; --e-rgb:179,71,122; --e2-rgb:140,53,96;
  --grad-btn:linear-gradient(180deg,#C45888,#B3477A 55%,#8C3560);
}
.accent-dot[data-a="sakura"]{background:linear-gradient(135deg,#FFC9DF,#B24A7C);}
/* Menthe : vert frais */
html[data-accent="mint"]{
  --e:#3EE39B; --e2:#7CF0BF; --e-rgb:62,227,155; --e2-rgb:124,240,191;
  --grad-btn:linear-gradient(180deg,#12A46A,#0B8052 55%,#086A44);
  --marineL:#0F3A26; --hair:#12301F; --hair2:#1B432D;
  --bg:#04100B; --s1:#0B1D15; --s2:#10281D; --s3:#173628;
  --bg-rgb:4,16,11; --s1-rgb:11,29,21; --s2-rgb:16,40,29; --s3-rgb:23,54,40;
}
html[data-mode="light"][data-accent="mint"]{
  --marineL:#D2F5E4; --hair:#CBEBDA; --hair2:#A9DCC2;
  --bg:#EEF9F3; --s1:#FFFFFF; --s2:#DFF2E8; --bg-rgb:238,249,243; --s1-rgb:255,255,255; --s2-rgb:223,242,232; --s3:#CDEADB; --s3-rgb:205,234,219;
  --e:#0A7F4F; --e2:#06603B; --e-rgb:10,127,79; --e2-rgb:6,96,59;
  --grad-btn:linear-gradient(180deg,#0E9660,#0A7F4F 55%,#06603B);
}
.accent-dot[data-a="mint"]{background:linear-gradient(135deg,#7CF0BF,#0B8052);}
/* Lagon : turquoise */
html[data-accent="teal"]{
  --e:#22C7B8; --e2:#5FE0D3; --e-rgb:34,199,184; --e2-rgb:95,224,211;
  --grad-btn:linear-gradient(180deg,#0E9A8F,#0B7A72 55%,#08635C);
  --marineL:#0F3434; --hair:#133030; --hair2:#1C4242;
  --bg:#051010; --s1:#0C1C1C; --s2:#112727; --s3:#183535;
  --bg-rgb:5,16,16; --s1-rgb:12,28,28; --s2-rgb:17,39,39; --s3-rgb:24,53,53;
}
html[data-mode="light"][data-accent="teal"]{
  --marineL:#CFF0EC; --hair:#C9E6E2; --hair2:#A9D6D0;
  --bg:#EEF8F7; --s1:#FFFFFF; --s2:#DDF0EE; --bg-rgb:238,248,247; --s1-rgb:255,255,255; --s2-rgb:221,240,238; --s3:#CBE7E3; --s3-rgb:203,231,227;
  --e:#0B7F75; --e2:#07615A; --e-rgb:11,127,117; --e2-rgb:7,97,90;
  --grad-btn:linear-gradient(180deg,#0F958A,#0B7F75 55%,#07615A);
}
.accent-dot[data-a="teal"]{background:linear-gradient(135deg,#5FE0D3,#0B7A72);}
/* Ambre : orange coucher de soleil */
html[data-accent="orange"]{
  --e:#FF8A2A; --e2:#FFAE63; --e-rgb:255,138,42; --e2-rgb:255,174,99;
  --grad-btn:linear-gradient(180deg,#DB6812,#BE500A 55%,#9E4108);
  --marineL:#3D2410; --hair:#2E1C0E; --hair2:#422A15;
  --bg:#0F0904; --s1:#1D1209; --s2:#28190D; --s3:#362213;
  --bg-rgb:15,9,4; --s1-rgb:29,18,9; --s2-rgb:40,25,13; --s3-rgb:54,34,19;
}
html[data-mode="light"][data-accent="orange"]{
  --marineL:#FBE3CC; --hair:#F0D6BC; --hair2:#E6BE96;
  --bg:#FCF4EC; --s1:#FFFFFF; --s2:#F6E6D5; --bg-rgb:252,244,236; --s1-rgb:255,255,255; --s2-rgb:246,230,213; --s3:#EDD2B6; --s3-rgb:237,210,182;
  --e:#B45309; --e2:#8C3F05; --e-rgb:180,83,9; --e2-rgb:140,63,5;
  --grad-btn:linear-gradient(180deg,#C8620E,#B45309 55%,#8C3F05);
}
.accent-dot[data-a="orange"]{background:linear-gradient(135deg,#FFAE63,#BE500A);}
/* Mono : noir et blanc pur */
html[data-accent="mono"]{
  --e:#E6E8EB; --e2:#FFFFFF; --e-rgb:230,232,235; --e2-rgb:255,255,255;
  --grad-btn:linear-gradient(180deg,#FFFFFF,#E6E8EB 55%,#C9CDD3);
  --marineL:#1A1B1E; --hair:#232427; --hair2:#34363A;
  --bg:#050505; --s1:#101011; --s2:#18181A; --s3:#222225;
  --bg-rgb:5,5,5; --s1-rgb:16,16,17; --s2-rgb:24,24,26; --s3-rgb:34,34,37;
}
html[data-mode="light"][data-accent="mono"]{
  --marineL:#E3E4E6; --hair:#E0E1E3; --hair2:#C9CBCF;
  --bg:#F3F3F4; --s1:#FFFFFF; --s2:#E8E8EA; --bg-rgb:243,243,244; --s1-rgb:255,255,255; --s2-rgb:232,232,234; --s3:#DADBDE; --s3-rgb:218,219,222;
  --e:#26282C; --e2:#111214; --e-rgb:38,40,44; --e2-rgb:17,18,20;
  --grad-btn:linear-gradient(180deg,#3A3D42,#26282C 55%,#111214);
}
.accent-dot[data-a="mono"]{background:linear-gradient(135deg,#FFFFFF,#8A8E95);}
/* Mono (sombre) : bouton blanc nacré → texte presque noir, comme le jaune */
html[data-mode="dark"][data-accent="mono"]{--accent-ink:#0A0B0D;--accent-ink-shadow:none;--sh-e:0 8px 22px -8px rgba(255,255,255,.22),0 2px 6px -2px rgba(255,255,255,.12);}
html[data-mode="dark"][data-accent="mono"] .btn,html[data-mode="dark"][data-accent="mono"] .hv7-act.main{color:#0A0B0D;text-shadow:none;}
html[data-mode="dark"][data-accent="mono"] .btn.ghost{color:var(--snow);}
html[data-accent="mono"] .accent-dot.on,html[data-accent="carbon"] .accent-dot.on{box-shadow:var(--sh-sm),0 0 0 1px rgba(230,234,238,.5);}
/* Sélecteur de couleur (Profil › Couleur de l'app) : familles et variantes, avec nom */
.acc-fam{margin:4px 0 16px;}
.acc-fam .lab{margin:0 2px 10px;}
.acc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.acc-sw{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 6px 10px;border-radius:16px;cursor:pointer;
  background:var(--s1);border:1.5px solid var(--hair);transition:transform .18s var(--ease-spring),border-color .2s ease;}
.acc-sw:active{transform:scale(.95);}
.acc-sw.on{border-color:var(--e);box-shadow:0 0 0 3px rgba(var(--e-rgb),.18);}
.acc-sw .accent-dot{width:34px;height:34px;pointer-events:none;}
.acc-sw .accent-dot.on{transform:none;}
.acc-sw span{font-size:11.5px;font-weight:700;text-align:center;line-height:1.2;color:var(--snow);}

/* ===== MODE SIMPLIFIÉ — pour les utilisateurs peu à l'aise avec la technologie :
   supprime le flou "liquid glass", grossit les textes/boutons, réduit les animations. ===== */
html.easy-mode{
  --glass-blur:0px; --glass-sat:1;
  --glass-bg:var(--s1); --glass-bg-2:var(--s1);
  --glass-border:var(--hair); --glass-border-soft:var(--hair);
  --glass-shine:none; --glass-sheen:none;
  --glass-shadow:none;
  zoom:1.16;
}
html.easy-mode *{ -webkit-backdrop-filter:none!important; backdrop-filter:none!important; text-shadow:none!important; transition-duration:.15s!important; }
html.easy-mode .stag{ opacity:1!important; animation:none!important; }
html.easy-mode .icb svg,html.easy-mode .lr-icon svg,html.easy-mode .qa-pill svg,html.easy-mode .favtile svg,html.easy-mode .perfcard .pcl svg{ animation:none!important; }
html.easy-mode .tip-tile::before,html.easy-mode .tip-glow,html.easy-mode .hero-glow,html.easy-mode .bd-ring,html.easy-mode .bd-spark,html.easy-mode .bd-unlock-badge::after{ animation:none!important; opacity:0!important; }
/* Reflets "verre" du 18/09 (.card, .hv7-day, .hv7-score) : coupes ici pour rester
   coherent avec "supprime le flou liquid glass" -- le blur lui-meme est deja
   coupe par la regle backdrop-filter:none ci-dessus, mais ces reflets ne sont
   pas un backdrop-filter donc pas couverts par elle. */
html.easy-mode .card::before,html.easy-mode .hv7-day::after,html.easy-mode .hv7-score::before{ display:none!important; }
html.easy-mode .card,html.easy-mode .grp-card,html.easy-mode .favtile,html.easy-mode .sbox,html.easy-mode .inp,html.easy-mode .pill{
  background:var(--s1)!important; box-shadow:none!important; border:2px solid var(--hair)!important;
}
/* Les boutons étaient inclus dans la règle ci-dessus : leur fond devenait var(--s1)
   alors que .btn garde color:#fff → en mode clair (--s1 = blanc) le texte blanc
   passait sur fond blanc et les boutons devenaient invisibles.
   On les en sort : .btn garde son dégradé d'accent normal (pensé avec son
   contraste), le mode simplifié ne lui applique que la taille et la graisse. */
html.easy-mode .btn{ font-weight:800; min-height:52px; box-shadow:none!important; }
html.easy-mode .btn.ghost{
  background:var(--s1)!important; color:var(--snow)!important; border:2px solid var(--hair2)!important; }
html.easy-mode .man,html.easy-mode .lr-title,html.easy-mode .card-t{ font-weight:800!important; }
html.easy-mode #nav{ background:var(--s1)!important; border-top:2px solid var(--hair); }
html.easy-mode .topbar{ background:var(--bg)!important; border-bottom:2px solid var(--hair); }
html.easy-mode .ov{ background:rgba(0,0,0,.6)!important; }
html.easy-mode .nb[data-s="outils"]{ display:none!important; }

html{transition:background .25s ease;}
.card,.btn,.pill,.inp,.favtile,.sbox{transition:background .25s ease,border-color .25s ease,color .25s ease;}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{background:var(--bg);color:var(--snow);font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;overflow-x:hidden;width:100%;}
#ob h1,#login h1{font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif}
body{max-width:430px;margin:0 auto;position:relative;min-height:100vh;isolation:isolate;}
/* AMBIENT DEPTH LAYER — glow bleu profond façon "hero" produit, sur fond quasi noir */
body::before{content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(140% 60% at 50% -6%, rgba(var(--e-rgb),.30), transparent 58%),
    radial-gradient(90% 50% at 82% 4%, rgba(var(--e2-rgb),.16), transparent 60%),
    radial-gradient(80% 45% at 8% 96%, rgba(var(--e-rgb),.10), transparent 62%),
    var(--bg);}
body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:120px 120px;}
html[data-mode="light"] body::before{
  background:
    radial-gradient(140% 60% at 50% -6%, rgba(var(--e-rgb),.14), transparent 58%),
    radial-gradient(90% 50% at 82% 4%, rgba(var(--e2-rgb),.09), transparent 60%),
    var(--bg);}
html[data-mode="light"] body::after{opacity:.02;}

/* ===== ACCUEIL — refonte fidèle à la maquette IKORUN ===== */
.ik-header{display:flex;align-items:center;justify-content:space-between;padding:max(10px,env(safe-area-inset-top)) 0 18px;}
.ik-logo{display:flex;align-items:center;gap:9px;}
.ik-logo svg{width:26px;height:26px;flex-shrink:0;}
.ik-logo img{height:26px;width:auto;flex-shrink:0;display:block;}
.ik-logo span{font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:16px;letter-spacing:.5px;color:var(--snow);}
/* Logo-mark teinté : le fanion est appliqué en mask-image et coloré via
   background, afin qu'il suive automatiquement la couleur d'accent active
   (uni pour bleu/rouge/vert/marron/jaune, dégradé chromé pour carbone). */
.ik-logo-mark{display:block;flex-shrink:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='84 78 356 280'%3E%3Cg fill='%23000' stroke='%23000' stroke-width='12' stroke-linejoin='round'%3E%3Cpolygon points='92,350 205,258 415,183 296,292'/%3E%3Cpolygon points='160,240 218,160 432,86 376,168'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='84 78 356 280'%3E%3Cg fill='%23000' stroke='%23000' stroke-width='12' stroke-linejoin='round'%3E%3Cpolygon points='92,350 205,258 415,183 296,292'/%3E%3Cpolygon points='160,240 218,160 432,86 376,168'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;
  background:var(--e);transition:background .35s var(--ease);}
.ik-logo .ik-logo-mark{width:26px;height:26px;}
.hv7-logo .ik-logo-mark{width:24px;height:24px;}
html[data-accent="carbon"] .ik-logo-mark{background:var(--grad-btn);}
.ik-bell{width:38px;height:38px;border-radius:50%;background:var(--s1);border:1px solid var(--hair);display:flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer;position:relative;transition:transform .15s var(--ease-spring);}
.ik-header-left{display:flex;align-items:center;gap:12px;}
.ik-people{width:38px;height:38px;border-radius:50%;background:var(--s1);border:1px solid var(--hair);display:flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer;position:relative;transition:transform .15s var(--ease-spring);flex-shrink:0;}
.ik-people:active{transform:scale(.92);}
.ik-bell:active{transform:scale(.92);}
.ik-bell .dot{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--e);box-shadow:0 0 0 2px var(--s1);}
.ik-greet{margin-bottom:16px;}
.ik-greet h1{font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:23px;letter-spacing:-.4px;display:flex;align-items:center;gap:8px;}
.ik-greet p{color:var(--muted);font-size:13px;margin-top:3px;font-weight:500;}

/* HERO fusionné (niveau + semaine) — maquette validée v6 */
.ik-hero{padding:22px;cursor:pointer;background:var(--glass-bg);background-image:var(--glass-shine),var(--grad-card);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));border-color:var(--glass-border);box-shadow:var(--glass-shadow);}
.ik-hero::after{content:'';position:absolute;top:-55%;right:-25%;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle, rgba(var(--e-rgb),.3), transparent 70%);pointer-events:none;}
.ik-hero-lab{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;letter-spacing:2.5px;color:var(--muted);font-weight:600;text-transform:uppercase;position:relative;z-index:1;}
.ik-hero-big{position:relative;z-index:1;line-height:.9;margin-top:8px;display:flex;align-items:flex-end;gap:8px;}
.ik-hero-big .n{font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:42px;letter-spacing:-1.5px;
  background:linear-gradient(180deg,#fff,var(--e2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.ik-hero-big .u{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:8px;}
.ik-hero-mid{display:flex;align-items:center;gap:14px;margin-top:16px;position:relative;z-index:1;}
.ik-hero-ring-wrap{flex-shrink:0;}
.lvl-lab{font-size:8.5px;letter-spacing:.4px;color:var(--muted);font-weight:700;}
.lvl-n{font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:18px;margin-top:1px;}
.ik-hero-mid-txt{flex:1;}
.ik-hero-mid-txt .v{font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:600;font-size:13px;}
.ik-hero-mid-txt .l{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--e2);font-size:10.5px;margin-top:3px;font-weight:600;}
.ik-hero-divider{height:1px;background:var(--hair);margin:18px 0 4px;position:relative;z-index:1;}
.ik-hero-row3{display:flex;align-items:center;justify-content:space-between;margin-top:14px;position:relative;z-index:1;}
.hstat-v{font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:700;font-size:16px;}
.hstat-v span{font-size:11.5px;font-weight:600;color:var(--muted);}
.hstat-l{font-size:10px;color:var(--muted);font-weight:600;margin-top:1px;text-transform:uppercase;letter-spacing:.3px;}
.week-ring-v{font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:14px;letter-spacing:-.3px;}
.week-ring-v.v-sm{font-size:11.5px;letter-spacing:-.4px;}
.week-ring-l{font-size:7.5px;color:var(--muted);font-weight:600;line-height:1.2;text-align:center;max-width:52px;}
.week-spark-wrap{margin-top:14px;position:relative;z-index:1;}
.week-spark-days{display:flex;justify-content:space-between;margin-top:6px;padding:0 2px;}
.week-spark-days span{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9.5px;color:var(--dim);font-weight:600;width:14px;text-align:center;}

.next-lab{font-size:10px;letter-spacing:.5px;color:var(--e2);font-weight:700;margin-bottom:2px;}
.next-card{display:flex;align-items:center;gap:12px;cursor:pointer;}
.next-body{flex:1;}
.next-title{font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:700;font-size:15px;margin-top:4px;}
.next-meta{color:var(--muted);font-size:12px;margin-top:3px;font-weight:500;}
.next-when{color:var(--e2);font-size:12px;margin-top:2px;font-weight:600;}
.next-ic{width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(var(--e-rgb),.35),rgba(var(--e-rgb),.12));border:1px solid rgba(var(--e-rgb),.4);display:flex;align-items:center;justify-content:center;color:var(--e2);flex-shrink:0;}

.plan-lab{font-size:10px;letter-spacing:.5px;color:var(--muted);font-weight:700;margin:14px 0 8px;}
.plan-list{padding:6px 8px;}
.plan-item{display:flex;align-items:center;gap:12px;padding:10px 6px;cursor:pointer;}
.plan-item+.plan-item{border-top:1px solid var(--hair);}
.plan-ic{width:38px;height:38px;border-radius:11px;background:var(--ed);color:var(--e2);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.plan-body{flex:1;}
.plan-title{font-weight:700;font-size:14px;}
.plan-sub{color:var(--muted);font-size:13px;margin-top:2px;font-weight:500;line-height:1.3;}

/* ===== ACCUEIL V7 — refonte visuelle de l'accueil (carte "goutte" unique, préfixe hv7- pour ne pas
   interférer avec les classes .card/.next-*/.plan-* déjà utilisées ailleurs dans l'app) ===== */
#s-home{overflow:hidden;}
.hv7-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.hv7-bg span{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;}
.hv7-lb1{width:300px;height:300px;top:-120px;left:-80px;background:radial-gradient(circle, rgba(var(--e-rgb),.5), transparent 70%);animation:hv7drift1 22s ease-in-out infinite;}
.hv7-lb2{width:240px;height:240px;top:80px;right:-110px;background:radial-gradient(circle, rgba(var(--e2-rgb),.4), transparent 70%);animation:hv7drift2 26s ease-in-out infinite;}
.hv7-lb3{width:220px;height:220px;top:460px;left:-100px;background:radial-gradient(circle, rgba(var(--e-rgb),.18), transparent 70%);animation:hv7drift3 30s ease-in-out infinite;}
@keyframes hv7drift1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(34px,42px) scale(1.15);}}
@keyframes hv7drift2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-26px,34px) scale(1.1);}}
@keyframes hv7drift3{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(26px,-26px) scale(1.2);}}
@media (prefers-reduced-motion: reduce){.hv7-lb1,.hv7-lb2,.hv7-lb3{animation:none;}}

.hv7-content{position:relative;z-index:1;}
.hv7-header{display:flex;align-items:center;justify-content:space-between;padding:max(10px,env(safe-area-inset-top)) 2px 4px;}
.hv7-header-left{display:flex;align-items:center;gap:8px;}
.hv7-logo{display:flex;align-items:center;gap:8px;font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:14.5px;letter-spacing:.5px;}
.hv7-logo img{width:24px;height:24px;border-radius:6px;object-fit:cover;}
.hv7-header-right{display:flex;align-items:center;gap:8px;}
.hv7-people,.hv7-icon-btn{width:37px;height:37px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(var(--e-rgb),.4);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;color:var(--e2);cursor:pointer;flex-shrink:0;position:relative;}
html[data-mode="light"] .hv7-people,html[data-mode="light"] .hv7-icon-btn{background:rgba(0,0,0,.04);}
.hv7-icon-btn .dot{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--e2);
  box-shadow:0 0 0 2px var(--s1),0 0 8px rgba(var(--e-rgb),.7);}

.hv7-greet{margin:16px 0 16px;}
.hv7-greet h1{font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:700;font-size:19px;margin:0;letter-spacing:-.3px;}
.hv7-greet p{color:var(--muted);font-size:12px;margin:5px 0 0;font-weight:500;letter-spacing:.2px;text-transform:uppercase;}

/* ----- CARTE DU JOUR — la séance d'aujourd'hui : son type, son pourquoi, ses cibles, son bilan.
   C'est la pièce maîtresse de l'accueil : tout le reste de l'écran lui est subordonné. ----- */
.hv7-day{position:relative;border-radius:26px;padding:18px;margin-bottom:18px;cursor:pointer;overflow:hidden;
  background:linear-gradient(155deg, rgba(var(--e-rgb),.17), rgba(var(--e2-rgb),.07));border:1px solid rgba(var(--e-rgb),.24);
  box-shadow:0 20px 44px -22px rgba(var(--e-rgb),.55),0 3px 14px -6px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.08) inset;
  transition:transform .18s var(--ease-spring);
  /* Verre depoli, inspire de KORE : les halos de .hv7-bg (derriere, animes) se voient au
     travers en flou sature, au lieu de rester caches derriere un fond opaque -- c'est ce
     qui donne l'impression de "superposition" plutot qu'un simple degrade plat. Scope a 2
     cartes seulement (celle-ci + .hv7-score), pas toutes les cartes de l'app : un
     backdrop-filter sur une liste qui defile coute cher sur de l'Android d'entree de
     gamme (deja releve a l'audit du 18/09) -- ici une seule instance par ecran. */
  backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);}
.hv7-day:active{transform:scale(.985);}
.hv7-day::before{content:'';position:absolute;width:230px;height:230px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(var(--e-rgb),.30), transparent 70%);top:-130px;inset-inline-end:-80px;}
.hv7-day::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  /* Reflet spéculaire fixe (haut-gauche) : version statique du reflet qui, chez KORE, suit
     le doigt via --glass-mx/--glass-my mis a jour en JS. Le suivi tactile est un vrai plus
     mais une fonctionnalite a part entiere (gestion des evenements pointer sur chaque carte) ;
     la version fixe donne deja l'effet "verre vivant" sans ce risque supplementaire. */
  background:radial-gradient(circle 180px at 22% 18%, rgba(255,255,255,.14), transparent 72%);}
.hv7-day>*{position:relative;}
.hv7-day-top{display:flex;justify-content:space-between;align-items:center;gap:8px;}
.hv7-day-chip{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;
  border:1px solid currentColor;border-radius:20px;padding:4px 9px;white-space:nowrap;}
.hv7-day-when{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;}
.hv7-day-title{font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:21px;line-height:1.12;margin-top:12px;letter-spacing:-.4px;}
.hv7-day-why{font-size:12px;line-height:1.45;color:var(--muted);margin-top:9px;padding-inline-start:9px;
  border-inline-start:2px solid rgba(var(--e-rgb),.45);}
.hv7-day-targets{display:flex;margin-top:14px;padding-top:13px;border-top:1px solid var(--hair2);}
.hv7-day-targets>div{flex:1;min-width:0;}
.hv7-day-targets>div+div{border-inline-start:1px solid var(--hair2);padding-inline-start:11px;}
.hv7-day-targets b{display:block;font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:17px;letter-spacing:-.3px;}
.hv7-day-targets span{font-size:9px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.5px;}
.hv7-day-acts{display:flex;gap:9px;margin-top:15px;}
.hv7-act{flex:1;border:0;padding:12px 8px;border-radius:99px;font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:700;font-size:12.5px;
  cursor:pointer;transition:transform .15s var(--ease-spring);}
.hv7-act:active{transform:scale(.96);}
.hv7-act.main{color:#fff;background:var(--grad-btn);text-shadow:0 1px 2px rgba(0,0,0,.45);
  box-shadow:0 10px 22px -12px rgba(var(--e-rgb),.95);}
html[data-mode="dark"][data-accent="yellow"] .hv7-act.main{color:#2A2205;text-shadow:none;}
/* Même matière que .btn.ghost : un bouton secondaire est la même surface partout
   (--s2 + --hair2), qu'il soit dans une carte d'accueil, une feuille ou une
   liste. Il était transparent ici, plein ailleurs, ce qui donnait deux boutons
   secondaires d'aspect différent parfois côte à côte. */
.hv7-act.ghost{color:var(--snow);background:var(--s2);border:1px solid var(--hair2);}
.hv7-act.ghost:active{background:var(--s3);}
.hv7-day-state{margin-top:15px;border-radius:99px;padding:11px;text-align:center;font-weight:800;font-size:12.5px;letter-spacing:.3px;}
.hv7-day-state.ok{background:rgba(51,211,153,.16);color:var(--ok);}
.hv7-day-state.ko{background:rgba(255,92,108,.14);color:var(--bad);}

.hv7-krow3{display:flex;gap:8px;margin-bottom:6px;}
.hv7-ktile{flex:1;background:rgba(255,255,255,.045);border:1px solid rgba(var(--e-rgb),.22);border-radius:16px;padding:12px 10px;text-align:center;}
html[data-mode="light"] .hv7-ktile{background:rgba(0,0,0,.025);}
.hv7-ktile-lab{font-size:9px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-top:5px;}
.hv7-ktile-val{font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:18px;letter-spacing:-.3px;}

.hv7-sec-lab{font-size:10px;letter-spacing:.9px;color:var(--e2);font-weight:700;text-transform:uppercase;margin:6px 0 2px;
  padding-top:16px;border-top:1px solid var(--hair);display:flex;justify-content:space-between;align-items:center;
  text-shadow:0 0 10px rgba(var(--e-rgb),.35);}
.hv7-sec-lab .see{color:var(--e2);text-transform:none;font-weight:700;letter-spacing:0;font-size:11.5px;cursor:pointer;}

/* ----- ENSUITE — les prochaines séances du plan. Le filet de gauche porte la couleur
   de la phase : on lit d'un coup d'œil quand le plan change de registre. ----- */
.hv7-nx{display:flex;align-items:center;gap:11px;padding:13px 0;border-bottom:1px solid var(--hair);cursor:pointer;}
.hv7-nx:last-child{border-bottom:none;}
.hv7-nx>i{width:3px;height:30px;border-radius:99px;flex-shrink:0;display:block;}
.hv7-nx-b{flex:1;min-width:0;}
.hv7-nx-b b{display:block;font-weight:700;font-size:13.5px;}
.hv7-nx-b span{display:block;color:var(--muted);font-size:11.5px;margin-top:2px;font-weight:500;}
.hv7-nx em{font-style:normal;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--muted);flex-shrink:0;}

/* ===== FICHE SÉANCE — écran détail fidèle à la maquette ===== */
.rs-badge{display:inline-flex;align-items:center;justify-content:center;padding:3px 9px;border-radius:7px;font-size:11px;font-weight:800;background:rgba(51,211,153,.16);color:var(--ok);margin-bottom:10px;}
.rs-title{font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:24px;letter-spacing:-.4px;line-height:1.15;}
.rs-sub{display:inline-block;margin-top:10px;padding:4px 12px;border-radius:20px;background:var(--s2);color:var(--muted);font-size:11.5px;font-weight:600;}
.rs-stats{display:flex;align-items:center;justify-content:space-around;margin:20px 0 18px;}
.rs-stat{text-align:center;}
.rs-stat .v{font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:21px;}
.rs-stat .l{color:var(--muted);font-size:11px;margin-top:3px;font-weight:600;}
.rs-div{width:1px;height:30px;background:var(--hair);}
.rs-cta{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:15px;border-radius:18px;border:none;cursor:pointer;
  background:var(--grad-btn);color:#fff;font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:700;font-size:15px;box-shadow:var(--sh-e);margin-bottom:18px;}
.rs-cta:active{transform:scale(.98);}
.rs-obj-lab{font-size:10px;letter-spacing:.5px;color:var(--muted);font-weight:700;margin-bottom:6px;}
.rs-obj-txt{font-size:13px;color:var(--muted);line-height:1.5;margin-bottom:16px;}
.rs-list{padding:4px 8px;}
.rs-row{display:flex;align-items:center;gap:12px;padding:11px 6px;cursor:pointer;}
.rs-row+.rs-row{border-top:1px solid var(--hair);}
.rs-ic{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.rs-row-body{flex:1;min-width:0;}
.rs-row-t{font-weight:700;font-size:14px;}
.rs-row-m{color:var(--muted);font-size:12px;margin-top:2px;line-height:1.35;}
.rs-target{margin-top:10px;}
.rs-target-lab{color:var(--muted);font-size:11px;font-weight:600;margin-bottom:6px;}
.rs-target-v{font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:17px;margin-bottom:8px;}
.rs-target-spark{display:flex;align-items:flex-end;gap:3px;height:34px;}
.rs-target-spark b{flex:1;border-radius:2px;background:linear-gradient(180deg,var(--e2),var(--e));min-height:3px;display:block;opacity:.85;}

/* ===== SÉANCE EN COURS — écran live running fidèle à la maquette ===== */
.rl-tag{text-align:center;font-size:10px;letter-spacing:.6px;color:var(--muted);font-weight:700;margin-top:2px;}
.rl-title{text-align:center;font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:19px;margin-top:4px;}
.rl-timerlab{text-align:center;font-size:9px;letter-spacing:.5px;color:var(--dim);font-weight:700;margin-top:18px;}
.rl-timer{text-align:center;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;font-size:38px;letter-spacing:.5px;margin-top:4px;}
.rl-timersub{text-align:center;color:var(--muted);font-size:11px;font-weight:600;margin-top:2px;}
.rl-list{margin-top:20px;padding:4px 8px;}
.rl-row{display:flex;align-items:center;gap:12px;padding:11px 6px;}
.rl-row+.rl-row{border-top:1px solid var(--hair);}
.rl-ic{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.rl-row-body{flex:1;}
.rl-row-v{font-weight:700;font-size:15px;}
.rl-row-v span{font-size:11.5px;color:var(--muted);font-weight:600;}
.rl-row-l{color:var(--muted);font-size:11px;margin-top:1px;}
.rl-map{margin-top:14px;border-radius:16px;overflow:hidden;border:1px solid var(--hair);background:
  radial-gradient(120% 90% at 30% 20%,rgba(var(--e-rgb),.14),transparent 60%),
  repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 26px),
  repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 26px),#0B0F16;height:180px;position:relative;}
.rl-controls{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:22px;}
.rl-ctrl{width:60px;height:60px;border-radius:50%;background:var(--s1);border:1px solid var(--hair);display:flex;align-items:center;justify-content:center;color:var(--snow);cursor:pointer;box-shadow:var(--float-sm);transition:transform .15s var(--ease-spring);}
.rl-ctrl:active{transform:scale(.9);}
.rl-ctrl.main{width:72px;height:72px;background:var(--grad-btn);box-shadow:var(--sh-e);color:#fff;}
.rl-ctrl.stop{color:var(--or);}

/* ===== CALENDRIER ===== */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.cal-head span{text-align:center;font-size:10.5px;color:var(--muted);font-weight:700;padding-bottom:8px;}
.cal-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;border-radius:10px;position:relative;color:var(--snow);}
.cal-cell.muted{color:var(--dim);opacity:.62;}
.cal-cell.today{background:var(--e);color:#fff;font-weight:800;}
.cal-dot{position:absolute;bottom:4px;width:4px;height:4px;border-radius:50%;background:var(--e2);}

/* ===== NOUVEAUX ÉLÉMENTS ACCUEIL (inspirés pattern app mobile) ===== */
.daystrip-wrap{margin-bottom:10px;}
.daystrip{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.daystrip::-webkit-scrollbar{display:none;}
.ds-day{flex:0 0 auto;width:46px;display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 0 9px;border-radius:16px;background:var(--s1);border:1px solid var(--hair);cursor:pointer;box-shadow:var(--float-sm);transition:transform .15s var(--ease-spring),box-shadow .15s ease;}
.ds-day:active{transform:scale(.93);}
.ds-day.today{background:linear-gradient(180deg,var(--ed),var(--s1));border-color:var(--e);box-shadow:0 6px 16px -6px rgba(var(--e-rgb),.3);}
.ds-l{font-size:10px;color:var(--muted);font-weight:600;}
.ds-n{font-size:15px;font-weight:800;font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;}
.ds-dot{width:6px;height:6px;border-radius:50%;display:block;}

.qa-row{display:flex;gap:9px;margin-bottom:10px;}
.qa-pill{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:12px 10px;border-radius:var(--r-pill);background:var(--s1);border:1px solid var(--hair);font-size:12.5px;font-weight:700;cursor:pointer;box-shadow:var(--float-sm);transition:transform .15s var(--ease-spring),box-shadow .15s ease;}
.qa-pill:active{transform:scale(.96);}

.ev-banner{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-radius:var(--r-md);margin-bottom:10px;cursor:pointer;
  background:linear-gradient(120deg,#0d1a33,#153059 55%,#1f4685);box-shadow:0 14px 32px -12px rgba(var(--e-rgb),.35);position:relative;overflow:hidden;}
.ev-banner.alt{background:linear-gradient(120deg,var(--s2),var(--s1));box-shadow:var(--sh-sm);}
.ev-banner::after{content:'';position:absolute;top:-40%;right:-10%;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%);pointer-events:none;}
.ev-lab{font-size:10px;letter-spacing:.6px;color:rgba(255,255,255,.65);font-weight:700;}
.ev-banner.alt .ev-lab{color:var(--muted);}
.ev-title{font-size:15.5px;font-weight:800;font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;color:#fff;margin-top:2px;}
.ev-banner.alt .ev-title{color:var(--snow);}
.ev-days{font-size:15px;font-weight:800;color:#fff;background:rgba(255,255,255,.16);padding:6px 12px;border-radius:var(--r-pill);flex-shrink:0;}
.ev-banner.alt .ev-days{background:transparent;color:var(--muted);padding:0;}

/* MOSAÏQUE — objectif + conseil côte à côte, tailles différentes (asymétrie volontaire) */
.mosaic{display:grid;grid-template-columns:1fr 1.15fr;gap:9px;margin-bottom:8px;align-items:stretch;}
.ev-tile{position:relative;overflow:hidden;padding:14px;border-radius:18px;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(150deg,#153059,#1f4685 85%);box-shadow:0 12px 28px -10px rgba(var(--e-rgb),.35);}
.ev-tile.alt{background:linear-gradient(150deg,var(--s2),var(--s1));box-shadow:var(--sh-sm);}
.ev-tile::after{content:'';position:absolute;top:-45%;right:-15%;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.2),transparent 70%);pointer-events:none;}
.ev-tile .ev-lab{font-size:9.5px;letter-spacing:.6px;color:rgba(255,255,255,.65);font-weight:700;}
.ev-tile.alt .ev-lab{color:var(--muted);}
.ev-tile .ev-title{font-size:14.5px;font-weight:800;font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;color:#fff;margin-top:3px;line-height:1.2;}
.ev-tile.alt .ev-title{color:var(--snow);}
.ev-tile .ev-days{font-size:13px;font-weight:800;color:#fff;margin-top:8px;}
.ev-tile.alt .ev-days{color:var(--dim);}
.tip-tile{background:linear-gradient(150deg,#152036 0%,#0d1420 65%);border-radius:18px;padding:14px;box-shadow:var(--sh-sm);position:relative;overflow:hidden;}
.tip-tile::before{content:'';position:absolute;top:-50%;left:-20%;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,rgba(var(--e-rgb),.18),transparent 70%);animation:heroBreathe 5.5s ease-in-out infinite;pointer-events:none;}
.tip-tile .tip-lab{font-size:9.5px;letter-spacing:.6px;color:rgba(255,255,255,.5);font-weight:700;display:flex;align-items:center;gap:5px;position:relative;z-index:1;}
.tip-tile .tip-txt{font-size:12.5px;line-height:1.4;font-weight:600;color:#fff;margin-top:6px;position:relative;z-index:1;}

.tip-card{position:relative;overflow:hidden;padding:18px;border-radius:var(--r-md);margin-bottom:10px;
  background:linear-gradient(150deg,#1a2542 0%,#0d1420 60%);box-shadow:var(--float-lg);}
.tip-glow{position:absolute;top:-50%;left:-20%;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(var(--e-rgb),.22),transparent 70%);pointer-events:none;animation:heroBreathe 5.5s ease-in-out infinite;}
.tip-lab{font-size:10px;letter-spacing:.6px;color:rgba(255,255,255,.5);font-weight:700;position:relative;z-index:1;}
.tip-txt{font-size:15px;line-height:1.5;font-weight:600;color:#fff;margin-top:8px;position:relative;z-index:1;}
.tip-coach{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:12px;color:rgba(255,255,255,.6);font-weight:700;position:relative;z-index:1;}

/* ===== RANK CARD (style carte de rang jeu vidéo) ===== */
.rank-card{position:relative;overflow:hidden;padding:18px 18px 16px;border-radius:20px;margin-bottom:10px;
  background:linear-gradient(150deg,#131826 0%,#0a0d14 70%);border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--float-lg);animation:slideUp .5s ease forwards;}
.rk-stripe{position:absolute;top:0;left:-10%;width:60%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent 40%,rgba(var(--e-rgb),.14) 55%,transparent 72%);transform:skewX(-8deg);}
.rk-glow{position:absolute;top:-55%;right:-10%;width:220px;height:220px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(var(--e-rgb),.30),transparent 70%);animation:heroBreathe 5s ease-in-out infinite;}
.rk-top{display:flex;align-items:center;gap:13px;position:relative;z-index:1;}
.rk-crest{width:60px;height:60px;border-radius:18px;flex-shrink:0;}
.rk-info{flex:1;min-width:0;}
.rk-lvl{font-size:10.5px;letter-spacing:1px;color:var(--e2);font-weight:800;}
.rk-name{font-size:20px;font-weight:800;font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;letter-spacing:-.3px;color:#fff;margin-top:1px;}
.rk-xp{text-align:right;font-size:19px;font-weight:800;color:#fff;text-shadow:0 0 16px rgba(var(--e-rgb),.6);flex-shrink:0;}
.rk-xp span{display:block;font-size:9px;font-weight:700;color:var(--dim);text-shadow:none;letter-spacing:.5px;margin-top:-1px;}
.rk-bar{margin-top:14px;position:relative;z-index:1;height:7px;}
.rk-bar div{box-shadow:0 0 12px rgba(var(--e-rgb),.55);}
.rk-sub{font-size:10.5px;color:var(--dim);font-weight:700;letter-spacing:.2px;}

/* ===== BENTO STATS ===== */
.bento{display:grid;grid-template-columns:1.3fr 1fr;gap:10px;margin-bottom:10px;}
.bt{background:var(--s1);border:1px solid var(--hair);border-radius:18px;box-shadow:var(--float-sm);}
.bt-km{padding:14px 10px 16px;text-align:center;}
.bt-lab{display:flex;align-items:center;justify-content:center;gap:6px;font-size:10px;letter-spacing:.5px;font-weight:800;color:var(--muted);}
.bt-col{display:flex;flex-direction:column;gap:9px;}
.bt-sm{flex:1;display:flex;align-items:center;gap:10px;padding:11px 12px;}
.bt-txt{min-width:0;}
.bt-n{font-size:16px;font-weight:800;font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;line-height:1.1;}
.bt-n span{font-size:11px;color:var(--muted);font-weight:600;}
.bt-l{font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-top:1px;}

/* ===== SECTION "AUJOURD'HUI" façon app mobile : bague double + 2 mini-cartes ===== */
.sec-head{display:flex;align-items:center;justify-content:space-between;margin:4px 2px 10px;}
.sec-head h3{font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:16px;}
.sec-head .see{font-size:12px;font-weight:700;color:var(--e);cursor:pointer;}
.hero-ring-card{display:flex;align-items:center;gap:16px;background:var(--s1);border:1px solid var(--hair);
  border-radius:20px;padding:16px;box-shadow:var(--float-md);margin-bottom:10px;}
.hr-legend{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px;}
.hr-item{display:flex;align-items:center;gap:8px;}
.hr-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.hr-txt{min-width:0;}
.hr-val{font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:14px;line-height:1.2;}
.hr-lab{font-size:10.5px;color:var(--muted);font-weight:600;}
.today-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;}
.tg-cell{background:var(--s1);border:1px solid var(--hair);border-radius:18px;box-shadow:var(--float-sm);
  padding:13px 14px;display:flex;flex-direction:column;gap:8px;min-height:96px;}
.tg-top{display:flex;align-items:center;justify-content:space-between;width:100%;}
.tg-ic{width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.tg-lab{font-size:10px;color:var(--muted);font-weight:700;letter-spacing:.2px;}
.tg-val{font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:16px;line-height:1.1;}
.spark{display:flex;align-items:flex-end;gap:3px;height:26px;}
.spark b{flex:1;border-radius:3px 3px 1px 1px;background:var(--e);min-height:3px;display:block;}

/* ===== CARTE "DÉFI DU JOUR" ===== */
.challenge-card{position:relative;border-radius:22px;padding:16px;overflow:hidden;cursor:pointer;
  background:linear-gradient(135deg,var(--marineL),var(--s1) 70%);border:1px solid var(--hair);box-shadow:var(--float-md);}
html[data-mode="light"] .challenge-card{background:linear-gradient(135deg,#dce8ff,#f4f7fc 70%);}
.ch-glow{position:absolute;inset:0;background:radial-gradient(120px 120px at 85% 0%,rgba(var(--e-rgb),.28),transparent 70%);pointer-events:none;}
.ch-ic{width:56px;height:56px;border-radius:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:24px;background:rgba(var(--e-rgb),.16);color:var(--e2);position:relative;z-index:1;}
.ch-body{flex:1;min-width:0;position:relative;z-index:1;}
.ch-tag{font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--e2);}
.ch-title{font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:15.5px;margin-top:2px;}
.ch-meta{font-size:11.5px;color:var(--muted);margin-top:3px;}
.ch-bar{width:100%;height:6px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden;margin-top:9px;}
html[data-mode="light"] .ch-bar{background:rgba(20,30,55,.1);}
.ch-bar>div{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--e),var(--e2));transition:width .8s var(--ease);}
.ch-cta{width:32px;height:32px;border-radius:50%;background:var(--e);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;z-index:1;}
.ch-badge{position:absolute;top:12px;right:14px;font-size:10.5px;font-weight:800;padding:4px 9px;border-radius:99px;
  background:rgba(51,211,153,.18);color:var(--ok);z-index:1;}

/* ===== IDENTITÉ DE RANG =====
   Le rang ne recolore plus toute la page (trop chargé) : il reste visible
   uniquement sur la rank-card elle-même (crest, liseré, glow interne),
   qui garde sa propre teinte via un attribut posé sur .rank-card en JS. */
.rank-card[data-tier="champion"],.rank-card[data-tier="legende"],.rank-card[data-tier="ikorun-elite"]{border-color:rgba(255,215,106,.20);}
.rank-card[data-tier="immortel"]{border-color:rgba(181,125,255,.18);}
.rank-card[data-tier="elite"]{border-color:rgba(77,157,255,.18);}

/* accents thématiques par catégorie de card (variété visuelle, item 2) */
.card.accent-e{border-left:2px solid rgba(var(--e-rgb),.5);}
.card.accent-ok{border-left:2px solid rgba(51,211,153,.5);}
.card.accent-or{border-left:2px solid rgba(242,184,75,.5);}
.card.accent-purple{border-left:2px solid rgba(181,125,255,.5);}
.card-divider{height:1px;background:linear-gradient(90deg,transparent,var(--hair2),transparent);margin:14px 0;}
/* micro-interaction tap feedback sur les cartes : voir bloc .card principal plus bas */
.mono{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;}
.man{font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;}
::-webkit-scrollbar{display:none;}

/* SCROLL ZONE */
#scroll{height:100vh;overflow-y:auto;overflow-x:hidden;padding-bottom:calc(140px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch;}
.scr{display:none;padding:0 14px 20px;animation:pageIn .4s var(--ease-out);position:relative;isolation:isolate;}
/* Bulles de fond (18/09) : Home a ses propres halos animes injectes en JS
   (.hv7-bg/.hv7-lb1-3, voir renderHome) -- c'est CA que le verre des cartes
   revelait et qui manquait ailleurs : sans rien de colore derriere, le
   backdrop-filter des cartes n'a rien a flouter/saturer, donc l'effet
   verre y est presque invisible meme si la regle CSS est bien appliquee
   partout. Version statique (pas de derive animee, CSS pur donc jamais
   efface par un innerHTML de rendu) pour les 4 autres ecrans -- #s-home
   explicitement exclu pour ne pas superposer les deux systemes.
   z-index:-1 + isolation:isolate (ajoute sur .scr juste au-dessus) au lieu de
   forcer position:relative sur les enfants directs : meme lecon que .card
   plus haut dans ce fichier, un enfant pourrait deja compter sur un
   positionnement absolu relatif a .scr lui-meme. */
.scr:not(#s-home)::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(circle 150px at 0% 0%, rgba(var(--e-rgb),.35), transparent 70%),
    radial-gradient(circle 130px at 100% 10%, rgba(var(--e2-rgb),.28), transparent 70%),
    radial-gradient(circle 120px at 5% 42%, rgba(var(--e-rgb),.14), transparent 70%);}
.scr.on{display:block;}
@keyframes pageIn{from{opacity:0;transform:translateY(10px) scale(.99);}to{opacity:1;transform:translateY(0) scale(1);}}

/* ===== ICÔNES FLOTTANTES — mouvement net, pas subtil ===== */
@keyframes floatIcon{0%,100%{transform:translateY(0) rotate(0deg) scale(1);}50%{transform:translateY(-6px) rotate(-6deg) scale(1.06);}}
.icb svg,.lr-icon svg,.qa-pill svg,.favtile svg,.perfcard .pcl svg{animation:floatIcon 2.2s ease-in-out infinite;}
.favtile:nth-child(2n) svg,.lr-icon:nth-of-type(2n) svg{animation-delay:.35s;}
.favtile:nth-child(3n) svg{animation-delay:.7s;}
.ev-tile,.tip-tile{transition:transform .15s var(--ease-spring);}
.ev-tile:active{transform:scale(.97);}

/* TOPBAR */
.topbar{position:sticky;top:0;z-index:50;
  background:linear-gradient(180deg,rgba(var(--bg-rgb),.58) 0%,rgba(var(--bg-rgb),.34) 65%,rgba(var(--bg-rgb),0) 100%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  padding:max(8px,env(safe-area-inset-top)) 0 6px;display:flex;align-items:center;justify-content:space-between;}
.tb-title,.tb-sub{text-shadow:0 1px 10px rgba(0,0,0,.65);}
/* Le topbar est sticky et floute en continu le contenu qui défile en dessous :
   c'est la zone la plus imprévisible de l'app. En mode clair le texte est
   foncé, donc une ombre noire ne protège rien contre un fond qui s'éclaircit ;
   il faut une ombre claire à la place. */
html[data-mode="light"] .tb-title,html[data-mode="light"] .tb-sub{text-shadow:0 1px 8px rgba(255,255,255,.85),0 1px 1px rgba(255,255,255,.9);}
.tb-title{font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:19px;letter-spacing:-.5px;}
.tb-sub{color:var(--muted);font-size:11.5px;margin-top:0px;font-weight:600;}
.tb-gear{width:34px;height:34px;border-radius:var(--r-xs);background:var(--s1);border:1px solid var(--hair);
  box-shadow:var(--sh-sm);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s var(--ease-spring);}
.tb-gear:active{transform:scale(.92);}
body[data-scr="home"] .topbar{display:none;}

/* CARDS */
.card{background:var(--glass-bg);background-image:var(--glass-shine),var(--grad-card);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border:none;border-radius:var(--r-md);
  /* Pas de bordure : un bloc d'info se détache du fond via l'ombre (glass-shadow),
     la bordure est réservée aux éléments qu'on peut taper (boutons, pastilles, tuiles). */
  padding:13px 14px;margin-bottom:8px;box-shadow:var(--glass-shadow);position:relative;
  isolation:isolate;transition:transform .18s var(--ease-spring),box-shadow .25s ease,background .25s ease,border-color .25s ease,color .25s ease;}
.card:active{transform:scale(.985);}
.card-t{font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:700;font-size:13.5px;margin-bottom:9px;display:flex;align-items:center;gap:9px;letter-spacing:-.1px;}
.icb{width:26px;height:26px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.lab{font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.7px;text-transform:uppercase;color:var(--dim);}

/* LIST-ROW — variante compacte pour listes de navigation (Outils, plans...)
   pas d'en-tête de card, tout sur une ligne : icône + titre/sous-titre + chevron */
.list-row{display:flex;align-items:center;gap:12px;padding:11px 13px;margin-bottom:7px;border-radius:14px;
  background:var(--s1);border:1px solid var(--hair);box-shadow:var(--float-sm);cursor:pointer;
  transition:transform .15s var(--ease-spring),background .15s ease,box-shadow .15s ease;}
.list-row:active{transform:scale(.985);background:var(--s2);}
.list-row .lr-icon{width:38px;height:38px;border-radius:11px;background:var(--ed);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--e);}
.list-row .lr-txt{flex:1;min-width:0;}
.list-row .lr-title{font-weight:700;font-size:13.5px;font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;}
.list-row .lr-sub{font-size:11.5px;color:var(--muted);margin-top:1px;}
.list-row .lr-chev{color:var(--e2);flex-shrink:0;}
/* GROUPED CARD LIST — une seule carte par section, lignes séparées par un filet
   (organisation "Profil / Réglages" classique : icône + libellé + valeur + chevron) */
.grp-card{background:var(--s1);border:1px solid var(--hair);border-radius:16px;overflow:hidden;box-shadow:var(--float-sm);margin-bottom:16px;}
.grp-row{display:flex;align-items:center;gap:12px;padding:13px 14px;cursor:pointer;border-bottom:1px solid var(--hair);transition:background .15s;}
.grp-row:last-child{border-bottom:none;}
.grp-row:active{background:var(--s2);}
.grp-row .lr-icon{width:32px;height:32px;border-radius:9px;background:var(--ed);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--e);font-size:14.5px;}
.grp-row .lr-title{font-weight:600;font-size:14px;flex:1;min-width:0;}
.grp-row .lr-val{font-size:12.5px;color:var(--muted);flex-shrink:0;max-width:120px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
.grp-row .lr-chev{color:var(--e2);flex-shrink:0;}
.grp-row.no-chev{cursor:default;}
.grp-row.no-chev:active{background:transparent;}
.grp-lab{font-size:12px;letter-spacing:.5px;text-transform:uppercase;color:var(--e2);font-weight:700;margin:0 2px 8px;text-shadow:0 0 10px rgba(var(--e-rgb),.3);}
.mini-ic{width:28px;height:28px;border-radius:9px;background:var(--s2);border:1px solid var(--hair);display:inline-flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer;flex-shrink:0;}
.mini-ic:active{transform:scale(.9);}

/* ===== BIBLIOTHÈQUE — tuiles muscles (photo) + grille d'exercices en photo ===== */
.mtile-row{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px;margin-bottom:14px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);}
.mtile-row::-webkit-scrollbar{display:none;}
.mtile{flex:0 0 60px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;}
.mtile:active .mtile-img{transform:scale(.92);}
.mtile-img{width:56px;height:56px;border-radius:16px;background:var(--s2) center/cover no-repeat;border:2px solid var(--hair);
  display:flex;align-items:center;justify-content:center;font-size:22px;transition:transform .15s var(--ease-spring),border-color .15s ease;box-shadow:var(--float-sm);}
.mtile.on .mtile-img{border-color:var(--e);box-shadow:0 6px 16px -6px rgba(var(--e-rgb),.4);}
.mtile-lab{font-size:10px;font-weight:700;color:var(--muted);text-align:center;line-height:1.15;max-width:62px;}
.mtile.on .mtile-lab{color:var(--e);}

.exg-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.exg-card{background:var(--s1);border:1px solid var(--hair);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--float-sm);
  cursor:pointer;transition:transform .15s var(--ease-spring);}
.exg-card:active{transform:scale(.97);}
.exg-img{position:relative;width:100%;aspect-ratio:5/4;background:linear-gradient(135deg,var(--s2),var(--s1)) center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;font-size:34px;}
.exg-bm{position:absolute;top:7px;left:7px;width:26px;height:26px;border-radius:8px;background:rgba(0,0,0,.4);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;}
.exg-add{position:absolute;top:7px;right:7px;width:26px;height:26px;border-radius:8px;background:var(--e);color:#fff;font-size:16px;font-weight:800;
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px -4px rgba(var(--e-rgb),.6);}
.exg-body{padding:9px 10px 11px;}
.exg-name{font-weight:700;font-size:12.5px;line-height:1.25;font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;}
.exg-sub{font-size:10.5px;color:var(--muted);margin-top:3px;}

/* slideUp stagger */
.stag{opacity:0;animation:slideUp .5s ease forwards;}
@keyframes slideUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
/* Une fois qu'un écran a été affiché une première fois, ses animations d'entrée
   ne rejouent plus quand on y revient (on marque l'écran via data-seen). */
.scr[data-seen] .stag:not(.ik-in),.scr[data-seen] .rank-card:not(.ik-in){opacity:1 !important;animation:none !important;transform:none !important;}
/* Navigation interne (ouvrir un outil, revenir en arrière, changer de vue) —
   posé par swapIn() dans app.js. Réutilise pageIn pour que ça se sente comme
   la même famille de mouvement que l'ouverture d'un onglet principal. */
.pagein{animation:pageIn .32s var(--ease-out);}
html.easy-mode .pagein{animation:none!important;}
@keyframes popIn{0%{opacity:0;transform:scale(.85);}60%{transform:scale(1.04);}100%{opacity:1;transform:scale(1);}}
.popin{animation:popIn .4s cubic-bezier(.34,1.56,.64,1);}
@keyframes demoFloat{0%,100%{transform:translateY(0) scale(1) rotate(-2deg);}50%{transform:translateY(-12px) scale(1.08) rotate(2deg);}}
@keyframes demoPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.3;transform:scale(1.6);}}
@keyframes alarmShake{0%,100%{transform:rotate(-12deg) scale(1);}25%{transform:rotate(12deg) scale(1.1);}50%{transform:rotate(-8deg) scale(1.05);}75%{transform:rotate(8deg) scale(1.1);}}

/* ===== PRESTIGE / RANGS ===== */
.rankchip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:var(--r-pill);font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:700;font-size:12.5px;border:1px solid rgba(255,255,255,.12);box-shadow:var(--sh-sm);}
.ringwrap{position:relative;width:104px;height:104px;margin:0 auto;}
.ringwrap svg{transform:rotate(-90deg);}
.ringwrap .rc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}

/* ===== BADGES : matériaux par palier (10 tiers IKORUN) ===== */
.bd-debutant{--c1:#3d434e;--c2:#9aa3b0;--glow:#9aa3b0;}
.bd-amateur{--c1:#7a4a28;--c2:#d99a63;--glow:#d99a63;}
.bd-sportif{--c1:#2c3f5c;--c2:#cfe0f5;--glow:#cfe0f5;}
.bd-athlete{--c1:#8a5c0a;--c2:#ffcf5c;--glow:#ffcf5c;}
.bd-expert{--c1:#0d5c56;--c2:#4de8d8;--glow:#4de8d8;}
.bd-elite{--c1:#12305c;--c2:#5ea0ff;--glow:#5ea0ff;}
.bd-maitre{--c1:#3a1264;--c2:#b57dff;--glow:#b57dff;}
.bd-legende{--c1:#5c4a12;--c2:#fff2d0;--glow:#ffffff;}

.bd-icon{position:relative;width:64px;height:64px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:28px;
  background:radial-gradient(120% 120% at 50% 30%,color-mix(in srgb,var(--c2) 22%,#0a0d12),#0a0d12 72%);border:1px solid rgba(255,255,255,.14);overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 6px 20px -4px var(--glow),0 0 30px -6px var(--glow);
  transition:transform .2s var(--ease-spring),box-shadow .2s ease;}
.bd-icon.big{width:128px;height:128px;border-radius:34px;font-size:56px;}
.bd-icon.locked{filter:grayscale(.78) brightness(.58) saturate(.75);box-shadow:0 0 0 1px rgba(255,255,255,.05) inset,0 4px 16px -6px rgba(0,0,0,.65);}
.bd-icon.locked .bd-glyph{opacity:.88;}
.bd-icon .bd-emoji{filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));position:relative;z-index:1;}
.bd-glyph{width:100%;height:100%;object-fit:fill;position:relative;z-index:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));}
.bd-unlock-badge .bd-glyph{width:100%;height:100%;}
.bd-lock-chip{position:absolute;bottom:-3px;right:-3px;width:22px;height:22px;border-radius:50%;background:#14161c;
  border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:11px;z-index:3;
  box-shadow:0 2px 8px rgba(0,0,0,.55);}
.bd-icon.big .bd-lock-chip,.bd-lock-chip.big{width:38px;height:38px;font-size:18px;bottom:-2px;right:-2px;}
.bd-icon::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.4),transparent 42%);pointer-events:none;}
.bd-icon:not(.locked)::before{content:'';position:absolute;top:-30%;left:-60%;width:60%;height:160%;pointer-events:none;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.55) 45%,transparent 70%);
  transform:rotate(20deg);animation:bdIdleSweep 3.8s ease-in-out infinite;animation-delay:calc(var(--sw,0)*.22s);}
#scroll.is-scrolling .bd-icon:not(.locked)::before{animation-play-state:paused;}
@keyframes bdIdleSweep{0%,42%{transform:translateX(0) rotate(20deg);}58%,100%{transform:translateX(260%) rotate(20deg);}}

/* ===== ÉCRAN "DÉTAILS DU BADGE" — rail de paliers, halo matière, chips ===== */
.bd-icon.xs{width:32px;height:32px;border-radius:10px;font-size:14px;cursor:pointer;flex-shrink:0;transition:transform .2s var(--ease-spring),box-shadow .2s ease;}
.bd-icon.xs:active{transform:scale(.88);}
.bd-icon.xs.cur{transform:scale(1.22);box-shadow:0 0 0 2px var(--glow),0 4px 14px -4px var(--glow);}
.bd-icon.xs.cur:active{transform:scale(1.1);}
.bd-detail-rail{display:flex;gap:7px;justify-content:center;align-items:center;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.bd-detail-rail::-webkit-scrollbar{display:none;}
.bd-detail-hero{position:relative;overflow:hidden;text-align:center;padding:30px 14px 22px;border-radius:var(--r-lg);
  margin-bottom:14px;background:var(--s1);border:1px solid var(--hair);box-shadow:var(--float-md);}
.bd-detail-hero::before{content:'';position:absolute;top:-34%;left:50%;transform:translateX(-50%);width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,var(--glow),transparent 68%);opacity:.3;filter:blur(30px);pointer-events:none;}
.bd-detail-hero.locked::before{opacity:.12;filter:blur(30px) grayscale(.5);}
.bd-detail-hero>*{position:relative;z-index:1;}
.bd-status-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:var(--r-pill);
  background:var(--s2);border:1px solid var(--hair);font-size:11.5px;font-weight:700;color:var(--muted);}
.bd-status-chip.on{color:var(--glow);border-color:color-mix(in srgb,var(--glow) 45%,var(--hair));background:color-mix(in srgb,var(--glow) 12%,var(--s2));}
.bd-status-chip.ghost{cursor:pointer;color:var(--snow);transition:transform .15s var(--ease-spring),background .15s ease;}
.bd-status-chip.ghost:active{transform:scale(.94);background:var(--s3);}
.bd-pbar>div{background:linear-gradient(90deg,var(--c1),var(--glow));}

.bd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:6px;}
.bd-cell{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border-radius:16px;cursor:pointer;text-align:center;transition:background .2s ease;}
.bd-cell:active{background:var(--s2);}
.bd-cell:active .bd-icon{transform:scale(.9);}
.bd-cell .bd-name{font-size:11px;font-weight:700;font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;}
.bd-cell .bd-lvl{font-size:9px;color:var(--muted);}

@keyframes bdRotate{from{transform:rotateY(0deg);}to{transform:rotateY(360deg);}}
@keyframes bdFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}
@keyframes bdPulse{0%,100%{opacity:.5;transform:scale(1);}50%{opacity:1;transform:scale(1.12);}}
@keyframes bdRing{0%{transform:scale(.4);opacity:.9;}100%{transform:scale(2.6);opacity:0;}}
@keyframes bdSpark{0%{transform:translate(0,0) scale(1);opacity:1;}100%{transform:translate(var(--tx),var(--ty)) scale(0);opacity:0;}}
@keyframes bdZoom{0%{transform:scale(.2);opacity:0;}55%{transform:scale(1.12);opacity:1;}100%{transform:scale(1);opacity:1;}}
@keyframes bdSweep{0%{transform:translateX(-120%) rotate(20deg);}100%{transform:translateX(220%) rotate(20deg);}}

.bd-unlock-ov{position:fixed;inset:0;z-index:14500;display:flex;align-items:center;justify-content:center;flex-direction:column;
  background:radial-gradient(circle at 50% 42%,rgba(20,14,30,.98),rgba(3,3,6,.99) 70%);backdrop-filter:blur(6px);text-align:center;overflow:hidden;}
.bd-unlock-stage{position:relative;width:220px;height:220px;display:flex;align-items:center;justify-content:center;animation:bdZoom .7s cubic-bezier(.2,1,.3,1);}
.bd-rays{position:absolute;top:50%;left:50%;margin-top:-260px;margin-left:-260px;width:520px;height:520px;border-radius:50%;
  background:conic-gradient(from 0deg,
    transparent 0deg, var(--glow) 6deg, transparent 14deg,
    transparent 42deg, var(--glow) 48deg, transparent 56deg,
    transparent 84deg, var(--glow) 90deg, transparent 98deg,
    transparent 126deg, var(--glow) 132deg, transparent 140deg,
    transparent 168deg, var(--glow) 174deg, transparent 182deg,
    transparent 210deg, var(--glow) 216deg, transparent 224deg,
    transparent 252deg, var(--glow) 258deg, transparent 266deg,
    transparent 294deg, var(--glow) 300deg, transparent 308deg,
    transparent 336deg, var(--glow) 342deg, transparent 350deg);
  opacity:.42;filter:blur(3px);mix-blend-mode:screen;animation:bdRaysSpin 7s linear infinite;pointer-events:none;}
@keyframes bdRaysSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
.bd-flash{position:absolute;inset:-40%;background:radial-gradient(circle,rgba(255,255,255,.95),transparent 55%);
  animation:bdFlash .7s ease-out forwards;pointer-events:none;mix-blend-mode:screen;z-index:5;}
@keyframes bdFlash{0%{opacity:1;transform:scale(.15);}100%{opacity:0;transform:scale(3.2);}}
.bd-ring{position:absolute;width:220px;height:220px;border-radius:50%;border:2px solid var(--glow);animation:bdRing 1.8s ease-out infinite;}
.bd-ring.r2{animation-delay:.5s;}
.bd-ring.r3{animation-delay:1s;}
.bd-ring.r4{animation-delay:1.5s;}
.bd-unlock-badge{position:relative;width:160px;height:160px;border-radius:44px;display:flex;align-items:center;justify-content:center;font-size:76px;overflow:hidden;
  background:radial-gradient(120% 120% at 50% 30%,color-mix(in srgb,var(--c2) 26%,#0a0d12),#0a0d12 72%);box-shadow:0 0 60px 10px var(--glow),0 0 140px 30px var(--glow);
  animation:bdFloat 3s ease-in-out infinite;z-index:2;}
.bd-unlock-badge::after{content:'';position:absolute;inset:0;border-radius:inherit;overflow:hidden;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 66%);animation:bdSweep 2.2s ease-in-out infinite;}
.bd-spark{position:absolute;top:50%;left:50%;width:5px;height:5px;border-radius:50%;background:var(--glow);animation:bdSpark 1.6s ease-out infinite;
  box-shadow:0 0 8px 2px var(--glow);}
.bd-unlock-ov.preview{background:radial-gradient(circle at 50% 42%,rgba(14,16,22,.98),rgba(3,3,6,.99) 70%);}
.bd-unlock-ov.preview .bd-unlock-badge{filter:saturate(.8) brightness(.9);}
.bd-unlock-ov.preview .bd-rays{opacity:.24;}
.bd-preview-cond{margin-top:16px;padding:12px 14px;background:var(--s2);border:1px solid var(--hair);border-radius:14px;width:240px;text-align:left;}

/* BTN */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--grad-btn);color:#fff;
  font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:700;font-size:15px;letter-spacing:-.1px;border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-sm);padding:14px;box-shadow:var(--sh-e);
  width:100%;cursor:pointer;position:relative;overflow:hidden;transition:transform .16s var(--ease-spring),box-shadow .2s var(--ease),filter .15s,background .25s ease,border-color .25s ease,color .25s ease;}
.btn::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 55%);pointer-events:none;}
/* Meme reflet "verre" que .card/.hv7-day, en ::after ici car ::before est deja
   pris par le sheen lineaire existant. Fond du bouton reste plein (pas de
   backdrop-filter, pas de translucidite) : un CTA doit rester lisible/tapable
   quel que soit ce qu'il y a derriere -- seules les surfaces d'info (cartes)
   deviennent transparentes, demande explicite de garder les boutons opaques. */
.btn::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle 90px at 20% 15%, rgba(255,255,255,.18), transparent 70%);}
html.easy-mode .btn::after{display:none!important;}
.btn:active{transform:scale(.972);box-shadow:0 3px 10px -4px rgba(var(--e-rgb),.4);filter:brightness(.96);}
.btn.ghost{background:var(--s2);color:var(--snow);border:1px solid var(--hair2);box-shadow:var(--sh-sm);}
.btn.ghost::before{display:none;}
.btn.ghost::after{background:radial-gradient(circle 90px at 20% 15%, rgba(255,255,255,.08), transparent 70%);}
.btn.ghost:active{background:var(--s3);box-shadow:none;}
.btn.sm{padding:10px;font-size:13px;border-radius:var(--r-xs);}
.row .btn{width:auto;white-space:nowrap;flex:1 1 0;}
.row .btn.icon-only{flex:0 0 44px;padding-left:8px;padding-right:8px;}
.btn:disabled{opacity:.45;filter:grayscale(.3);}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.35);transform:scale(0);animation:rip .6s var(--ease-out);pointer-events:none;}
@keyframes rip{to{transform:scale(4);opacity:0;}}

/* PILLS */
.pills{display:flex;gap:7px;flex-wrap:wrap;}
/* Le reflet "verre" de .pill n'a pas besoin d'etre ajoute : la regle .pill
   plus bas dans ce fichier (section CHROME GLASS, deja existante) fixe deja
   background/border en !important avec un vrai backdrop-filter (blur 20px,
   saturate) ET un reflet radial (--chrome-spec) plus large et plus marque
   que celui ajoute sur .card/.btn. Verifie avant d'empiler une regle
   redondante par-dessus, contrairement au premier essai sur cette classe. */
.pill{padding:9px 15px;border-radius:var(--r-pill);background:var(--s2);border:1px solid var(--hair);
  font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap;
  transition:transform .12s var(--ease-spring),background .15s,border-color .15s,color .15s;}
.pill:active{transform:scale(.95);}
.pill.on{background:var(--ed);border-color:var(--e);color:var(--e2);box-shadow:0 0 0 3px rgba(var(--e-rgb),.08);}
/* Second niveau de bascule (Plan IKORUN / Plan personnel) : même composant,
   volume réduit, pour qu'il se lise comme subordonné au choix Course/Muscu. */
.pills.sub .pill{padding:6px 13px;font-size:11.5px;background:transparent;}
.pills.sub .pill.on{background:var(--ed);}

/* INPUTS */
.field{margin-bottom:14px;}
.field label{display:block;font-size:11.5px;color:var(--muted);margin-bottom:6px;font-weight:700;letter-spacing:.2px;}
.inp{width:100%;background:var(--s2);border:1px solid var(--hair);border-radius:var(--r-xs);padding:13px 14px;
  color:var(--snow);font-size:15px;font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;transition:border-color .15s,box-shadow .15s,background .25s ease,color .25s ease;}
.inp:focus{outline:none;border-color:var(--e);box-shadow:0 0 0 3px rgba(var(--e-rgb),.14);}
.note{background:var(--ed);border:1px solid rgba(var(--e-rgb),.25);border-radius:12px;padding:10px 12px;font-size:12.5px;color:var(--muted);line-height:1.45;margin-bottom:14px;display:flex;gap:8px;}
.note b{color:var(--e);}
.setcell{width:100%;background:var(--s2);border:1px solid var(--hair);border-radius:10px;padding:9px 4px;text-align:center;color:var(--snow);font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;font-size:15px;}
.setcell:focus{outline:none;border-color:var(--e);}
.pkfield{cursor:pointer;color:var(--dim);display:flex;align-items:center;justify-content:space-between;}
.pkfield.set{color:var(--snow);font-weight:600;}
.pkfield::after{content:'⌄';color:var(--muted);font-size:18px;}
.perfrow{display:flex;gap:10px;margin-bottom:10px;align-items:stretch;animation:slideUp .3s ease;}
.perfcard{position:relative;isolation:isolate;overflow:hidden;flex:1;background:var(--s1);border:1px solid var(--hair);border-radius:16px;padding:12px 14px;cursor:pointer;transition:border-color .15s;}
.perfcard::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(circle 110px at 18% 12%, rgba(255,255,255,.09), transparent 70%);}
html.easy-mode .perfcard::before{display:none!important;}
.perfcard:active{border-color:var(--e);}
.perfcard .pcl{font-size:11px;color:var(--muted);margin-bottom:4px;display:flex;align-items:center;gap:5px;}
.perfcard .pcv{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;font-size:18px;color:var(--snow);}
.perfcard .pcv.empty{color:var(--dim);font-size:14px;font-weight:600;font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;}
.perfdel{width:38px;flex:0 0 38px;background:var(--s2);border:1px solid var(--hair);border-radius:14px;color:var(--bad);font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.addperf{width:100%;background:transparent;border:1.5px dashed var(--hair);border-radius:14px;padding:13px;color:var(--e);font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:700;font-size:14px;cursor:pointer;margin-top:4px;transition:border-color .15s;}
.addperf:active{border-color:var(--e);background:var(--ed);}
select.inp{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238993A6' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;}
input.inp[type="date"],input.inp[type="time"]{min-width:0;max-width:100%;padding-right:8px;}

/* ============================================================
   SURFACES — cartes/tuiles : fond plat + reflet verre par-dessus (voir
   .card::before ci-dessous). Mise a jour le 18/09 : le commentaire disait
   avant "le glass givre ne reste que sur les pills et la nav" -- demande
   explicite depuis de l'etendre partout, cartes/boutons/selecteurs inclus.
   .ov-card (feuilles modales) est VOLONTAIREMENT exclu de ce groupe : son
   ::before est deja pris par la poignee de glissement (petite barre grise
   en haut de chaque feuille), pas un element decoratif -- les combiner
   silencieusement les faisait deja entrer en conflit avant meme mes
   changements du jour (celui defini plus bas dans le fichier gagnait,
   la ligne de degrade glass n'avait jamais d'effet reel sur .ov-card).
   ============================================================ */
.sbox,.favtile,.bt,.ds-day,.qa-pill,.ov-card,.tb-gear,.gbtn.dark,.perfcard,.perfdel,.x{
  background:var(--s1);
  border:1px solid var(--hair);
  box-shadow:var(--sh-md);
}
/* .card est géré plus haut (effet verre partout, y compris Outils) */
.inp,select.inp,.pkfield,.setcell{
  background:var(--s2);
  border:1px solid var(--hair);
}
.card::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  /* z-index:-1 + .card{isolation:isolate} (deja present sur .card) suffit a
     garder ce reflet derriere le contenu normal. Degrade radial (point chaud
     localise, meme langage que .hv7-day/.hv7-score) superpose au degrade
     lineaire diffus deja existant (sheen du haut) -- les deux coexistent au
     lieu de s'ecraser, contrairement a l'ancienne regle qui melangeait
     .card et .ov-card sur la meme ligne. */
  background:radial-gradient(circle 140px at 18% 12%, rgba(255,255,255,.10), transparent 70%),
             linear-gradient(180deg,rgba(255,255,255,.03),transparent 40%);}

/* ============================================================
   CHROME GLASS — réservé aux sélecteurs de menu (pills) et à la
   nav du bas : verre liquide toujours vivant (flou + reflet qui
   glisse), fini métal poli / chromé (fini le carbone tramé).
   ============================================================ */
:root{
  --chrome-base:linear-gradient(165deg,#3a3f47 0%,#1b1e23 38%,#0d0f13 62%,#26292f 100%);
  --chrome-edge:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 30%);
  --chrome-border:rgba(255,255,255,.22);
  --chrome-sheen:linear-gradient(100deg,transparent 28%,rgba(255,255,255,.55) 46%,rgba(255,255,255,.05) 54%,transparent 70%);
  --chrome-spec:radial-gradient(120% 140% at 50% -30%,rgba(255,255,255,.35),transparent 60%);
}
html[data-mode="light"]{
  --chrome-base:linear-gradient(165deg,#fbfcfe 0%,#e6e9ef 40%,#cdd2db 62%,#f2f4f8 100%);
  --chrome-edge:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0) 30%);
  --chrome-border:rgba(255,255,255,.7);
  --chrome-sheen:linear-gradient(100deg,transparent 28%,rgba(255,255,255,.85) 46%,rgba(255,255,255,.1) 54%,transparent 70%);
  --chrome-spec:radial-gradient(120% 140% at 50% -30%,rgba(255,255,255,.8),transparent 60%);
}
/* (Génération « pastille chromée bombée » retirée le 27/09. Elle était déjà
   écrasée par le langage de contrôle plat plus bas — sauf son backdrop-filter :
   chaque pastille SÉLECTIONNÉE gardait un blur(20px) invisible, masqué par le
   dégradé d'accent opaque, mais bien calculé par le compositeur à chaque frame.
   Elle laissait aussi trois définitions de .pill concurrentes en !important,
   impossibles à modifier sans surprise.) */

/* NAV — finition chromée (verre + métal poli), même famille que les pills */
#nav{position:fixed;bottom:calc(10px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:calc(100% - 26px);max-width:404px;z-index:9999;
  background:var(--chrome-spec),var(--chrome-base);
  backdrop-filter:blur(28px) saturate(1.4);-webkit-backdrop-filter:blur(28px) saturate(1.4);
  border:1px solid var(--chrome-border);border-radius:26px;overflow:hidden;
  box-shadow:0 20px 46px -16px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.35) inset,0 -8px 14px -8px rgba(0,0,0,.45) inset;
  display:flex;padding:7px 6px;transition:transform .38s var(--ease-spring),box-shadow .35s ease,opacity .3s ease;}
#nav::before{content:'';position:absolute;inset:0;pointer-events:none;background:var(--chrome-edge);opacity:.5;border-radius:inherit;}
#nav.nav-dragging{transform:translateX(-50%) scale(1.03);
  box-shadow:0 26px 54px -16px rgba(0,0,0,.78),0 1px 0 rgba(255,255,255,.4) inset,0 0 30px -8px rgba(var(--e-rgb),.3);}
/* Masquage auto au scroll : descend hors écran (avec petite animation ressort)
   quand on scrolle vers le bas, revient dès qu'on remonte. */
#nav.nav-hidden{transform:translateX(-50%) translateY(calc(100% + 30px + env(safe-area-inset-bottom)));opacity:0;pointer-events:none;}
#navFade{position:fixed;left:0;right:0;bottom:0;height:calc(120px + env(safe-area-inset-bottom));
  z-index:9998;pointer-events:none;max-width:430px;margin:0 auto;
  background:linear-gradient(to bottom, transparent 0%, var(--bg) 78%);opacity:.92;}
#nav-pill{position:absolute;top:7px;height:44px;width:18%;border-radius:18px;background:var(--ed);
  /* Verre permanent (pas seulement pendant le glisser) : la version .nav-dragging
     ci-dessous reste plus forte (blur 16px, lueur) pour marquer l'escalade au
     toucher. html.easy-mode * coupe deja tout backdrop-filter globalement, pas
     besoin d'exclusion dediee ici. */
  -webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4);
  box-shadow:0 0 0 1px rgba(var(--e-rgb),.18) inset;transition:left .38s var(--ease-spring),width .38s var(--ease-spring),background .3s ease,box-shadow .3s ease,border-color .3s ease,backdrop-filter .3s ease;
  overflow:hidden;border:1px solid rgba(var(--e-rgb),.12);will-change:left;}
#nav-pill::after{content:'';position:absolute;inset:0;background:var(--chrome-sheen);opacity:0;pointer-events:none;}
#nav.nav-dragging #nav-pill{background:rgba(var(--e-rgb),.16);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid rgba(var(--e-rgb),.35);box-shadow:0 0 0 1px rgba(var(--e-rgb),.2) inset,0 0 22px rgba(var(--e-rgb),.45);}
#nav.nav-dragging #nav-pill::after{opacity:1;animation:glassSheenSweep 1.1s ease-in-out infinite;}
/* ============================================================
   CHROME BOX — petites boîtes chromées pour la fiche séance
   détaillée (échauffement, corps, allures, récup, conseils...).
   Même famille visuelle que les pills / la nav du bas.
   ============================================================ */
.chrome-box{position:relative;border-radius:16px;padding:13px 14px;margin-bottom:10px;overflow:hidden;
  background:var(--chrome-spec),var(--chrome-base);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid var(--chrome-border);
  box-shadow:0 10px 24px -14px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.14) inset;}
.chrome-box::before{content:'';position:absolute;inset:0;pointer-events:none;background:var(--chrome-edge);opacity:.4;}
.chrome-box .cb-head{display:flex;align-items:center;gap:7px;font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:12.5px;
  letter-spacing:.1px;margin-bottom:7px;color:var(--snow);position:relative;}
.chrome-box .cb-body{font-size:13.5px;line-height:1.45;color:var(--snow);position:relative;}
.chrome-box.accent{border-color:rgba(var(--e-rgb),.45);box-shadow:0 10px 26px -14px rgba(0,0,0,.6),0 0 0 1px rgba(var(--e-rgb),.15) inset;}
.chrome-box.warn{border-color:rgba(255,180,84,.4);}
.chrome-box.bad{border-color:rgba(255,92,108,.4);}
.chrome-sgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:12px;}
.chrome-sbox{position:relative;overflow:hidden;border-radius:14px;padding:12px 13px;text-align:center;
  background:var(--chrome-spec),var(--chrome-base);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid var(--chrome-border);box-shadow:0 8px 20px -12px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.14) inset;}
.chrome-sbox .v{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;font-size:19px;letter-spacing:-.3px;color:var(--snow);position:relative;}
.chrome-sbox .l{font-size:10px;color:var(--muted);margin-top:2px;font-weight:600;position:relative;}
.chrome-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700;
  background:var(--chrome-spec),var(--chrome-base);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--chrome-border);color:var(--e2);}
.pace-warn{display:flex;align-items:center;gap:8px;border-radius:14px;padding:10px 12px;margin-bottom:10px;
  background:rgba(255,180,84,.12);border:1px solid rgba(255,180,84,.35);font-size:12.5px;color:var(--warn);font-weight:600;}
.wu-toggle{display:flex;align-items:center;justify-content:space-between;cursor:pointer;}
.wu-toggle .car{transition:transform .25s ease;font-size:12px;color:var(--muted);}
.wu-toggle.open .car{transform:rotate(180deg);}
.wu-content{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.wu-content.open{max-height:300px;margin-top:8px;}
.nb{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  height:44px;cursor:pointer;z-index:1;position:relative;color:var(--dim);transition:color .2s;-webkit-user-select:none;user-select:none;}
.nb svg{width:21px;height:21px;stroke-width:2.1;transition:transform .2s var(--ease-spring);}
.nb span{font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:700;font-size:9.5px;letter-spacing:.1px;}
.nb.on{color:var(--e2);}
.nb.on svg{animation:navB .5s var(--ease-spring);}
.nb.on::after{content:'';position:absolute;bottom:1px;width:20px;height:3px;border-radius:3px;
  background:var(--e2);box-shadow:0 0 8px rgba(var(--e-rgb),.7);}
@keyframes navB{0%,100%{transform:translateY(0);}40%{transform:translateY(-5px);}}

/* OVERLAYS */
.ov{position:fixed;inset:0;z-index:10000;background:rgba(5,7,10,.7);backdrop-filter:blur(6px);
  display:none;align-items:flex-end;justify-content:center;}
.ov.on{display:flex;}
.ov-card{width:100%;max-width:430px;max-height:92vh;background:var(--bg);border-radius:26px 26px 0 0;
  border-top:1px solid var(--hair2);box-shadow:var(--sh-lg);overflow-y:auto;animation:sheetUp .38s var(--ease-out);
  padding:18px 16px max(24px,env(safe-area-inset-bottom));}
.ov-card::before{content:'';display:block;width:36px;height:4px;border-radius:99px;background:var(--hair2);margin:0 auto 14px;}
@keyframes sheetUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
.ov-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.ov-head h2{font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:19px;letter-spacing:-.3px;}
/* Modifier le profil : header + bouton Sauver toujours visibles, seule la liste des champs défile */
#ovProfile .ov-card{display:flex;flex-direction:column;max-height:92vh;}
#ovProfile .ov-head{flex:0 0 auto;}
#ovProfile #profileEditBody{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px;}
#ovProfile .ov-foot-save{flex:0 0 auto;}
#ovProfile .ov-foot-save:not(:empty){margin-top:12px;padding-top:12px;border-top:1px solid var(--hair);}
.x{width:32px;height:32px;border-radius:var(--r-xs);background:var(--s2);border:1px solid var(--hair2);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);font-size:16px;transition:transform .15s var(--ease-spring),background .15s;}
.x:active{transform:scale(.9);background:var(--s3);}

/* ===== PAGES PLEIN ÉCRAN (ov-push) =====
   Variante de .ov pour les contenus "destination" (Programme, Séance, Bibliothèque) :
   au lieu d'un sheet qui remonte du bas, la carte glisse depuis la droite en
   plein écran, avec un bouton retour + swipe-back depuis le bord gauche —
   même logique que .ex-swipe-card plus bas dans le fichier, mais pour la
   navigation entre écrans plutôt que pour révéler une action. */
.ov.ov-push{background:transparent;backdrop-filter:none;align-items:stretch;justify-content:stretch;}
.ov.ov-push .ov-card{width:100%;max-width:none;height:100%;max-height:none;border-radius:0;border-top:none;
  box-shadow:none;animation:none;transform:translateX(100%);transition:transform .34s var(--ease-out);
  display:flex;flex-direction:column;padding:max(18px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom));}
.ov.ov-push .ov-card::before{display:none;}
.ov.ov-push.on .ov-card{transform:translateX(0);}
.ov.ov-push.dragging .ov-card{transition:none;}
.ov.ov-push .ov-head{flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:12px;}
.ov.ov-push .ov-head h2{order:2;flex:1;}
.ov.ov-push .ov-head .x{order:1;font-size:18px;}
.ov.ov-push .ov-body-scroll{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;}
/* zone invisible sur le bord gauche pour capter le swipe-back, façon iOS */
.ov-push-edge{position:absolute;left:0;top:0;bottom:0;width:22px;z-index:5;}
/* OUVERTURE / FERMETURE ANIMÉES (v107) — avant, une page plein écran apparaissait
   d'un coup (la transition ne peut pas partir d'un display:none) et toutes les
   fenêtres disparaissaient sans transition. .ov-leaving garde la fenêtre affichée
   le temps de sa sortie ; .on est déjà retiré, la logique la voit fermée. */
.ov.ov-push.on .ov-card{animation:ovPushIn .34s var(--ease-out);}
@keyframes ovPushIn{from{transform:translateX(100%);}}
.ov.ov-leaving{display:flex;pointer-events:none;animation:ovFadeOut .26s ease forwards;}
.ov.ov-leaving .ov-card{animation:ovSheetDown .26s cubic-bezier(.4,0,1,1) forwards;}
.ov.ov-push.ov-leaving{animation:none;}
.ov.ov-push.ov-leaving .ov-card{animation:ovPushOut .26s cubic-bezier(.4,0,1,1) forwards;}
@keyframes ovSheetDown{to{transform:translateY(104%);}}
@keyframes ovPushOut{to{transform:translateX(100%);}}
@keyframes ovFadeOut{to{opacity:0;}}
.ov.sheet-drag .ov-card{transition:none;animation:none;}
@media (prefers-reduced-motion: reduce){ .ov.ov-leaving{display:none;} .ov.ov-push.on .ov-card{animation:none;} }
html.easy-mode .ov.ov-leaving{display:none;}

/* ===== SKELETON — écran de chargement au tout premier lancement ===== */
#appSkeleton{position:fixed;inset:0;z-index:20000;background:var(--bg);max-width:430px;margin:0 auto;
  overflow:hidden;padding:max(14px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom));
  display:flex;flex-direction:column;transition:opacity .38s ease;}
#appSkeleton.out{opacity:0;pointer-events:none;}

/* ----- Intro logo : petit temps de marque avant que le squelette n'apparaisse,
   façon écran de lancement natif. Overlay plein écran par-dessus le squelette,
   qui s'efface tout seul après un court instant pour révéler ce qu'il y a dessous. */
.skl-splash{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;
  background:var(--bg);opacity:0;animation:sklSplashIn .4s ease forwards, sklSplashOut .45s ease forwards .68s;}
.skl-splash-logo{width:80px;height:80px;border-radius:var(--r-md);overflow:hidden;
  box-shadow:0 14px 34px -10px rgba(var(--e-rgb),.55),0 0 0 1px rgba(255,255,255,.08) inset;
  animation:sklSplashPulse 1.05s ease-in-out infinite;}
.skl-splash-logo img{width:100%;height:100%;object-fit:cover;display:block;}
@keyframes sklSplashIn{from{opacity:0;transform:scale(.92);}to{opacity:1;transform:scale(1);}}
@keyframes sklSplashOut{to{opacity:0;pointer-events:none;}}
@keyframes sklSplashPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.07);}}

/* ----- Variante "déconnecté" : dès qu'on sait (avant même que app.js ne
   s'exécute — voir le script inline juste après #appSkeleton dans le body)
   qu'aucune session Supabase n'est probablement persistée, on bascule le
   squelette vers une forme qui ressemble à l'écran de connexion plutôt qu'au
   tableau de bord, pour éviter le petit "saut" visuel dashboard → login. */
#appSkeleton .skl-login-shape{display:none;}
#appSkeleton.skl-login .skl-dash{display:none;}
#appSkeleton.skl-login .skl-login-shape{display:flex;flex-direction:column;align-items:center;
  justify-content:center;flex:1;width:100%;max-width:260px;margin:0 auto;gap:14px;}
.skl-login-logo{width:76px;height:76px;border-radius:var(--r-md);margin-bottom:4px;}
.skl-login-brand{width:150px;height:22px;border-radius:8px;}
.skl-login-tag{width:190px;height:12px;border-radius:6px;}
.skl-login-btn{width:100%;height:48px;border-radius:var(--r-sm);margin-top:8px;}
@keyframes sklShimmer{0%{background-position:-360px 0;}100%{background-position:360px 0;}}
.skl{border-radius:var(--r-sm);background-color:var(--s2);
  background-image:linear-gradient(90deg,var(--s2) 20%,var(--s3) 45%,var(--s2) 70%);
  background-size:360px 100%;background-repeat:no-repeat;animation:sklShimmer 1.5s ease-in-out infinite;}
.skl-header{display:flex;align-items:center;justify-content:space-between;padding:2px 0 18px;}
.skl-logo{width:88px;height:26px;border-radius:var(--r-xs);}
.skl-bell{width:38px;height:38px;border-radius:50%;flex-shrink:0;}
.skl-streak{width:132px;height:26px;border-radius:var(--r-pill);margin-bottom:16px;}
.skl-greet{margin-bottom:16px;}
.skl-line{height:22px;margin-bottom:8px;border-radius:8px;}
.skl-line.w70{width:70%;}
.skl-line.w50{width:50%;}
.skl-hero{height:230px;margin-bottom:8px;border-radius:var(--r-md);}
.skl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:8px;}
.skl-stat{height:78px;border-radius:var(--r-md);}
.skl-session{height:96px;border-radius:var(--r-md);margin-bottom:12px;}
.skl-nav{margin-top:auto;display:flex;justify-content:space-between;padding:14px 10px;border-radius:var(--r-pill);background:var(--s1);border:1px solid var(--hair);}
.skl-navicon{width:26px;height:26px;border-radius:8px;}

/* ===== SKELETON — écrans de contenu (Stats, etc.) =====
   Contrairement à #appSkeleton (plein écran, une seule fois au tout premier
   lancement), ces gabarits sont injectés à CHAQUE (re)calcul d'un écran plein
   de données (changement d'onglet, de période...), à la place d'un simple
   fondu, pour que l'utilisateur voie tout de suite une forme du contenu à
   venir au lieu d'un écran figé ou blanc pendant que l'app recalcule
   l'historique complet. Réutilise la même brique .skl (effet de "brillance"). */
.skl-screen{animation:sklScreenIn .18s ease;}
@keyframes sklScreenIn{from{opacity:0;}to{opacity:1;}}
.skl-content-in{animation:sklContentIn .28s var(--ease-out);}
@keyframes sklContentIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}
.skl-seg{height:38px;border-radius:var(--r-pill);margin-bottom:14px;}
.skl-kchart{height:104px;border-radius:var(--r-md);margin-bottom:14px;}
.skl-kchart.tall{height:150px;}
.skl-duo{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;}
.skl-duo>div{height:88px;border-radius:var(--r-md);}
.skl-row3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px;}
.skl-row3>div{height:96px;border-radius:var(--r-md);}
.skl-row4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px;}
.skl-row4>div{height:78px;border-radius:var(--r-md);}
.skl-card{border-radius:var(--r-md);margin-bottom:12px;padding:14px;background:var(--s1);border:1px solid var(--hair);}
.skl-card .skl-line{height:16px;}
.skl-card .skl-line:last-child{margin-bottom:0;}
.skl-heat{display:grid;grid-template-columns:repeat(13,1fr);gap:3px;height:64px;border-radius:var(--r-sm);overflow:hidden;padding:8px;background:var(--s1);border:1px solid var(--hair);margin-bottom:12px;}
.skl-heat>div{border-radius:2px;}

/* ONBOARDING */
/* ===== LOGIN — Liquid Glass ===== */
#login{position:fixed;inset:0;z-index:11500;background:#050709;
  display:none;flex-direction:column;align-items:center;justify-content:center;max-width:430px;margin:0 auto;overflow-y:auto;isolation:isolate;
  padding:max(28px,env(safe-area-inset-top)) 22px max(28px,env(safe-area-inset-bottom));}
#login.on{display:flex;}
/* halos flottants qui donnent au verre quelque chose à réfracter */
#login::before{content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(420px 380px at 18% 8%, rgba(var(--e-rgb),.55), transparent 60%),
    radial-gradient(380px 340px at 88% 20%, rgba(111,255,220,.30), transparent 60%),
    radial-gradient(520px 460px at 50% 108%, rgba(181,125,255,.38), transparent 62%),
    #050709;
  animation:loginHaloDrift 10s ease-in-out infinite alternate;}
#login::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:120px 120px;}
@keyframes loginHaloDrift{0%{filter:hue-rotate(0deg) brightness(1);}100%{filter:hue-rotate(14deg) brightness(1.08);}}
.login-card{width:100%;position:relative;border-radius:32px;padding:32px 24px max(26px,env(safe-area-inset-bottom));
  /* Fond relevé de .06 à .22 : les halos derrière (#login::before) changent de
     teinte en continu (animation loginHaloDrift, hue-rotate + brightness) —
     à .06 le texte n'a presque aucun ancrage de couleur fixe. À .22, la carte
     reste "liquid glass" mais le texte garde un contraste stable quelle que
     soit la teinte du halo à un instant donné. Ombre protectrice ajoutée en
     complément (voir règles ci-dessous). */
  background:rgba(255,255,255,.22);-webkit-backdrop-filter:blur(34px) saturate(2.1);backdrop-filter:blur(34px) saturate(2.1);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.75),0 2px 0 rgba(255,255,255,.22) inset,0 -1px 0 rgba(0,0,0,.3) inset,0 0 60px -20px rgba(var(--e-rgb),.4);
  display:flex;flex-direction:column;animation:glassFloat 7s ease-in-out infinite;}
.login-card::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:var(--glass-shine);}
.login-card::after{content:'';position:absolute;top:0;left:6%;right:6%;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);}
.login-top{text-align:center;margin-top:0;position:relative;z-index:1;}
/* Défense en profondeur : ombre sombre fixe qui garde une bordure de contraste
   autour du texte quelle que soit la couleur du halo animé derrière. */
.login-top,.login-h1,.login-sub,.login-tag,.login-legal,.login-or{text-shadow:0 1px 6px rgba(0,0,0,.55);}
.login-logo{width:76px;height:76px;border-radius:var(--r-md);overflow:hidden;
  display:flex;align-items:center;justify-content:center;margin:0 auto 14px;
  box-shadow:0 14px 34px -8px rgba(var(--e-rgb),.6),0 2px 8px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.18) inset;
  animation:glassFloat 4.2s ease-in-out infinite;}
.login-logo img{width:100%;height:100%;object-fit:cover;display:block;}
.login-logo-fb{display:none;font-family:'Unbounded',system-ui,sans-serif;font-weight:800;font-size:26px;letter-spacing:1px;color:#fff;}
.login-logo.noimg{background:linear-gradient(135deg,var(--e),var(--e2));}
.login-logo.noimg .login-logo-fb{display:block;}
.login-brand{font-weight:800;font-size:25px;letter-spacing:.5px;}
.login-brand span{color:var(--e2);}
.login-tag{color:rgba(244,246,249,.82);font-size:11.5px;letter-spacing:1px;margin-top:3px;text-transform:uppercase;font-weight:600;}
.login-hero{font-size:60px;text-align:center;margin:22px 0 4px;animation:demoFloat 2.4s ease-in-out infinite;filter:drop-shadow(0 12px 20px rgba(var(--e-rgb),.35));position:relative;z-index:1;}
.login-h1{font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:25px;text-align:center;margin-bottom:8px;letter-spacing:-.4px;position:relative;z-index:1;}
.login-sub{color:rgba(244,246,249,.8);font-size:13.5px;text-align:center;line-height:1.55;margin-bottom:26px;padding:0 4px;position:relative;z-index:1;}
.gbtn{width:100%;display:flex;align-items:center;justify-content:center;gap:12px;
  background:rgba(255,255,255,.94);color:#14161B;position:relative;z-index:1;overflow:hidden;
  font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:700;font-size:14.5px;border:1px solid rgba(255,255,255,.5);border-radius:var(--r-sm);padding:15px;
  margin-bottom:11px;cursor:pointer;box-shadow:0 14px 30px -10px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.6) inset;
  transition:transform .15s var(--ease-spring),box-shadow .2s ease;}
.gbtn.muted{opacity:.62;}
.gbtn-hint{margin:-4px 0 10px;text-align:center;font-size:11.5px;color:var(--muted);}
.gbtn:active{transform:scale(.975);}
.gbtn.dark{background:rgba(255,255,255,.08);color:var(--snow);border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 1px 0 rgba(255,255,255,.15) inset;}
.gbtn .gicon{display:flex;align-items:center;font-size:18px;}
.login-or{display:flex;align-items:center;gap:12px;color:rgba(244,246,249,.75);font-size:11.5px;margin:18px 0;font-weight:600;letter-spacing:.3px;position:relative;z-index:1;}
.login-or::before,.login-or::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.14);}
.login-guest{background:none;border:none;color:var(--e2);font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:700;font-size:13.5px;cursor:pointer;width:100%;padding:10px;position:relative;z-index:1;}
.login-guest.subtle{color:rgba(244,246,249,.55);font-weight:600;font-size:12.5px;padding-top:2px;}
.login-legal{color:rgba(244,246,249,.72);font-size:10.5px;text-align:center;line-height:1.6;margin-top:18px;padding-top:0;position:relative;z-index:1;}
.legal-link{color:var(--e2);text-decoration:underline;cursor:pointer;}
/* Champs avec icône + label flottant + (pour le mot de passe) œil de bascule
   intégré au champ — remplace les <label> nus au-dessus de l'input et le lien
   texte "Afficher le mot de passe" séparé, sur inspiration d'une maquette
   fournie par l'utilisateur le 20/09, adaptée à l'identité IKORUN (accent
   dynamique de l'app plutôt que doré, pas de fond photo). */
.li-field{position:relative;z-index:1;display:flex;align-items:center;gap:12px;
  background:var(--s2);border:1px solid var(--hair);border-radius:var(--r-xs);
  padding:9px 14px;margin-bottom:12px;transition:border-color .15s ease,box-shadow .15s ease;}
.li-field:focus-within{border-color:rgba(var(--e-rgb),.55);box-shadow:0 0 0 3px rgba(var(--e-rgb),.16);}
.li-field .li-ic{flex:0 0 auto;color:var(--muted);display:flex;}
.li-field-body{flex:1;min-width:0;}
.li-field-body label{display:block;font-size:10px;color:var(--muted);font-weight:700;letter-spacing:.2px;margin-bottom:1px;}
.li-inp{background:transparent;border:none;padding:0;width:100%;font-size:14.5px;
  font-family:inherit;color:var(--snow);}
.li-inp:focus{outline:none;}
.li-inp::placeholder{color:var(--dim);}
.li-eye{flex:0 0 auto;background:none;border:none;color:var(--muted);cursor:pointer;
  padding:4px;display:flex;transition:transform .15s var(--ease-spring);}
.li-eye:active{transform:scale(.88);}
.li-forgot{text-align:end;font-size:12px;color:var(--e2);font-weight:700;cursor:pointer;
  margin:-2px 0 16px;position:relative;z-index:1;}
.li-submit{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;}
/* Bouton "Continuer en tant qu'invité" — même gabarit que .gbtn (Google) pour
   un poids visuel équivalent : avant, c'était le lien texte le moins visible
   de tout l'écran, tout en bas, alors que c'est un vrai chemin d'entrée à
   part entière. Demande explicite de l'utilisateur du 20/09. */
.li-guest-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  background:rgba(255,255,255,.08);color:var(--snow);position:relative;z-index:1;
  font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:700;font-size:14px;
  border:1px solid rgba(255,255,255,.22);border-radius:var(--r-sm);padding:14px;
  cursor:pointer;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 1px 0 rgba(255,255,255,.15) inset;
  transition:transform .15s var(--ease-spring),background .15s ease;
  margin-bottom:14px;}
.li-guest-btn:active{transform:scale(.975);background:rgba(255,255,255,.14);}
.li-guest-btn .li-ic{display:flex;align-items:center;}
/* Écran de connexion en thème clair — avant ce correctif, #login restait
   toujours sombre ("liquid glass" sur fond quasi noir) même pour un visiteur
   dont le thème clair est déjà connu via le miroir ik_theme_prefs posé en
   haut de <head> (cf. anti-flash de thème) : le seul écran de toute l'app à
   ignorer le thème choisi. Les halos colorés (teintés par l'accent, déjà
   dynamiques via --e-rgb) et l'effet verre sont conservés, seuls le fond et
   le texte basculent pour rester lisibles sur clair. */
html[data-mode="light"] #login{background:var(--bg);}
html[data-mode="light"] #login::before{
  background:
    radial-gradient(420px 380px at 18% 8%, rgba(var(--e-rgb),.24), transparent 60%),
    radial-gradient(380px 340px at 88% 20%, rgba(111,255,220,.16), transparent 60%),
    radial-gradient(520px 460px at 50% 108%, rgba(181,125,255,.18), transparent 62%),
    var(--bg);
}
html[data-mode="light"] .login-card{
  background:rgba(255,255,255,.8);border:1px solid rgba(20,25,35,.08);
  box-shadow:0 30px 80px -20px rgba(30,40,60,.18),0 2px 0 rgba(255,255,255,.85) inset,0 -1px 0 rgba(20,25,35,.05) inset,0 0 60px -20px rgba(var(--e-rgb),.25);
}
html[data-mode="light"] .login-top,html[data-mode="light"] .login-h1,html[data-mode="light"] .login-sub,
html[data-mode="light"] .login-tag,html[data-mode="light"] .login-legal,html[data-mode="light"] .login-or{text-shadow:none;}
html[data-mode="light"] .login-h1{color:var(--snow);}
html[data-mode="light"] .login-sub{color:rgba(16,20,27,.72);}
html[data-mode="light"] .login-tag{color:rgba(16,20,27,.6);}
html[data-mode="light"] .login-or{color:rgba(16,20,27,.55);}
html[data-mode="light"] .login-or::before,html[data-mode="light"] .login-or::after{background:rgba(20,25,35,.12);}
html[data-mode="light"] .login-guest.subtle{color:rgba(16,20,27,.55);}
html[data-mode="light"] .login-legal{color:rgba(16,20,27,.6);}
html[data-mode="light"] .gbtn{box-shadow:0 14px 30px -10px rgba(30,40,60,.28),0 1px 0 rgba(255,255,255,.9) inset;border:1px solid rgba(20,25,35,.15);}
html[data-mode="light"] .gbtn.dark{background:rgba(20,25,35,.05);color:var(--snow);border:1px solid rgba(20,25,35,.14);}
html[data-mode="light"] .li-guest-btn{background:rgba(20,25,35,.05);color:var(--snow);border:1px solid rgba(20,25,35,.14);}
html[data-mode="light"] .li-guest-btn:active{background:rgba(20,25,35,.1);}
#ob{position:fixed;inset:0;z-index:11000;background:var(--bg);display:none;flex-direction:column;
  max-width:430px;margin:0 auto;padding:max(20px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom));}
#ob.on{display:flex;}
.ob-prog{display:flex;gap:5px;margin-bottom:26px;}
.ob-prog div{flex:1;height:3.5px;border-radius:2px;background:var(--hair);transition:.3s var(--ease);}
.ob-prog div.on{background:var(--e);box-shadow:0 0 8px rgba(var(--e-rgb),.5);}
.ob-step{flex:1;overflow-y:auto;display:none;flex-direction:column;justify-content:center;animation:slideUp .4s var(--ease-out);}
.ob-step.on{display:flex;}
.ob-step h1{font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:27px;line-height:1.15;margin-bottom:8px;letter-spacing:-.6px;}
.ob-step p.intro{color:var(--muted);font-size:14.5px;margin-bottom:24px;line-height:1.5;}
.uname-wrap{position:relative;}
.uname-wrap .inp{padding-left:28px;}
.uname-at{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:700;pointer-events:none;}
.field .inp.uname-ok{border-color:var(--ok);}
.field .inp.uname-bad{border-color:var(--bad);}
.uname-status{font-size:12px;margin-top:6px;font-weight:600;min-height:15px;color:var(--muted);}
.uname-status.ok{color:var(--ok);}
.uname-status.bad{color:var(--bad);}
.uname-status.checking{color:var(--muted);}
/* Choix langue/couleur sur l'écran de bienvenue — mêmes puces/pastilles que le
   reste de l'app (pill, accent-dot), pour que la première chose vue ressemble
   déjà à l'app plutôt qu'à un formulaire neutre. */
.ob-pref{margin-top:22px;padding-top:18px;border-top:1px solid var(--hair);}
.ob-pref-lab{font-size:11px;letter-spacing:.4px;color:var(--muted);font-weight:700;
  text-transform:uppercase;margin-bottom:10px;text-align:left;}
.ob-pref #ob_lang.pills{justify-content:center;}
.ob-pref #ob_accent .accent-picker{justify-content:center;}
.ob-pref #ob_accent .accent-dot{width:28px;height:28px;}
.ob-theme-row{display:flex;justify-content:center;}

/* Choix du mode d'affichage : deux cartes comparées côte à côte plutôt que
   des puces de texte — la différence (dense vs épuré) se voit, elle ne se
   lit pas seulement. */
.ob-mode-cards{display:flex;flex-direction:column;gap:12px;}
.ob-mode-card{border:1.5px solid var(--hair);border-radius:16px;padding:16px;cursor:pointer;
  background:var(--s2);transition:border-color .18s,background .18s,transform .12s var(--ease-spring);}
.ob-mode-card:active{transform:scale(.98);}
.ob-mode-card.on{border-color:var(--e);background:var(--ed);}
.ob-mode-ic{font-size:22px;color:var(--e);margin-bottom:6px;}
.ob-mode-t{font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:700;font-size:16px;margin-bottom:5px;}
.ob-mode-d{font-size:13px;color:var(--muted);line-height:1.5;}
.ob-mode-hint{margin-top:14px;font-size:12.5px;color:var(--e2);text-align:center;min-height:16px;}
.ps-hint{font-size:12.5px;color:var(--e2);text-align:center;margin:4px 0 2px;}
.ob-foot{display:flex;gap:10px;margin-top:14px;}

/* MEDAL TIERS */
.t-bronze{color:var(--bronze);} .t-argent{color:var(--argent);} .t-or{color:var(--or);}
.t-platine{color:var(--platine);} .t-diamant{color:var(--diamant);} .t-maitre{color:var(--maitre);} .t-legende{color:var(--legende);}

/* PROGRESS BAR */
.pbar{height:7px;border-radius:6px;background:var(--s3);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.3);}
.pbar>div{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--e),var(--e2));transition:width .7s var(--ease);}

/* XP HERO */
.xp-hero{background:linear-gradient(135deg,var(--s1) 0%,var(--marineL) 145%);position:relative;overflow:hidden;
  border-color:rgba(var(--e-rgb),.28);box-shadow:var(--sh-hero);}
.xp-hero-glow{position:absolute;top:-60%;right:-15%;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--e-rgb),.32),transparent 70%);pointer-events:none;animation:heroBreathe 4.5s ease-in-out infinite;}
@keyframes heroBreathe{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.65;transform:scale(1.15);}}
.xp-hero::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.06),transparent 45%);}

/* RINGS */
.ring-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;}
.ring-c{position:absolute;text-align:center;}
.ring-c .big{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;font-size:21px;letter-spacing:-.3px;}
.ring-c .sm{font-size:9.5px;color:var(--muted);font-weight:600;}
/* Badge affiché quand un objectif est dépassé (anneau plein à 100% + marge) :
   sans ça, "130/70km" et "70/70km" affichaient exactement le même anneau. */
.ring-over{position:absolute;top:-2px;right:-2px;width:18px;height:18px;border-radius:50%;
  background:var(--ok);display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 2px var(--s1);}
.ring-over svg{stroke:#fff;}
.bt-over{font-size:10.5px;color:var(--ok);font-weight:700;text-align:center;margin-top:6px;}

/* CHECK ITEM */
.chk{display:flex;align-items:center;gap:12px;padding:12px 13px;background:var(--s2);border:1px solid var(--hair);
  border-radius:var(--r-sm);margin-bottom:7px;cursor:pointer;transition:border-color .15s,background .15s;}
.chk:active{background:var(--s3);}
.chk .box{width:23px;height:23px;border-radius:8px;border:2px solid var(--hair2);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:.2s;}
.chk.done{border-color:rgba(51,211,153,.3);background:rgba(51,211,153,.06);}
.chk.done .box{background:var(--ok);border-color:var(--ok);animation:bounceChk .4s var(--ease-spring);}
.chk.done .box svg{opacity:1;}
.chk .box svg{opacity:0;width:13px;height:13px;}
.chk.done .txt{color:var(--dim);text-decoration:line-through;}
@keyframes bounceChk{0%{transform:scale(.7);}60%{transform:scale(1.2);}100%{transform:scale(1);}}

/* OBJECTIFS DU JOUR — refonte */
.goals-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.goals-count{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;font-weight:700;color:var(--muted);background:var(--s2);
  border:1px solid var(--hair);border-radius:var(--r-pill);padding:3px 10px;transition:color .2s,background .2s,border-color .2s;}
.goals-count.all{color:var(--ok);background:rgba(51,211,153,.12);border-color:rgba(51,211,153,.35);}
.goals-bar{height:5px;border-radius:99px;background:var(--s2);overflow:hidden;margin-bottom:12px;}
.goals-bar div{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--e),var(--ok));transition:width .35s var(--ease-out);}
.goal-item{display:flex;align-items:center;gap:11px;padding:11px 12px;background:var(--s2);border:1px solid var(--hair);
  border-radius:var(--r-sm);margin-bottom:7px;cursor:pointer;transition:border-color .15s,background .15s,transform .15s var(--ease-spring);}
.goal-item:last-child{margin-bottom:0;}
.goal-item:active{transform:scale(.985);background:var(--s3);}
.goal-item .goal-ic{width:30px;height:30px;border-radius:9px;background:var(--ed);color:var(--e2);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s;}
.goal-item .txt{flex:1;min-width:0;font-size:13.5px;font-weight:600;}
.goal-item .goal-check{width:22px;height:22px;border-radius:50%;border:2px solid var(--hair2);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:.2s;}
.goal-item .goal-check svg{opacity:0;width:12px;height:12px;}
.goal-item.done{border-color:rgba(51,211,153,.3);background:rgba(51,211,153,.06);}
.goal-item.done .goal-ic{background:rgba(51,211,153,.16);color:var(--ok);}
.goal-item.done .goal-check{background:var(--ok);border-color:var(--ok);animation:bounceChk .4s var(--ease-spring);}
.goal-item.done .goal-check svg{opacity:1;}
.goal-item.done .txt{color:var(--dim);text-decoration:line-through;}

/* DÉFI DU JOUR — détail */
.challenge-card .ch-row{display:flex;align-items:center;gap:14px;}
.challenge-card .ch-obj{position:relative;z-index:1;margin-top:10px;padding:9px 11px;font-size:12.5px;line-height:1.4;
  color:var(--muted);background:rgba(255,255,255,.03);border:1px solid var(--hair);border-radius:12px;}

/* ===== MOTION SETTLE — les animations d'ambiance (icônes flottantes, halos qui
   pulsent, reflets qui balaient...) tournent un court instant puis se figent une
   fois la page chargée, au lieu de boucler indéfiniment. Les animations d'entrée
   (.stag), les feedbacks tactiles et l'écran de déblocage de badge ne sont pas
   concernés : ils sont déjà ponctuels. ===== */
html.motion-settled .icb svg,
html.motion-settled .lr-icon svg,
html.motion-settled .qa-pill svg,
html.motion-settled .favtile svg,
html.motion-settled .perfcard .pcl svg,
html.motion-settled .tip-tile::before,
html.motion-settled .tip-glow,
html.motion-settled .wd.today .dot,
html.motion-settled .bd-icon:not(.locked)::before,
html.motion-settled #login::before,
html.motion-settled .login-card,
html.motion-settled .login-logo,
html.motion-settled .login-hero{
  animation:none !important;
}

/* WEEK DOTS */
.week{display:flex;justify-content:space-between;gap:4px;}
.wd{flex:1;text-align:center;}
.wd .dot{width:29px;height:29px;border-radius:var(--r-xs);margin:6px auto 0;background:var(--s2);border:1px solid var(--hair);
  display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;transition:.15s;}
.wd .dot.run{background:var(--ed);color:var(--e2);border-color:transparent;}
.wd .dot.done{background:rgba(51,211,153,.16);color:var(--ok);border-color:transparent;}
.wd .dot.rest{background:var(--s2);color:var(--dim);}
.wd.today .dot{animation:glow 1.8s ease-in-out infinite;border:1.5px solid var(--e);}
@keyframes glow{0%,100%{box-shadow:0 0 4px 0 rgba(var(--e-rgb),.4);}50%{box-shadow:0 0 14px 3px rgba(var(--e-rgb),.55);}}
.wd .dl{font-size:9.5px;color:var(--dim);font-weight:600;margin-top:2px;}

/* STAT GRID */
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.sbox{background:var(--s2);background-image:linear-gradient(180deg,rgba(255,255,255,.025),transparent 50%);border:none;border-radius:var(--r-sm);padding:13px 14px;box-shadow:var(--sh-sm);}
.sbox .v{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;font-size:21px;letter-spacing:-.3px;}
.sbox .l{font-size:10.5px;color:var(--muted);margin-top:3px;font-weight:600;}

/* ===== KALO-STYLE PROGRESS BLOCK (accueil) ===== */
.kalo-head{margin:2px 0 12px;}
.kalo-head h2{font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:21px;letter-spacing:-.3px;}
.kalo-head p{font-size:12.5px;color:var(--muted);margin-top:3px;}

.seg-ctrl{display:flex;gap:3px;background:var(--s1);border:1px solid var(--hair);border-radius:999px;padding:4px;margin-bottom:12px;box-shadow:var(--float-sm);}
.seg-btn{flex:1;text-align:center;padding:8px 0;border-radius:999px;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;transition:background .18s var(--ease),color .18s ease,transform .15s var(--ease-spring);}
.seg-btn:active{transform:scale(.95);}
.seg-btn.on{background:linear-gradient(180deg,var(--e2),var(--e));color:#fff;box-shadow:0 4px 12px -4px rgba(var(--e-rgb),.55);}

/* Rythme vertical du Bilan aligné sur celui de .card (8px) : avant, les blocs
   "k*" espaçaient à 10px et .krow3 n'avait aucune marge basse, ce qui donnait
   dans une même colonne des écarts de 2, 8, 10, 12 et 14px. */
.kchart-card{background:var(--s1);border:1px solid var(--hair);border-radius:20px;padding:16px;box-shadow:var(--float-sm);margin-bottom:8px;}
.kchart-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.kchart-lab{font-size:12.5px;color:var(--muted);font-weight:600;}
.kchart-val{font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:23px;margin-top:3px;}
.kchart-val span{font-size:12px;color:var(--muted);font-weight:600;margin-left:3px;}
.kchart-delta{font-size:11px;font-weight:800;padding:4px 9px;border-radius:999px;background:rgba(51,211,153,.14);color:var(--ok);white-space:nowrap;flex-shrink:0;}
.kchart-delta.bad{background:rgba(255,92,108,.14);color:var(--bad);}
.kchart-delta-sub{font-size:9.5px;color:var(--muted);text-align:right;margin-top:4px;font-weight:600;}

.kbars-box{position:relative;height:68px;margin-top:16px;}
.kbars-avgline{position:absolute;left:0;right:0;border-top:1.5px dashed var(--hair2);}
.kbars-row{display:flex;align-items:flex-end;gap:6px;height:100%;position:relative;z-index:1;}
.kbar-col{flex:1;display:flex;align-items:flex-end;justify-content:center;height:100%;}
.kbar{width:100%;max-width:22px;border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,var(--e2),var(--e));min-height:3px;transition:height .5s var(--ease);}
.kbar.hi{background:linear-gradient(180deg,#FFE07A,var(--or));box-shadow:0 0 10px rgba(242,184,75,.45);}
.kbars-labs{display:flex;gap:6px;margin-top:7px;}
.kbars-labs span{flex:1;text-align:center;font-size:10px;color:var(--muted);font-weight:600;}

.kline-labs{display:flex;justify-content:space-between;margin-top:2px;}
.kline-labs span{font-size:9.5px;color:var(--muted);font-weight:600;}

.kduo{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px;}
.kduo-card{background:var(--s1);border:1px solid var(--hair);border-radius:18px;padding:14px;box-shadow:var(--float-sm);}
.kduo-lab{font-size:12px;color:var(--muted);font-weight:600;}
.kduo-val{font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:20px;margin-top:6px;}
.kduo-sub{font-size:10.5px;color:var(--ok);font-weight:700;margin-top:7px;}
.kgoal-bar{height:7px;border-radius:99px;background:var(--s2);overflow:hidden;margin:9px 0 0;}
.kgoal-bar div{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--e),var(--ok));transition:width .5s var(--ease-out);}

.kinsights-head{font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:16.5px;margin:14px 0 8px;}
.krow3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:8px;}
.ktile{background:var(--s1);border:1px solid var(--hair);border-radius:16px;padding:11px 10px;box-shadow:var(--float-sm);position:relative;min-height:86px;}
.ktile-lab{font-size:9.5px;color:var(--muted);font-weight:700;line-height:1.2;}
.ktile-val{font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:14.5px;margin-top:8px;line-height:1.2;}
.ktile-sub{font-size:9.5px;color:var(--ok);font-weight:700;margin-top:4px;}
.ktile-sub.bad{color:var(--bad);}
.ktile-star{position:absolute;top:9px;right:9px;font-size:12px;}
.ktile-donut{margin:2px auto 0;}
/* ===== PROFIL — refonte : rangée de stats compacte + barre promo ===== */
.pf-hero{text-align:center;padding:22px 18px 18px;}
.pf-avwrap{position:relative;width:96px;margin:0 auto 14px;}
.pf-cam{position:absolute;bottom:0;right:0;width:30px;height:30px;border-radius:50%;background:var(--e);
  border:2.5px solid var(--s1);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;
  box-shadow:0 3px 10px -2px rgba(var(--e-rgb),.6);}
.pf-name-row{display:flex;align-items:center;justify-content:center;gap:7px;}
.pf-edit{width:24px;height:24px;border-radius:50%;background:var(--s2);border:1px solid var(--hair);
  display:inline-flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer;flex-shrink:0;}
.pf-edit:active{transform:scale(.9);}
.pstat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px;}
.pstat{background:var(--s2);border:1px solid var(--hair);border-radius:14px;padding:10px 4px;text-align:center;}
.pstat .v{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:800;font-size:17px;letter-spacing:-.3px;}
.pstat .l{font-size:8.5px;color:var(--muted);margin-top:2px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;}
.promo-bar{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:16px;margin-bottom:8px;
  background:linear-gradient(150deg,#171c2c 0%,#0b0e16 100%);border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--float-md);cursor:pointer;}
.promo-ic{width:38px;height:38px;border-radius:11px;background:rgba(var(--e-rgb),.18);color:var(--e2);
  display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;}
.promo-txt{flex:1;min-width:0;color:#fff;}
.promo-t1{font-size:10px;letter-spacing:.4px;color:rgba(255,255,255,.5);font-weight:700;text-transform:uppercase;}
.promo-t2{font-size:13.5px;font-weight:700;margin-top:1px;}
.promo-cta{background:var(--e);color:#fff;font-size:11.5px;font-weight:700;padding:8px 13px;border-radius:999px;flex-shrink:0;}

/* SESSION CARDS */
.phase-head{font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:12.5px;letter-spacing:.6px;text-transform:uppercase;
  color:var(--e2);margin:18px 0 10px;display:flex;align-items:center;gap:8px;}

/* TOGGLE */
.toggle{width:44px;height:26px;border-radius:999px;background:var(--s2);border:1px solid var(--hair);
  position:relative;cursor:pointer;flex-shrink:0;transition:.2s;}
.toggle.on{background:var(--e);border-color:var(--e);box-shadow:0 0 0 3px rgba(var(--e-rgb),.14);}
.toggle::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:.25s var(--ease-spring);}
.toggle.on::after{left:20px;}

/* THEME SWITCH — sélecteur clair/sombre façon soleil/lune, avec micro-animation au clic */
.theme-switch{width:76px;height:38px;border-radius:999px;position:relative;cursor:pointer;flex-shrink:0;
  background:linear-gradient(180deg,#0e1420,#060a12);border:1px solid rgba(255,255,255,.1);
  box-shadow:0 6px 16px -8px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.05) inset;
  transition:background .35s ease,border-color .35s ease;overflow:hidden;}
.theme-switch.light{background:linear-gradient(180deg,#eaf2ff,#dbe6f8);border-color:rgba(20,30,50,.1);}
.theme-switch .ts-sky{position:absolute;inset:0;opacity:0;transition:opacity .35s ease;pointer-events:none;}
.theme-switch .ts-star{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;opacity:.8;}
.theme-switch:not(.light) .ts-sky{opacity:1;}
.theme-switch .ts-thumb{position:absolute;top:3px;left:3px;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#ffe9a8,#f2b84b);color:#7a5410;
  box-shadow:0 2px 6px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.25) inset;
  transition:left .38s var(--ease-spring),background .35s ease,color .35s ease,transform .38s var(--ease-spring);}
.theme-switch.light .ts-thumb{left:calc(100% - 33px);background:linear-gradient(160deg,#dfe6f0,#aab4c4);color:#3a4150;}
.theme-switch .ts-thumb svg{width:16px;height:16px;}
.theme-switch.pulse .ts-thumb{animation:tsPulse .5s var(--ease-spring);}
@keyframes tsPulse{0%{transform:scale(1);}45%{transform:scale(.8) rotate(-25deg);}100%{transform:scale(1) rotate(0);}}
.ts-ray{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;
  pointer-events:none;opacity:0;background:radial-gradient(circle,rgba(255,214,120,.55),transparent 65%);}
.theme-switch.light .ts-ray{background:radial-gradient(circle,rgba(159,216,255,.5),transparent 65%);}
.theme-switch.burst .ts-ray{animation:tsBurst .55s ease-out;}
@keyframes tsBurst{0%{opacity:.9;transform:scale(.3);}100%{opacity:0;transform:scale(1.8);}}

.theme-switch.sm{width:54px;height:28px;}
.theme-switch.sm .ts-thumb{width:22px;height:22px;top:2px;left:2px;}
.theme-switch.sm .ts-thumb svg{width:12px;height:12px;}
.theme-switch.sm.light .ts-thumb{left:calc(100% - 24px);}
.theme-switch.sm .ts-star{width:1.5px;height:1.5px;}
.theme-switch.sm .ts-ray{width:40px;height:40px;margin:-20px 0 0 -20px;}

/* STEPPER */
.stepper{display:flex;align-items:center;gap:8px;}
.stepper button{width:40px;height:40px;border-radius:var(--r-xs);background:var(--s2);border:1px solid var(--hair);
  color:var(--snow);font-size:17px;font-weight:700;cursor:pointer;transition:transform .12s var(--ease-spring);}
.stepper button:active{transform:scale(.9);}
.stepper .val{flex:1;text-align:center;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;font-size:19px;}

/* WHEELS */
.wheels{display:flex;gap:6px;align-items:center;justify-content:center;}
.wheel{height:120px;width:64px;overflow-y:scroll;scroll-snap-type:y mandatory;
  background:var(--s2);border:1px solid var(--hair);border-radius:14px;position:relative;
  -webkit-overflow-scrolling:touch;mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);}
.wheel .wi{height:40px;scroll-snap-align:center;display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;font-size:20px;color:var(--dim);}
.wheel .wi.sel{color:var(--snow);font-size:24px;}
.wheel-sep{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;font-size:22px;}
.wheel-pad{height:80px;}
/* Wheel Picker premium — parfaitement stable, zéro décalage horizontal */
.pk-wrap{position:relative;display:flex;gap:2px;align-items:stretch;justify-content:center;padding:10px 0;
  height:210px;overflow:hidden;}
.pk-wrap::before{content:'';position:absolute;top:50%;left:6px;right:6px;height:42px;transform:translateY(-50%);
  background:var(--ed);border:1px solid var(--e);border-radius:12px;pointer-events:none;z-index:0;}
.pkcol{position:relative;z-index:1;height:100%;flex:0 0 auto;min-width:60px;
  overflow-y:scroll;overflow-x:hidden;scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior:contain;
  mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);}
.pkcol.wide{min-width:150px;flex:1 1 auto;}

/* ===== CONVERTISSEUR — distance / allure / poids ===== */
.cv-cats{margin-bottom:16px;}
.cv-card{display:flex;align-items:stretch;gap:10px;background:var(--s2);border:1px solid var(--hair);
  border-radius:20px;padding:16px 14px;}
.cv-side{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px;cursor:pointer;}
.cv-lab{font-size:10px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.5px;}
.cv-val{font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:26px;letter-spacing:-.4px;line-height:1.1;
  word-break:break-word;}
.cv-val.res{color:var(--e2);}
.cv-swap{align-self:center;flex-shrink:0;width:36px;height:36px;border-radius:50%;background:var(--s3);
  border:1px solid var(--hair);color:var(--e2);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:transform .18s var(--ease-spring);}
.cv-swap:active{transform:rotate(180deg);}
.cv-units{display:flex;flex-wrap:wrap;gap:6px;}
.cv-unit{padding:5px 10px;border-radius:99px;font-size:11.5px;font-weight:700;background:var(--s3);
  border:1px solid var(--hair);color:var(--muted);cursor:pointer;transition:background .15s,border-color .15s,color .15s;}
.cv-unit.on{background:var(--ed);border-color:var(--e);color:var(--e2);}
.cv-pace-hero{background:linear-gradient(150deg, rgba(var(--e-rgb),.16), rgba(var(--e2-rgb),.06));
  border:1px solid rgba(var(--e-rgb),.24);border-radius:20px;padding:18px;text-align:center;
  cursor:pointer;margin-bottom:12px;}
.cv-pace-hero .cv-val{margin-top:6px;}
.cv-pace-table .zrow:first-child{border-top:0;}
.pkcol::-webkit-scrollbar{display:none;width:0;}
.pkitem{height:42px;scroll-snap-align:center;display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;font-size:19px;color:var(--dim);
  transition:color .18s ease,opacity .18s ease,transform .18s ease;transform-origin:center center;
  will-change:transform;white-space:nowrap;opacity:.45;}
.pkitem.sel{color:var(--snow);font-weight:700;transform:scale(1.18);opacity:1;}
.pk-sep{z-index:1;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;font-size:20px;color:var(--muted);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:8px;}
.pk-unit{z-index:1;font-size:13px;color:var(--muted);display:flex;align-items:center;flex:0 0 auto;margin-left:2px;}
/* Arabe (RTL) : une unité isolée comme « /km » s'affichait « km/ » (la barre
   oblique, neutre, était rejetée à droite). Sens de lecture forcé et isolé sur
   ces petites étiquettes d'unité — l'arabe qu'elles contiennent parfois reste
   correct, ses lettres portant leur propre sens. Audit 24/09. */
[dir=rtl] .pk-unit,[dir=rtl] .hv7-day-targets span,[dir=rtl] .pb-pace{direction:ltr;unicode-bidi:isolate;}
.pk-pad{height:84px;}
/* RTL (arabe) */
html[dir="rtl"] body{direction:rtl;}
html[dir="rtl"] .topbar,html[dir="rtl"] .row,html[dir="rtl"] .ov-head{direction:rtl;}
html[dir="rtl"] .mono,html[dir="rtl"] .pkcol,html[dir="rtl"] .wheels{direction:ltr;}
html[dir="rtl"] .tb-title,html[dir="rtl"] .card-t,html[dir="rtl"] .lab{text-align:right;}
html[dir="rtl"] .nb span{direction:rtl;}

/* HEATMAP */
.heat{display:grid;grid-template-columns:repeat(13,1fr);gap:3px;}
.heat div{aspect-ratio:1;border-radius:3px;background:var(--s2);}

/* TOAST */
/* Le toast doit rester AU-DESSUS de toutes les fenêtres : topZ() distribue des
   z-index à partir de 12001, si bien qu'à 12000 le toast passait derrière la
   moindre popup — or beaucoup de messages importants (« Code copié », erreurs
   de formulaire, « Club créé ») s'affichent justement fenêtre ouverte. Bande
   réservée : overlays plafonnés à 18000, toast à 19000, skeleton de boot 20000. */
#toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%) translateY(20px);z-index:19000;
  background:var(--s1);border:1px solid var(--e);color:var(--snow);padding:12px 20px;border-radius:999px;
  font-size:14px;font-weight:600;opacity:0;transition:.3s;pointer-events:none;max-width:90%;text-align:center;}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0);}

/* CONFETTI */
#confetti{position:fixed;inset:0;z-index:13000;pointer-events:none;}

/* zone bars */
.zrow{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--hair);}
.zrow:last-child{border:none;}
.zdot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.zname{font-weight:700;font-size:14px;flex:1;}
.zval{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;font-size:14px;color:var(--muted);}

.tip{background:var(--ed);border:1px solid rgba(var(--e-rgb),.3);border-radius:12px;padding:10px 12px;
  font-size:13px;color:var(--muted);line-height:1.4;}
.muscle-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px;}
.mtag{font-size:10px;padding:3px 8px;border-radius:999px;background:var(--s2);color:var(--muted);border:1px solid var(--hair);}

.empty{text-align:center;padding:40px 20px;color:var(--dim);}
.empty .em-ic{font-size:40px;margin-bottom:12px;}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.grip{color:var(--dim);font-size:18px;cursor:grab;}
hr.hl{border:none;border-top:1px solid var(--hair);margin:14px 0;}
.badge{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:var(--r-pill);
  background:var(--ed);color:var(--e2);font-weight:800;font-size:11.5px;letter-spacing:.2px;border:1px solid rgba(var(--e-rgb),.22);}
.favtile{position:relative;isolation:isolate;overflow:hidden;background:var(--s1);border:1px solid var(--hair);border-radius:var(--r-sm);padding:14px 6px;
  box-shadow:var(--float-sm);text-align:center;cursor:pointer;transition:transform .15s var(--ease-spring),border-color .15s,box-shadow .15s ease,background .25s ease,color .25s ease;}
.favtile::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(circle 90px at 22% 15%, rgba(255,255,255,.09), transparent 70%);}
html.easy-mode .favtile::before{display:none!important;}
.favtile:active{transform:scale(.95);border-color:var(--e);}
.favlab{font-size:10.5px;font-weight:600;margin-top:7px;line-height:1.2;color:var(--snow);}
.searchbox{position:relative;}
.searchbox .searchic{position:absolute;left:14px;top:50%;transform:translateY(-50%);display:flex;pointer-events:none;}
.chbtn{width:62px;height:62px;border-radius:50%;background:var(--s2);border:1.5px solid var(--hair);color:var(--snow);font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:700;font-size:13px;cursor:pointer;transition:transform .12s;}
.chbtn:active{transform:scale(.92);}

/* ===== SPORT — CARTE PLAN =====
   Les six phases d'entraînement ont leur propre échelle chromatique, indépendante
   de l'accent choisi : c'est une information (où en est le plan), pas une décoration.
   Elle sert au rail de la carte plan et aux en-têtes de phase de la liste. */
:root{
  --ph-PG:#5B87BC; --ph-AERO:#3E9C84; --ph-VO2:#C99240;
  --ph-SPE:#D06B48; --ph-PIC:#D2586B; --ph-TAPER:#7E6DB0;
}
html[data-mode="light"]{
  --ph-PG:#3B6A9D; --ph-AERO:#2A7A63; --ph-VO2:#946719;
  --ph-SPE:#A64A29; --ph-PIC:#982E3D; --ph-TAPER:#5D4D90;
}
.sp-plan{position:relative;overflow:hidden;border-radius:24px;padding:18px;margin-bottom:18px;
  background:linear-gradient(160deg, rgba(var(--e-rgb),.14), rgba(var(--e2-rgb),.05));
  border:1px solid rgba(var(--e-rgb),.22);
  box-shadow:0 18px 40px -22px rgba(var(--e-rgb),.5),0 2px 12px -6px rgba(0,0,0,.4);}
.sp-plan::before{content:'';position:absolute;width:220px;height:220px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(var(--e-rgb),.26), transparent 70%);top:-125px;inset-inline-end:-70px;}
.sp-plan>*{position:relative;}
.sp-plan-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;}
.sp-race{font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:21px;letter-spacing:-.5px;line-height:1.12;}
.sp-race-sub{color:var(--muted);font-size:12px;margin-top:5px;font-weight:500;}
.sp-days{text-align:end;flex-shrink:0;}
.sp-days b{display:block;font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:30px;line-height:1;letter-spacing:-1px;color:var(--e2);}
.sp-days span{font-size:9px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.6px;}

/* Rail des phases : une barre par phase, largeur proportionnelle à son nombre de semaines. */
.sp-rail{display:flex;gap:3px;height:6px;margin-top:18px;}
.sp-rail i{display:block;border-radius:99px;background:currentColor;opacity:.28;}
.sp-rail i.past{opacity:.6;}
.sp-rail i.now{opacity:1;box-shadow:0 0 10px currentColor;}
.sp-rail-lab{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:9px;}
.sp-rail-lab b{font-weight:700;font-size:13px;}
.sp-rail-lab span{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:var(--muted);white-space:nowrap;}

.sp-metrics{display:flex;margin-top:16px;padding-top:14px;border-top:1px solid var(--hair2);}
.sp-metrics>div{flex:1;min-width:0;}
.sp-metrics>div+div{border-inline-start:1px solid var(--hair2);padding-inline-start:12px;}
.sp-metrics b{display:block;font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:17px;letter-spacing:-.3px;}
.sp-metrics span{font-size:9px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.5px;}
.sp-delta{font-size:11px;font-weight:700;}
.sp-delta.up{color:var(--ok);} .sp-delta.down{color:var(--bad);}
.sp-acts{display:flex;flex-direction:column;gap:10px;margin-top:16px;}
.sp-acts button{flex:1;padding:11px 8px;border-radius:99px;font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:700;font-size:12px;
  cursor:pointer;background:transparent;color:var(--muted);border:1px solid var(--hair2);}
.sp-acts button:active{transform:scale(.97);}
.sp-acts .lnk{padding:0;border:0;background:none;color:var(--muted);font-family:inherit;font-size:11.5px;
  font-weight:600;text-decoration:underline;text-underline-offset:3px;}

/* Ligne de séance : le filet porte la couleur du type, l'état se lit sans le texte. */
.sess{position:relative;background:var(--s2);border:1px solid var(--hair);border-radius:var(--r-sm);
  padding:13px 14px 13px 17px;margin-bottom:9px;cursor:pointer;box-shadow:var(--sh-sm);overflow:hidden;
  transition:transform .15s var(--ease-spring),border-color .2s,box-shadow .2s;}
.sess::before{content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:var(--sess-c,var(--e));}
.sess:active{transform:scale(.985);}
.sess.done{opacity:.6;}
.sess.done::before{background:var(--ok);}
.sess.missed::before{background:var(--bad);}
.sess.today{background:linear-gradient(135deg,var(--ed),rgba(31,47,80,.4));border-color:var(--e);
  box-shadow:0 0 0 1px rgba(var(--e-rgb),.12) inset,0 12px 30px -10px rgba(var(--e-rgb),.28);}
.sess-t{font-weight:700;font-size:14px;}
.sess-m{color:var(--muted);font-size:12px;margin-top:3px;}
.sess-s{color:var(--e2);font-size:12px;font-weight:700;margin-top:3px;}
.qbadge{font-size:10.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;padding:4px 10px;border-radius:999px;}
.qbadge.hard{background:rgba(255,92,108,.16);color:var(--bad);}
.qbadge.easy{background:rgba(51,211,153,.14);color:var(--ok);}
.qbadge.rest{background:var(--s2);color:var(--dim);}
.qbadge.done{background:rgba(51,211,153,.16);color:var(--ok);}
.qbadge.missed{background:rgba(255,92,108,.16);color:var(--bad);}

/* ===== MUSCULATION — CARTES DE PROGRAMME =====
   La silhouette remplace la photo de salle : elle dit ce que le programme
   travaille, ce qu'une image de matériel ne dit jamais. */
.mus-card{position:relative;display:flex;align-items:stretch;gap:12px;padding:14px 16px;margin-bottom:10px;
  border-radius:20px;background:var(--s2);border:1px solid var(--hair);cursor:pointer;box-shadow:var(--sh-sm);
  transition:transform .15s var(--ease-spring),border-color .2s;}
.mus-card:active{transform:scale(.985);}
.mus-card-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;justify-content:center;}
.mus-name{font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:700;font-size:15.5px;letter-spacing:-.3px;line-height:1.2;}
.mus-tags{display:flex;flex-wrap:wrap;gap:5px;}
.mus-tags span{font-size:10px;font-weight:700;padding:3px 8px;border-radius:99px;
  background:rgba(var(--e-rgb),.14);color:var(--e2);}
.mus-meta{font-size:11.5px;color:var(--muted);font-weight:500;}
.mus-last{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:var(--e2);letter-spacing:.4px;}
.mus-last.never{color:var(--dim);}
.mus-body{display:flex;gap:3px;width:90px;flex-shrink:0;align-self:center;}
.mus-body svg{width:50%;height:auto;}
.mus-del{position:absolute;top:8px;inset-inline-end:8px;}
/* En-tête de routine : séries | durée | silhouettes, sur une seule ligne. */
.prog-stats{display:flex;align-items:center;padding:14px 6px;}
.prog-stats-c{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding:0 6px;}
.prog-stats-c+.prog-stats-c{border-inline-start:1px solid var(--hair);}
.prog-stats-c .lab{margin:0;}
.prog-stats-c .v{font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:20px;letter-spacing:-.4px;}
.prog-stats .mus-body{width:78px;}
/* Vignette d'exercice — cadre clair, comme les planches d'exercices des apps
   de muscu : la photo se détache du fond sombre au lieu de s'y fondre.
   Le pictogramme du groupe musculaire reste dessous si l'image ne charge pas. */
.ex-thumb{position:relative;flex-shrink:0;overflow:hidden;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:#F4F6F8;border:1px solid rgba(255,255,255,.14);color:#4A5666;}
.ex-thumb img{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);object-fit:cover;border-radius:9px;}
/* Barre du haut de la séance en cours : pause, minuteur, terminer. */
.live-top{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.live-ic{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--s2);border:1px solid var(--hair);color:var(--muted);cursor:pointer;flex-shrink:0;
  transition:transform .12s var(--ease-spring),color .15s,border-color .15s;}
.live-ic:active{transform:scale(.92);}
/* Coche de série : le glyphe était absent des deux états, le cercle restait vide. */
.setcheck{width:32px;height:32px;border-radius:50%;margin:0 auto;cursor:pointer;display:flex;
  align-items:center;justify-content:center;background:var(--s3);border:1px solid var(--hair);
  color:var(--dim);transition:background .15s,color .15s,border-color .15s,transform .12s var(--ease-spring);}
.setcheck:active{transform:scale(.9);}
.setcheck.on{background:var(--ok);border-color:var(--ok);color:#08201A;}
.live-rest{display:flex;align-items:center;gap:7px;margin-bottom:10px;font-size:12.5px;font-weight:600;
  color:var(--e2);cursor:pointer;}

/* ===== SÉANCE MANQUÉE — grille d'icônes ===== */
.reason-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.reason-tile{background:var(--s2);border:1px solid var(--hair);border-radius:var(--r-sm);padding:12px 10px;
  font-size:13px;font-weight:600;color:var(--snow);text-align:center;cursor:pointer;transition:border-color .15s,background .15s,transform .12s var(--ease-spring);}
.reason-tile:active{border-color:var(--e);background:var(--ed);transform:scale(.96);}
.act-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}
.act-tile{background:var(--s2);border:1px solid var(--hair);border-radius:var(--r-sm);padding:14px 6px;text-align:center;
  cursor:pointer;transition:border-color .15s,background .15s,transform .12s var(--ease-spring);}
.act-tile:active{border-color:var(--e);background:var(--ed);transform:scale(.96);}
.act-tile .ic{font-size:24px;margin-bottom:6px;}
.act-tile .lb{font-size:11px;font-weight:700;color:var(--snow);line-height:1.2;}

/* ============ ACCUEIL A — nouveaux blocs (streak, VDOT/tonnage, records, objectif, badges) ============ */
.streak{display:inline-flex;align-items:center;gap:5px;background:rgba(255,150,50,.12);border:1px solid rgba(255,150,50,.3);
  border-radius:999px;padding:5px 11px;font-size:11px;font-weight:700;color:#ffb35c;margin:8px 0 4px;}
.streak b{font-weight:800;}


.sec-lab{font-size:11px;letter-spacing:1px;color:var(--e2);font-weight:700;margin:16px 0 8px;text-transform:uppercase;
  display:flex;justify-content:space-between;align-items:center;text-shadow:0 0 10px rgba(var(--e-rgb),.35);}
.sec-lab .link{color:var(--e2);font-weight:600;text-transform:none;letter-spacing:0;font-size:12px;}

.hero-quip{font-size:11.5px;color:var(--e2);font-weight:600;margin-top:4px;}

/* Séances / VDOT / Tonnage / Forme */
.stat-quatro{display:flex;gap:8px;margin-top:8px;}
.stat-card{flex:1;padding:12px 6px;text-align:center;cursor:pointer;}
.stat-ic{width:26px;height:26px;border-radius:8px;background:rgba(var(--e-rgb),.14);color:var(--e2);
  display:flex;align-items:center;justify-content:center;margin:0 auto 8px;}
.stat-v{font-weight:700;font-size:14.5px;letter-spacing:-.3px;}
.stat-l{font-size:7.5px;color:var(--muted);margin-top:4px;font-weight:600;letter-spacing:.2px;text-transform:uppercase;}

/* Records perso */
.pb-row{display:flex;gap:9px;}
.pb-card{flex:1;padding:14px 10px;text-align:center;cursor:pointer;}
.pb-dist{font-size:9px;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;font-weight:600;}
.pb-time{font-weight:800;font-size:19px;margin-top:7px;letter-spacing:-.4px;}
.pb-pace{font-size:9.5px;color:var(--e2);margin-top:4px;font-weight:600;}

/* Objectif + countdown */
.goal-card{padding:20px;cursor:pointer;position:relative;overflow:hidden;}
.goal-top{display:flex;justify-content:space-between;align-items:flex-start;}
.goal-lab{font-size:10px;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase;font-weight:600;}
.goal-race{font-weight:700;font-size:15px;margin-top:6px;}
.goal-target{font-size:11px;color:var(--e2);margin-top:4px;font-weight:600;}
.goal-count{text-align:right;}
.goal-count .n{font-weight:900;font-size:30px;background:linear-gradient(180deg,#fff,var(--e2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.goal-count .u{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;}
.goal-bar{height:6px;border-radius:4px;background:rgba(255,255,255,.08);margin-top:16px;overflow:hidden;}
.goal-bar div{height:100%;background:linear-gradient(90deg,var(--e),var(--e2));border-radius:4px;}

/* ===== Amis & Classement — redesign ===== */
.fr-tabs{display:flex;gap:4px;background:var(--s2);border:1px solid var(--hair);border-radius:var(--r-pill);padding:4px;margin-bottom:16px;}
.fr-tab{flex:1;text-align:center;padding:9px 6px;border-radius:calc(var(--r-pill) - 3px);font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer;transition:all .15s var(--ease-spring);white-space:nowrap;}
.fr-tab.on{background:var(--e);color:#fff;box-shadow:0 4px 12px -4px rgba(var(--e-rgb),.6);}
.fr-tab:active{transform:scale(.96);}

.fr-search{position:relative;margin-bottom:4px;}
.fr-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--dim);pointer-events:none;}
.fr-search input{width:100%;background:var(--s2);border:1px solid var(--hair);border-radius:var(--r-pill);padding:13px 14px 13px 40px;
  color:var(--snow);font-size:14.5px;font-weight:500;}
.fr-search input:focus{outline:none;border-color:var(--e);box-shadow:0 0 0 3px rgba(var(--e-rgb),.14);}

.fr-req-card{background:linear-gradient(150deg,rgba(var(--e-rgb),.12),rgba(var(--e-rgb),.03));border:1px solid rgba(var(--e-rgb),.3);border-radius:var(--r-md);padding:12px 14px;margin-top:8px;}

.fr-row{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;transition:transform .12s var(--ease-spring);}
.fr-row:active{transform:scale(.98);}
.fr-avatar{width:44px;height:44px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;color:var(--e);background:var(--s2) center/cover;position:relative;}
.fr-avatar::after{content:'';position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--e);opacity:.55;}
.fr-info{flex:1;min-width:0;}
.fr-name{font-weight:700;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fr-meta{display:flex;align-items:center;gap:6px;margin-top:3px;}
.fr-lvl-chip{font-size:10px;font-weight:800;color:var(--e2);background:var(--ed);border-radius:6px;padding:2px 6px;letter-spacing:.2px;}
/* Rôles de club : un club peut avoir plusieurs admins, ce qui lui permet de
   survivre à la suppression du compte de son créateur (transfert au plus ancien
   autre admin plutôt que suppression du club). */
.club-admin-chip{font-size:9.5px;font-weight:800;color:var(--ok);background:rgba(51,211,153,.14);
  border-radius:5px;padding:1.5px 5px;margin-left:6px;letter-spacing:.3px;vertical-align:middle;white-space:nowrap;}
.club-role-btn{flex-shrink:0;font-size:10.5px;font-weight:700;color:var(--e2);background:var(--s2);
  border:1px solid var(--hair2);border-radius:99px;padding:5px 10px;margin-left:8px;cursor:pointer;white-space:nowrap;
  transition:transform .15s var(--ease-spring),background .15s ease;}
.club-role-btn:active{transform:scale(.94);background:var(--s3);}
.fr-km-txt{font-size:11.5px;color:var(--muted);font-weight:600;}
.fr-del{color:var(--dim);cursor:pointer;padding:6px;flex-shrink:0;}
.fr-del:active{color:var(--bad);}

.fr-podium{display:flex;align-items:flex-end;gap:8px;margin-bottom:14px;}
.fr-pod-card{flex:1;text-align:center;border-radius:var(--r-md);padding:14px 6px 12px;position:relative;}
.fr-pod-card.p1{background:linear-gradient(150deg,rgba(244,196,48,.22),rgba(244,196,48,.05));border:1px solid rgba(244,196,48,.4);padding-top:20px;order:2;}
.fr-pod-card.p2{background:linear-gradient(150deg,rgba(213,218,225,.16),rgba(213,218,225,.04));border:1px solid rgba(213,218,225,.3);order:1;}
.fr-pod-card.p3{background:linear-gradient(150deg,rgba(185,121,62,.18),rgba(185,121,62,.05));border:1px solid rgba(185,121,62,.35);order:3;}
.fr-pod-medal{font-size:22px;line-height:1;}
.fr-pod-av{width:48px;height:48px;border-radius:50%;margin:6px auto;background:var(--s2) center/cover;display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--e);}
.fr-pod-name{font-size:11.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fr-pod-xp{font-size:10px;color:var(--muted);font-weight:700;margin-top:2px;}

.fr-rank-row{display:flex;align-items:center;gap:12px;padding:11px 4px;}
.fr-rank-num{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:800;width:22px;color:var(--dim);font-size:13px;}
.fr-rank-row.me{background:var(--ed);border-radius:var(--r-xs);padding-left:8px;padding-right:8px;}
.fr-row.me{background:var(--ed);border-radius:var(--r-xs);cursor:default;}

.fr-ref-card{background:linear-gradient(150deg,rgba(var(--e-rgb),.16),rgba(var(--e2-rgb),.04));border:1px solid rgba(var(--e-rgb),.3);border-radius:var(--r-lg);padding:24px 20px;text-align:center;}
.fr-ref-lab{font-size:11px;letter-spacing:1.5px;color:var(--muted);font-weight:700;text-transform:uppercase;}
.fr-ref-code{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:30px;font-weight:800;letter-spacing:.12em;margin-top:8px;
  background:linear-gradient(180deg,#fff,var(--e2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}

.fr-profile-hero{text-align:center;padding:28px 20px 20px;position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:radial-gradient(120% 100% at 50% -10%, rgba(var(--e-rgb),.22), transparent 65%), var(--s1);border:1px solid var(--hair);}
.fr-profile-av{width:88px;height:88px;border-radius:50%;margin:0 auto;background:var(--s2) center/cover;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:32px;color:var(--e);position:relative;box-shadow:0 0 0 4px var(--s1),0 0 0 5px rgba(var(--e-rgb),.4);}
.fr-profile-lvl{position:absolute;bottom:-2px;right:calc(50% - 44px - 4px);background:var(--e);color:#fff;font-size:10.5px;font-weight:800;padding:2px 7px;border-radius:8px;box-shadow:0 0 0 3px var(--s1);}

/* Progression (badges) */
.badge-mini-row{display:flex;gap:8px;align-items:center;}
.badge-mini{width:38px;height:38px;border-radius:12px;background:linear-gradient(150deg,rgba(var(--e-rgb),.3),rgba(var(--e-rgb),.06));
  border:1px solid rgba(var(--e-rgb),.35);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--e2);cursor:pointer;}
.badge-mini.locked{opacity:.28;background:rgba(255,255,255,.04);border-color:var(--hair);color:var(--dim);}
.badge-progress-txt{flex:1;}
.badge-progress-txt .t{font-weight:600;font-size:11.5px;}
.badge-progress-txt .b{height:5px;border-radius:3px;background:rgba(255,255,255,.08);margin-top:6px;overflow:hidden;}
.badge-progress-txt .b div{height:100%;background:linear-gradient(90deg,var(--e),var(--e2));}

/* ===== SWIPE-TO-DELETE — carte exercice en séance live (glisser à gauche ou à droite) ===== */
.ex-swipe-wrap{position:relative;border-radius:var(--r-md);margin-bottom:12px;overflow:hidden;}
.ex-swipe-action{position:absolute;top:0;height:100%;width:88px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;color:#fff;font-weight:700;font-size:11.5px;
  cursor:pointer;background:linear-gradient(135deg,var(--bad),#B7303D);z-index:0;user-select:none;}
.ex-swipe-action span{font-size:19px;line-height:1;}
.ex-swipe-action.left{left:0;}
.ex-swipe-action.right{right:0;}
/* La carte doit être OPAQUE ici : le glassmorphism (fond semi-transparent + flou 26px) laissait le rouge
   baver sur toute la carte au lieu de rester caché sur ses 88px. On repasse donc en fond plein, comme
   le fait déjà pour les cartes en cours de glissement, pour la même raison. */
.ex-swipe-card{position:relative;z-index:1;touch-action:none;margin-bottom:0 !important;
  transition:transform .28s cubic-bezier(.2,.85,.3,1);will-change:transform;
  background:var(--s1);background-image:var(--grad-card);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border:1px solid var(--hair);box-shadow:var(--float-md);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
.ex-swipe-card.dragging{transition:none;}

/* Swipe sur une ligne de série (dans le tableau Set/Kg/Reps) — même logique, plus compact */
.set-swipe-wrap{position:relative;border-radius:10px;overflow:hidden;margin-bottom:7px;}
.set-swipe-action{position:absolute;top:0;height:100%;width:64px;display:flex;align-items:center;
  justify-content:center;color:#fff;font-size:16px;cursor:pointer;z-index:0;user-select:none;
  background:linear-gradient(135deg,var(--bad),#B7303D);}
.set-swipe-action.left{left:0;}
.set-swipe-action.right{right:0;}
.set-swipe-row{position:relative;z-index:1;touch-action:pan-y;background:var(--s1);
  transition:transform .28s cubic-bezier(.2,.85,.3,1);will-change:transform;border-radius:10px;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
.set-swipe-row.dragging{transition:none;}
/* La ligne contient des <input> pour kg/reps : eux doivent rester sélectionnables/éditables normalement */
.set-swipe-row input{-webkit-user-select:text;user-select:text;}

/* ===== RÉORGANISER UN EXERCICE (appui long : la carte se soulève et se glisse en place) ===== */
.ex-swipe-wrap{will-change:transform;}

/* ============ TOUR GUIDÉ (visite après inscription) ============
   4 bandes indépendantes floutées autour d'une zone découpée, plutôt qu'un
   masque CSS sur data-URI : aucune dépendance à la Content-Security-Policy
   (img-src) pour cet effet, qui repose uniquement sur backdrop-filter. */
.tour-ov{position:fixed;inset:0;display:none;pointer-events:none;}
.tour-ov.on{display:block;}
/* .tour-ov couvre tout l'écran (inset:0), y compris le "trou" laissé libre par les
   bandes autour de l'élément mis en avant (cf resetTourVeil/positionTourOn) — sans ce
   pointer-events:none, ce conteneur plein écran interceptait les taps même dans ce
   trou, où rien n'est pourtant dessiné. Résultat : le bouton spotlighté par l'étape
   "sport" du tour (ex. "Configurer & générer") avait l'air cliquable mais ne
   répondait jamais. Seuls les enfants qui doivent réellement bloquer ou réagir au
   clic (bandes, carte du tour) reprennent pointer-events:auto ci-dessous. */
.tour-band{pointer-events:auto;position:fixed;background:rgba(4,6,9,.62);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  transition:left .3s var(--ease-out),top .3s var(--ease-out),width .3s var(--ease-out),height .3s var(--ease-out);}
.tour-ring{position:fixed;display:none;border:2px solid var(--e);pointer-events:none;
  box-shadow:0 0 0 4px rgba(var(--e-rgb),.18),0 0 26px rgba(var(--e-rgb),.35);
  transition:left .3s var(--ease-out),top .3s var(--ease-out),width .3s var(--ease-out),height .3s var(--ease-out);
  animation:tourPulse 1.8s ease-in-out infinite;}
@keyframes tourPulse{0%,100%{box-shadow:0 0 0 4px rgba(var(--e-rgb),.18),0 0 26px rgba(var(--e-rgb),.35);}50%{box-shadow:0 0 0 7px rgba(var(--e-rgb),.1),0 0 34px rgba(var(--e-rgb),.5);}}
.tour-card{pointer-events:auto;position:fixed;left:50%;transform:translateX(-50%);width:calc(100% - 32px);max-width:398px;
  background:var(--glass-bg);background-image:var(--glass-shine),var(--grad-card);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:18px 18px 16px;
  animation:tourCardIn .3s var(--ease-out);transition:top .3s var(--ease-out);}
.tour-card.centered{top:50%!important;transform:translate(-50%,-50%);}
@keyframes tourCardIn{from{opacity:0;transform:translateX(-50%) translateY(8px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}
.tour-prog{display:flex;gap:5px;margin-bottom:14px;}
.tour-prog div{flex:1;height:3.5px;border-radius:2px;background:var(--hair);transition:.3s var(--ease);}
.tour-prog div.on{background:var(--e);box-shadow:0 0 8px rgba(var(--e-rgb),.5);}
.tour-tab{display:inline-block;font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--e2);background:var(--ed);border-radius:var(--r-pill);padding:4px 10px;margin-bottom:10px;}
.tour-tab:empty{display:none;}
.tour-t{font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:16.5px;letter-spacing:-.2px;margin-bottom:6px;color:var(--snow);}
.tour-d{font-size:13px;color:var(--muted);line-height:1.55;margin-bottom:18px;}
.tour-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;}
.tour-skip{font-size:12.5px;color:var(--dim);cursor:pointer;font-weight:600;flex-shrink:0;}
.tour-actions .btn{width:auto;padding:12px 22px;}

/* =====================================================================
   AUDIT VISUEL DU 25/09 — mesuré par un robot sur chaque écran et chaque
   fenêtre (320/375 px, sombre/clair, FR/AR), puis revu à l'œil.
   ===================================================================== */

/* Barre de titre des écrans : 0 px de marge latérale, donc « Sport »,
   « Stats »… collés au bord et l'avatar rogné à droite, alors que tout le
   contenu en dessous est à 14 px. */
.topbar{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right));}
/* Sur l'écran Profil, l'avatar menait… au Profil. */
body[data-scr="profil"] #tbAvatar{visibility:hidden;}

/* Zones tactiles : 44 px recommandés (Apple), 24 px minimum (WCAG 2.2).
   Liens de 14-15 px de haut, pastilles de couleur de 24 px, interrupteurs de
   26 px… On agrandit la zone de doigt par un calque invisible, sans rien
   changer au rendu. */
.see,.lnk,.pf-edit,.accent-dot,.x,.pill,.cv-unit,.seg-btn,.tb-gear,.hv7-people{position:relative;}
.see::before,.lnk::before{content:'';position:absolute;inset:-14px -8px;}
.pf-edit::before{content:'';position:absolute;inset:-10px;border-radius:50%;}
.pf-cam::before{content:'';position:absolute;inset:-7px;border-radius:50%;}
.accent-dot::before{content:'';position:absolute;inset:-10px -4px;}
.x::before{content:'';position:absolute;inset:-6px;}
.pill::before{content:'';position:absolute;inset:-6px -2px;}
.cv-unit::before{content:'';position:absolute;inset:-9px -3px;}
.seg-btn::before{content:'';position:absolute;inset:-5px 0;}
.toggle::before,.theme-switch::before{content:'';position:absolute;inset:-9px -6px;}
.tb-gear::before{content:'';position:absolute;inset:-5px;}
.hv7-icon-btn::before,.hv7-people::before{content:'';position:absolute;inset:-4px;}

/* Boutons côte à côte : partage égal de la largeur, mais un libellé plus
   long peut élargir son bouton (« Accepter », « Ajouter un compte »,
   « Bibliothèque » étaient rognés) ; points de suspension en dernier recours. */
.row>.btn{min-width:fit-content;}
.btn{text-overflow:ellipsis;}

/* Contrastes mesurés sous le minimum WCAG (4,5:1) */
.mus-last.never{color:var(--muted);}

/* Focus clavier (et contacteurs d'accessibilité) : aucun indicateur jusqu'ici.
   :focus-visible ne s'affiche pas au toucher, seulement au clavier. Les champs
   de saisie gardent leur propre style de focus. */
:focus-visible{outline:2px solid var(--e2);outline-offset:3px;}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:none;}
/* Stats : deux rangées d'onglets identiques empilées (rubrique puis période). La
   période devient un filtre secondaire, plus discret, pour que l'œil lise d'abord
   la rubrique. */
.seg-ctrl.sub{background:transparent;box-shadow:none;padding:3px;margin-top:-2px;}
.seg-ctrl.sub .seg-btn{padding:6px 0;font-size:11.5px;}
/* « MEILLEUR JOUR » passait sous l'étoile posée dans le coin de la tuile */
.ktile-star{right:auto;inset-inline-end:9px;}
.ktile-star+.ktile-lab{padding-inline-end:18px;}
/* Icônes flottantes : elles bougeaient toutes en même temps (effet « métronome »).
   Une sur deux part à contretemps : le mouvement reste net mais devient une vague. */
:nth-child(even)>.icb svg,:nth-child(even)>.lr-icon svg,.qa-pill:nth-child(even) svg,.favtile:nth-child(even) svg,.perfcard:nth-child(even) .pcl svg{animation-delay:-1.1s;}

/* ===================================================================
   IKORUN MOTION (25/09) — un seul langage de mouvement pour toute l'app,
   tiré du logo : deux lames en diagonale lancées à pleine vitesse. Les
   choses arrivent vite et se posent en douceur (--ease-stride), le motif
   signature est un trait de lumière incliné comme les lames (-19°).
   Pilotage : ikPlay()/ikEnterScreen() dans app.js posent les classes
   .ik-in (cascade), .ik-play (graphiques) et .ik-from-l/r (sens d'arrivée).
   =================================================================== */
:root{--ease-stride:cubic-bezier(.16,1,.3,1);--ik-step:48ms;}
@property --ik-sweep{syntax:'<percentage>';inherits:false;initial-value:100%;}

/* --- Écran déjà ouvert une fois : il revient sans aucun mouvement (ni l'ancien
   fondu pageIn, ni pagein / skl-content-in qui se rejouaient à chaque réaffichage) --- */
.scr[data-seen]:not(.ik-from-l):not(.ik-from-r){animation:none;}
/* --- Ouverture d'un onglet : l'écran arrive du côté de l'onglet touché --- */
.scr.ik-from-r{animation:ikScrR .5s var(--ease-stride) both;}
.scr.ik-from-l{animation:ikScrL .5s var(--ease-stride) both;}
@keyframes ikScrR{from{opacity:0;transform:translateX(38px);}to{opacity:1;transform:none;}}
@keyframes ikScrL{from{opacity:0;transform:translateX(-38px);}to{opacity:1;transform:none;}}
.ik-title-r{animation:ikTitleR .45s var(--ease-stride) both;}
.ik-title-l{animation:ikTitleL .45s var(--ease-stride) both;}
@keyframes ikTitleR{from{opacity:0;transform:translateX(16px);filter:blur(3px);}to{opacity:1;transform:none;filter:none;}}
@keyframes ikTitleL{from{opacity:0;transform:translateX(-16px);filter:blur(3px);}to{opacity:1;transform:none;filter:none;}}

/* --- Cascade : les blocs entrent l'un après l'autre --- */
.ik-in{animation:ikRise .64s var(--ease-stride) both;animation-delay:calc(var(--i,0) * var(--ik-step) + 50ms);}
@keyframes ikRise{from{opacity:0;transform:translateY(24px) scale(.97);}to{opacity:1;transform:none;}}
/* la cascade remplace l'ancienne entrée .stag (sinon les deux s'additionnent) */
.scr[data-seen] .stag.ik-in{opacity:1;}

/* --- Trait de vitesse qui balaie la carte principale à l'ouverture --- */
.ik-streak{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:3;}
.ik-streak i{position:absolute;top:-40%;bottom:-40%;left:0;width:34%;
  background:linear-gradient(90deg,transparent,rgba(var(--e2-rgb),.16) 55%,rgba(255,255,255,.34) 70%,transparent);
  transform:translateX(-130%) skewX(-19deg);animation:ikStreak 1s .28s var(--ease-stride) both;mix-blend-mode:screen;}
html[data-mode="light"] .ik-streak i{mix-blend-mode:normal;background:linear-gradient(90deg,transparent,rgba(var(--e-rgb),.08) 55%,rgba(var(--e-rgb),.16) 70%,transparent);}
@keyframes ikStreak{to{transform:translateX(380%) skewX(-19deg);}}

/* --- Graphiques qui se dessinent (.ik-play posé ~2,5 s sur le conteneur) --- */
.ik-play .kbar{transform-origin:50% 100%;animation:ikGrow .75s var(--ease-stride) both;animation-delay:calc(.12s + var(--bi,0) * 55ms);}
@keyframes ikGrow{from{transform:scaleY(0);opacity:.2;}to{transform:none;opacity:1;}}
.ik-play :is(.pbar,.kgoal-bar,.goal-bar)>div{transform-origin:0 50%;animation:ikFill 1s .22s var(--ease-stride) both;}
[dir="rtl"] .ik-play :is(.pbar,.kgoal-bar,.goal-bar)>div{transform-origin:100% 50%;}
@keyframes ikFill{from{transform:scaleX(0);}to{transform:none;}}
.ik-play .sp-rail i{transform-origin:0 50%;animation:ikFill .5s var(--ease-stride) both;animation-delay:calc(.18s + var(--bi,0) * 90ms);}
[dir="rtl"] .ik-play .sp-rail i{transform-origin:100% 50%;}
.ik-play .lc-line{stroke-dasharray:1;animation:ikDraw 1.15s .15s var(--ease-stride) both;}
@keyframes ikDraw{from{stroke-dashoffset:1;}to{stroke-dashoffset:0;}}
.ik-play .lc-area{animation:ikFade .9s .55s ease both;}
@keyframes ikFade{from{opacity:0;}to{opacity:1;}}
.ik-play .lc-dot{transform-box:fill-box;transform-origin:center;animation:ikPop .5s var(--ease-spring) both;animation-delay:calc(.2s + var(--bi,0) * 110ms);}
@keyframes ikPop{0%{opacity:0;transform:scale(.3);}70%{opacity:1;transform:scale(1.18);}100%{opacity:1;transform:none;}}
svg.ik-sweep{-webkit-mask:conic-gradient(from 90deg,#000 var(--ik-sweep),transparent 0);mask:conic-gradient(from 90deg,#000 var(--ik-sweep),transparent 0);animation:ikSweep 1.05s .15s var(--ease-stride) both;}
@keyframes ikSweep{from{--ik-sweep:0%;}to{--ik-sweep:100%;}}
.ik-play .bd-cell{animation:ikPop .55s var(--ease-spring) both;animation-delay:calc(.05s + var(--bi,0) * 40ms);}
.ik-play .bd-cell .bd-icon:not(.locked){animation:ikBadgeGlow 1.2s ease both;animation-delay:calc(.3s + var(--bi,0) * 40ms);}
@keyframes ikBadgeGlow{0%{filter:brightness(1);}35%{filter:brightness(1.45) drop-shadow(0 0 10px rgba(var(--e-rgb),.6));}100%{filter:none;}}

/* --- Onglets / filtres : l'élément choisi rebondit --- */
.card,.favtile,.sbox,.ktile,.hv7-ktile{transition:background .25s ease,border-color .25s ease,color .25s ease,transform .22s var(--ease-spring);}

/* --- Chronomètre : nouveau tour qui glisse dans la liste --- */
.ch-face.run #chDisp{text-shadow:0 0 22px rgba(var(--e-rgb),.45);}
.zrow.ik-new{animation:ikLapIn .55s var(--ease-stride) both;}
@keyframes ikLapIn{from{opacity:0;transform:translateX(-18px);box-shadow:inset 0 0 0 100px rgba(var(--e-rgb),.18);}to{opacity:1;transform:none;box-shadow:inset 0 0 0 100px rgba(var(--e-rgb),0);}}

/* --- CALME (retour de Hamou, 25/09 : « pourquoi tout bouge en continu ? ») ---
   Plus aucune animation d'ambiance en boucle : icônes flottantes, halos qui
   respirent, taches de fond qui dérivent, écran de connexion qui flotte. Le
   mouvement se limite à la première ouverture de chaque écran et aux réponses
   à un geste (série validée, tour de chrono, fin de minuteur). */
.icb svg,.lr-icon svg,.qa-pill svg,.favtile svg,.perfcard .pcl svg,
.hv7-bg span,.tip-tile::before,.tip-glow,.rk-glow,.xp-hero-glow,.wd.today .dot,
#login::before,.login-card,.login-logo,.login-hero{animation:none;}
/* reflet des badges obtenus : un seul passage, à la première ouverture */
.bd-icon:not(.locked)::before{animation:none;}
.ik-play .bd-icon:not(.locked)::before{animation:bdSweep 1s ease-in-out both;animation-delay:calc(.35s + var(--sw,0) * .12s);}

/* --- Bandeau « nouvelle version prête » (voir ikShowUpdate dans app.js) --- */
#ikMaj{position:fixed;left:50%;top:max(10px,env(safe-area-inset-top));transform:translateX(-50%);z-index:20000;
  display:flex;align-items:center;gap:8px;max-width:calc(100vw - 24px);padding:6px 6px 6px 14px;border-radius:999px;
  background:var(--s1);border:1px solid var(--hair2);box-shadow:0 12px 30px -10px rgba(0,0,0,.6);
  font-size:12.5px;font-weight:600;color:var(--snow);animation:ikMajIn .45s var(--ease-stride) both;}
#ikMaj span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
#ikMaj button{flex:none;border:0;border-radius:999px;font:inherit;cursor:pointer;}
#ikMaj .ik-maj-go{padding:8px 13px;font-weight:700;color:#fff;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.3)) var(--e);}
#ikMaj .ik-maj-x{width:32px;height:32px;background:transparent;color:var(--muted);font-size:18px;line-height:1;}
@keyframes ikMajIn{from{opacity:0;transform:translate(-50%,-14px);}to{opacity:1;transform:translateX(-50%);}}

/* --- Minuteur / repos : les dernières secondes battent comme un cœur --- */
.ik-bump{animation:ikBump .42s var(--ease-spring);}
@keyframes ikBump{0%{transform:scale(1);}35%{transform:scale(1.22);}100%{transform:none;}}
.ring-wrap.ik-urgent{animation:ikUrgent 1s ease-in-out infinite;}
@keyframes ikUrgent{0%,100%{filter:drop-shadow(0 0 0 rgba(255,92,108,0));}50%{filter:drop-shadow(0 0 14px rgba(255,92,108,.55));}}

/* --- Séance muscu : série validée, exercice terminé --- */
.setcheck{position:relative;}
.set-swipe-row.ik-done{animation:ikRowFlash 1s ease both;}
@keyframes ikRowFlash{from{box-shadow:inset 0 0 0 100px rgba(51,211,153,.24);}to{box-shadow:inset 0 0 0 100px rgba(51,211,153,0);}}
.ik-done .setcheck.on{animation:ikCheckPop .55s var(--ease-spring);}
@keyframes ikCheckPop{0%{transform:scale(.5) rotate(-25deg);}60%{transform:scale(1.25) rotate(6deg);}100%{transform:none;}}
.ik-done .setcheck.on::after{content:'';position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--ok);animation:ikRing .65s ease-out both;pointer-events:none;}
@keyframes ikRing{from{transform:scale(.6);opacity:1;}to{transform:scale(2.2);opacity:0;}}
.ik-done .setcheck.on::before{content:'';position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;border-radius:50%;pointer-events:none;
  box-shadow:0 -19px 0 var(--ok),13px -13px 0 var(--e2),19px 0 0 var(--ok),13px 13px 0 var(--e2),0 19px 0 var(--ok),-13px 13px 0 var(--e2),-19px 0 0 var(--ok),-13px -13px 0 var(--e2);
  animation:ikSpark .6s ease-out both;}
@keyframes ikSpark{from{transform:scale(.3);opacity:1;}to{transform:scale(1.5);opacity:0;}}
.ex-swipe-card.ik-ex-done{animation:ikExDone 1.2s ease both;}
@keyframes ikExDone{0%{box-shadow:0 0 0 0 rgba(51,211,153,.6);}40%{box-shadow:0 0 0 6px rgba(51,211,153,.25);}100%{box-shadow:0 0 0 14px rgba(51,211,153,0);}}

/* --- Intro : le logo IKORUN se compose (1re ouverture ; version courte ensuite) --- */
#ikIntro{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:radial-gradient(70% 50% at 50% 46%,rgba(var(--e-rgb),.18),transparent 70%),var(--bg);
  --k:1;--iki-w1:#FFFFFF;--iki-w2:#B9C4D6;transition:opacity .5s ease;-webkit-tap-highlight-color:transparent;}
html[data-mode="light"] #ikIntro{--iki-w1:#3A4458;--iki-w2:#10141B;}
#ikIntro.mini{--k:.4;}
#ikIntro.out{opacity:0;pointer-events:none;}
.iki-stage{position:relative;display:flex;flex-direction:column;align-items:center;transition:transform .5s var(--ease-stride);}
#ikIntro.out .iki-stage{transform:scale(.93) translateY(-12px);}
.iki-trail{position:absolute;left:50%;top:50%;width:110vmax;height:110vmax;margin:-55vmax 0 0 -55vmax;transform:rotate(-19deg);pointer-events:none;}
.iki-trail i{position:absolute;left:0;top:50%;height:2px;width:55%;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(var(--e-rgb),.9) 70%,#fff);box-shadow:0 0 18px rgba(var(--e-rgb),.8);
  transform:translateX(-100%);animation:ikiTrail calc(var(--k)*820ms) 0ms cubic-bezier(.35,.1,.3,1) both;}
.iki-trail i+i{top:calc(50% + 26px);height:1px;width:34%;opacity:.6;animation-delay:calc(var(--k)*110ms);}
#ikIntro.mini .iki-trail{display:none;}
@keyframes ikiTrail{from{transform:translateX(-100%);}to{transform:translateX(200%);}}
/* Chaque lame est son propre <svg> animé en transform/opacity : Chrome l'anime hors du fil
   principal, donc sans saccade pendant qu'app.js s'exécute en parallèle (26/09). */
.iki-mark{position:relative;width:148px;height:115px;animation:ikiImpact calc(var(--k)*560ms) calc(var(--k)*820ms) ease-out both;}
.iki-mark::before{content:'';position:absolute;inset:-34px;border-radius:50%;background:radial-gradient(circle,rgba(var(--e-rgb),.38),transparent 66%);
  opacity:0;animation:ikiGlow calc(var(--k)*800ms) calc(var(--k)*780ms) ease-out both;}
@keyframes ikiGlow{0%{opacity:0;}30%{opacity:1;}100%{opacity:.55;}}
.iki-mark svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;will-change:transform,opacity;}
@keyframes ikiImpact{0%{transform:scale(1);}30%{transform:scale(1.07);}100%{transform:none;}}
.iki-mark polygon{stroke-linejoin:round;stroke-width:12;}
.iki-b2{animation:ikiBladeB calc(var(--k)*720ms) 0ms var(--ease-stride) both;}
.iki-b1{animation:ikiBladeW calc(var(--k)*720ms) calc(var(--k)*170ms) var(--ease-stride) both;}
.iki-g2{animation:ikiGhostB calc(var(--k)*720ms) calc(var(--k)*40ms) var(--ease-stride) both;}
.iki-g1{animation:ikiGhostW calc(var(--k)*720ms) calc(var(--k)*210ms) var(--ease-stride) both;}
@keyframes ikiBladeB{0%{opacity:.55;transform:translate(-106px,37px) skewX(22deg) scaleX(1.3);}35%{opacity:1;}80%{transform:translate(3px,-1px) skewX(-3deg);}100%{opacity:1;transform:none;}}
@keyframes ikiBladeW{0%{opacity:.55;transform:translate(106px,-37px) skewX(22deg) scaleX(1.3);}35%{opacity:1;}80%{transform:translate(-3px,1px) skewX(-3deg);}100%{opacity:1;transform:none;}}
@keyframes ikiGhostB{0%{opacity:0;transform:translate(-122px,42px) scaleX(1.5);}40%{opacity:.45;}100%{opacity:0;transform:translate(-11px,4px);}}
@keyframes ikiGhostW{0%{opacity:0;transform:translate(122px,-42px) scaleX(1.5);}40%{opacity:.45;}100%{opacity:0;transform:translate(11px,-4px);}}
.iki-ring{position:absolute;left:50%;top:58px;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:2px solid rgba(var(--e-rgb),.85);
  opacity:0;animation:ikiRing calc(var(--k)*800ms) calc(var(--k)*840ms) ease-out both;pointer-events:none;}
@keyframes ikiRing{0%{opacity:0;transform:scale(.3);}8%{opacity:.9;}100%{opacity:0;transform:scale(2.6);}}
.iki-word{display:flex;margin-top:22px;font-family:'Unbounded',system-ui,sans-serif;font-weight:800;font-size:30px;line-height:1;color:#fff;
  letter-spacing:.14em;}
html[data-mode="light"] .iki-word{color:#10141B;}
.iki-word span{display:block;will-change:transform,opacity;animation:ikiLetter calc(var(--k)*560ms) var(--ease-stride) both;}
.iki-word span.r{color:var(--e);}
.iki-word span:nth-child(1){animation-delay:calc(var(--k)*920ms);}
.iki-word span:nth-child(2){animation-delay:calc(var(--k)*990ms);}
.iki-word span:nth-child(3){animation-delay:calc(var(--k)*1060ms);}
.iki-word span:nth-child(4){animation-delay:calc(var(--k)*1160ms);animation-name:ikiLetterRun;}
.iki-word span:nth-child(5){animation-delay:calc(var(--k)*1230ms);animation-name:ikiLetterRun;}
.iki-word span:nth-child(6){animation-delay:calc(var(--k)*1300ms);animation-name:ikiLetterRun;}
@keyframes ikiLetter{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
@keyframes ikiLetterRun{from{opacity:0;transform:translateX(34px) skewX(-18deg);}to{opacity:1;transform:none;}}
.iki-line{width:150px;height:2px;margin-top:16px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--e),transparent);
  animation:ikFill calc(var(--k)*560ms) calc(var(--k)*1640ms) var(--ease-stride) both;transform-origin:50% 50%;}
.iki-tag{margin-top:12px;font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--muted);animation:ikiLetter .6s 1.79s var(--ease-stride) both;}
#ikIntro.mini .iki-tag{display:none;}
@media (prefers-reduced-motion: reduce){
  #ikIntro *,#ikIntro{animation:none!important;}
}

/* ===================================================================
   RETOURS DU 26/09 (relecture transmise par Hamou)
   =================================================================== */
/* 1. Ce qui faisait « cassé » */
/* avatar du haut : cercle en dégradé + initiale ; une photo éventuelle se pose
   par-dessus et disparaît si elle ne charge pas (plus de carré vide) */
#tbAvatar{width:40px;height:40px;border-radius:50%;border:0;position:relative;
  background:linear-gradient(145deg,var(--e2),var(--e)) !important;color:#fff !important;
  font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:14px;box-shadow:0 4px 14px -6px rgba(var(--e-rgb),.7);}
#tbAvatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;}
/* texte d’invite des sélecteurs (« Choisir ta taille ») : 4,4:1 → au-dessus de 4,5:1 */
.pkfield{color:var(--muted);}
.pkfield.set{color:var(--snow);}
/* cadenas des badges/trophées verrouillés : petite pastille claire et nette */
.bd-lock-chip{width:20px;height:20px;bottom:-2px;right:-2px;background:#FFFFFF;color:#1B2230;
  border:1px solid rgba(12,15,20,.12);box-shadow:0 2px 6px rgba(0,0,0,.25);}
.bd-icon:not(.big)>.bd-lock-chip svg{width:11px;height:11px;}
/* le bas des écrans ne passe plus sous la barre d'onglets (safe-area comprise) */
#scroll{padding-bottom:calc(150px + env(safe-area-inset-bottom));}
#navFade{height:calc(96px + env(safe-area-inset-bottom));}

/* 2. Sélecteur de la page Sport : piste + bouton calendrier rond (voir le système unifié) */
.seg-row{display:flex;gap:8px;align-items:center;margin:6px 0 16px;}
.seg-row .seg-ctrl{flex:1;margin:0;}
.seg-row .tb-gear{width:44px;height:44px;border-radius:50%;flex-shrink:0;color:var(--snow);padding:0;font:inherit;}

/* 3. Typographie : Unbounded = titres et gros chiffres ; Inter = texte ;
   JetBrains Mono = uniquement chronos, minuteries, allures et temps de course. */
.sbox .v,.pstat .v,.chrome-sbox .v{font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:700;letter-spacing:-.4px;font-variant-numeric:tabular-nums;}
.sbox .v{font-size:18px;}
.zval,.mus-last,.sp-rail-lab span,.fr-rank-num,.goals-count,
.stepper .val,.setcell,.week-spark-days span,.num{font-family:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;font-variant-numeric:tabular-nums;}
.zval.mono,.sbox .v.mono{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:-.3px;}
.mus-last{font-size:11px;letter-spacing:0;}


/* ===================================================================
   SYSTÈME VISUEL UNIFIÉ (27/09) — demande de Hamou : « rien ne va avec l'autre :
   pas la même matière, pas le même contraste, pas le même fondu ».
   Avant : 5 matières (verre, métal chromé, plat foncé, plat clair, teinte bleue),
   4 dégradés d'accent, boutons en pilule ou en rectangle au hasard, boutons-icônes
   carrés ou ronds, 7 arrondis de cartes. Désormais TROIS matières seulement :
   • VERRE      : toute surface d'information (cartes, groupes, tuiles, graphiques,
                  lignes de séance) = la matière des .card, fine arête claire.
                  Variante « héros » (carte principale d'un écran) : même verre +
                  halo d'accent en haut à droite + liseré d'accent.
   • ACCENT     : toute action principale ET tout élément choisi (boutons, onglet
                  actif, puce choisie, interrupteur, jour courant) = le même dégradé
                  --grad-btn + le même reflet ; texte blanc ≥ 4,5:1.
   • SECONDAIRE : boutons secondaires, boutons-icônes, puces non choisies = fond
                  --s2 + filet --hair2. Les sélecteurs reposent sur une « piste »
                  creusée de la même teinte.
   Formes : action = rectangle arrondi (--r-sm) ; sélecteur/puce = pilule ;
   bouton-icône = cercle. Arrondis : 22 héros, 18 cartes, 14 tuiles et lignes.
   Gouttière unique de 14 px sur tous les écrans. Aucune taille ni position ne
   change : seules les matières, couleurs, ombres et arrondis sont unifiés.
   =================================================================== */
:root{
  --fill-accent:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 55%),var(--grad-btn);
  --sh-accent-sm:0 4px 12px -4px rgba(var(--e-rgb),.55);
  --accent-ink:#FFFFFF; --accent-ink-shadow:0 1px 2px rgba(0,0,0,.45);
  --ring-soft:inset 0 0 0 1px var(--glass-border-soft);
}
html[data-mode="dark"][data-accent="yellow"]{--accent-ink:#2A2205;--accent-ink-shadow:0 1px 1px rgba(255,255,255,.35);}
html[data-accent="carbon"]{--accent-ink-shadow:0 1px 3px rgba(0,0,0,.85),0 0 10px rgba(0,0,0,.55);}

/* ACCENT — même dégradé et même reflet que .btn, partout où « c'est choisi / c'est l'action » */
.hv7-act.main,.seg-btn.on,.fr-tab.on,.pill.on,.cal-cell.today,.promo-cta,.fr-profile-lvl,.pf-cam{
  background:var(--fill-accent) !important;color:var(--accent-ink) !important;
  text-shadow:var(--accent-ink-shadow);border-color:transparent !important;}
.seg-btn.on,.fr-tab.on,.pill.on{box-shadow:var(--sh-accent-sm);}
.toggle.on{background:var(--fill-accent);border-color:transparent;box-shadow:var(--sh-accent-sm);}

/* SECONDAIRE — boutons à texte */
.btn.ghost,.hv7-act.ghost,.sp-acts button:not(.lnk),.chbtn{background:var(--s2);border-color:var(--hair2);box-shadow:var(--sh-sm);}
.hv7-act.ghost,.sp-acts button:not(.lnk){color:var(--snow);}
/* SECONDAIRE — boutons-icônes : tous ronds, même fond, même filet */
.x,.tb-gear,.ik-bell,.ik-people,.hv7-icon-btn,.hv7-people,.live-ic,.mini-ic{
  background:var(--s2) !important;border-color:var(--hair2) !important;color:var(--muted);
  box-shadow:var(--sh-sm);border-radius:50% !important;}
/* formes : une action est un rectangle arrondi, pas une pilule */
.hv7-act,.sp-acts button:not(.lnk){border-radius:var(--r-sm);}

/* PISTE des sélecteurs (onglets, périodes, Amis) : la même pour tous */
.seg-ctrl,.fr-tabs{background:var(--s2);border-color:var(--hair);box-shadow:inset 0 1px 3px rgba(0,0,0,.28);}
html[data-mode="light"] :is(.seg-ctrl,.fr-tabs){box-shadow:inset 0 1px 2px rgba(20,30,50,.08);}
.seg-btn:not(.on),.fr-tab:not(.on){color:var(--muted);}
.seg-ctrl.sub{background:transparent;box-shadow:none;}
/* filtre secondaire choisi (Plan IKORUN / perso, période de Stats, sous-catégories) : même
   famille que l'accent, en plus calme — la hiérarchie passe par l'intensité (plein → teinte),
   jamais par un changement de matière (un gris neutre sous un accent plein = deux langages). */
html[data-mode] .seg-ctrl.sub .seg-btn.on,html[data-mode] .pills.sub .pill.on{
  background:var(--ed) !important;color:var(--e2) !important;box-shadow:inset 0 0 0 1px rgba(var(--e-rgb),.45);text-shadow:none;border-color:transparent !important;}

/* PUCES de choix (formulaires, filtres) : fini le métal chromé */
.pill{background:var(--s2);border-color:var(--hair2);color:var(--muted);box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;}
.pills.sub .pill:not(.on){background:transparent;}
.chrome-chip{background:var(--s2);border-color:var(--hair2);-webkit-backdrop-filter:none;backdrop-filter:none;}

/* VERRE — grandes surfaces (flou d'arrière-plan comme .card) */
html[data-mode] :is(.card,.grp-card,.kchart-card,.chrome-box){border-radius:var(--r-md);}
html[data-mode] :is(.grp-card,.kchart-card,.chrome-box){
  background:var(--glass-bg);background-image:var(--glass-shine),var(--grad-card);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-color:transparent;box-shadow:var(--glass-shadow),var(--ring-soft);}
.card{box-shadow:var(--glass-shadow),var(--ring-soft);}
.chrome-box::before{display:none;}
/* VERRE — petites tuiles et lignes (même matière, sans flou : plus léger à faire défiler) */
html[data-mode] :is(.ktile,.sbox,.chrome-sbox,.favtile,.hv7-ktile,.sess:not(.today)){
  background:var(--glass-bg);background-image:var(--glass-shine),var(--grad-card);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-color:transparent;box-shadow:var(--float-sm),var(--ring-soft);border-radius:var(--r-sm);}
.favtile::before{display:none;}
/* VERRE HÉROS — la carte principale d'un écran : même verre + halo et liseré d'accent */
html[data-mode] :is(.hv7-day,.sp-plan,.hv7-score){border-radius:var(--r-lg);
  background:radial-gradient(120% 90% at 100% 0%,rgba(var(--e-rgb),.18),transparent 62%),var(--glass-shine),var(--glass-bg);
  border-color:rgba(var(--e-rgb),.24);box-shadow:var(--glass-shadow);}

/* BARRE DU BAS : même verre (le métal chromé est réservé à l'accent « carbone ») */
#nav{background:var(--glass-shine),rgba(var(--s1-rgb),.86);border-color:var(--glass-border);}
#nav::before{display:none;}
html[data-mode="light"] #nav{background:var(--glass-shine),rgba(255,255,255,.92);}

/* ---- 2e passe (27/09) : relevé automatique de TOUS les boutons et surfaces, écran
   par écran et fenêtre par fenêtre. Ce qui sortait encore du lot : */
/* ACCENT — une seule ombre pour les grandes actions, une seule pour les petites.
   Avant : trois ombres différentes (bouton, « Je l'ai faite », onglet) et un reflet
   rond en haut à gauche sur .btn seulement. */
.btn:not(.ghost):not(.danger),.hv7-act.main,.promo-cta,.rs-cta,.rl-ctrl.main{box-shadow:var(--sh-e);}
.btn:not(.ghost):not(.danger):active{box-shadow:0 3px 10px -4px rgba(var(--e-rgb),.4);}
.btn:not(.ghost){border-color:transparent;}
.btn::after{display:none;}
.rs-cta,.rl-ctrl.main,#tbAvatar{background:var(--fill-accent) !important;color:var(--accent-ink) !important;text-shadow:var(--accent-ink-shadow);}
#tbAvatar,.pf-cam{box-shadow:var(--sh-accent-sm);}
.rs-cta{border-radius:var(--r-sm);}
/* DANGER — même recette que l'accent (reflet + dégradé + ombre de sa couleur), en rouge
   profond : texte blanc ≥ 4,5:1 (le rouge vif --bad plafonnait à 3:1). */
:root{--fill-danger:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 55%),linear-gradient(180deg,#E5484D,#C62F3C 55%,#A8232F);
  --sh-danger:0 8px 22px -6px rgba(198,47,60,.45),0 2px 6px -2px rgba(198,47,60,.3);}
html[data-mode] .btn.danger{background:var(--fill-danger);box-shadow:var(--sh-danger);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45);}
.btn.danger::before{display:none;}
/* SECONDAIRE — derniers boutons qui avaient leur propre gris ou leur propre filet */
.pf-edit,.cv-swap,.rl-ctrl:not(.main){background:var(--s2) !important;border:1px solid var(--hair2) !important;box-shadow:var(--sh-sm);}
.chbtn{border-width:1px;}
.toggle:not(.on){border-color:var(--hair2);}
.cv-unit{background:var(--s2);border-color:var(--hair2);}
.cv-unit.on{background:var(--ed);color:var(--e2);border-color:transparent;box-shadow:inset 0 0 0 1px rgba(var(--e-rgb),.45);}
/* VERRE — cartes et lignes restées pleines avec un contour, à côté de voisines en verre
   (Stats « Temps total / Séances », liste d'Outils, bibliothèque, convertisseur) */
html[data-mode] :is(.kduo-card,.cv-card){border-radius:var(--r-md);
  background:var(--glass-bg);background-image:var(--glass-shine),var(--grad-card);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-color:transparent;box-shadow:var(--glass-shadow),var(--ring-soft);}
html[data-mode] :is(.list-row,.exg-card){
  background:var(--glass-bg);background-image:var(--glass-shine),var(--grad-card);
  border-color:transparent;box-shadow:var(--float-sm),var(--ring-soft);}
/* SÉANCE DU JOUR dans les listes : même repère que tout élément « courant » (teinte
   d'accent + liseré intérieur). Son fond finissait sur un bleu marine codé en dur,
   visible quel que soit l'accent choisi (vert, rouge…). */
html[data-mode] .sess.today{border-radius:var(--r-sm);background:linear-gradient(var(--ed),var(--ed)),var(--glass-bg);
  border-color:transparent;box-shadow:var(--float-sm),inset 0 0 0 1px rgba(var(--e-rgb),.45);}
/* Hiérarchie de l'accueil : la bannière porte la marque, la carte du jour reste la seule
   carte « héros » ; la prière et le score redeviennent des cartes en verre (quatre halos
   d'accent empilés en haut de l'écran, c'était trop) */
html[data-mode] :is(.hv7-score,.hv7-day[onclick^="openPrayerFromHome"]){border-radius:var(--r-md);
  background:var(--glass-bg);background-image:var(--glass-shine),var(--grad-card);
  border-color:transparent;box-shadow:var(--glass-shadow),var(--ring-soft);}
.hv7-day[onclick^="openPrayerFromHome"]::before{display:none;}
/* 3e passe (27/09) : textes posés sur la ligne « moi » d'un classement (teinte d'accent) */
.fr-row.me :is(.fr-rank-num,.fr-km-txt){color:var(--e2);}
.fr-row.me .fr-lvl-chip{color:var(--snow);}
/* TOUCHER — le même enfoncement par rôle : action .96, icône .9, carte/ligne .985 */
.btn:active,.hv7-act:active,.rs-cta:active{transform:scale(.96);}
.x:active,.tb-gear:active,.ik-bell:active,.ik-people:active,.hv7-icon-btn:active,.hv7-people:active,.mini-ic:active,.pf-edit:active,.chbtn:active,.rl-ctrl:active{transform:scale(.9);}

/* ===================================================================
   BANNIÈRES D'EN-TÊTE (27/09, demande de Hamou) — chaque page s'ouvre sur une
   bannière : le petit logo IKORUN (symbole + nom) en haut à gauche, comme sur
   l'accueil, et les deux lames du logo, nettes, à droite (choix de Hamou, v106 :
   les lames géantes et leurs échos en traînée « faisaient trop »). Lame blanche +
   lame d'accent en mode sombre, lame encre + lame d'accent en mode clair. Sur
   Sport/Stats/Outils/Profil, la barre de titre compacte n'apparaît qu'une fois la
   bannière passée sous le haut de l'écran.
   Lames = masques SVG colorés par background : elles suivent l'accent choisi.
   =================================================================== */
.ikh{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-lg);
  padding:18px;min-height:108px;display:flex;flex-direction:column;justify-content:flex-end;
  color:#F4F6F9;
  background:
    radial-gradient(80% 110% at 90% 6%,rgba(var(--e-rgb),.42),transparent 62%),
    radial-gradient(70% 90% at 0% 110%,rgba(var(--e-rgb),.14),transparent 70%),
    linear-gradient(160deg,#111A2B 0%,#0B111D 55%,#080B12 100%);
  box-shadow:var(--glass-shadow),inset 0 0 0 1px rgba(255,255,255,.07);}
.ikh>*{position:relative;z-index:1;}
.ikh>.ikh-fx{position:absolute;z-index:0;right:14px;top:50%;width:104px;aspect-ratio:500/380;pointer-events:none;transform:translateY(-50%);
  filter:drop-shadow(0 6px 14px rgba(var(--e-rgb),.4));}
.ikh-fx::before,.ikh-fx::after{content:'';position:absolute;inset:0;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;}
.ikh-fx::before{background:linear-gradient(32deg,var(--e) 20%,var(--e2) 85%);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-40 60 500 380'%3E%3Cpolygon points='92,350 205,258 415,183 296,292' fill='%23000' stroke='%23000' stroke-width='12' stroke-linejoin='round'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-40 60 500 380'%3E%3Cpolygon points='92,350 205,258 415,183 296,292' fill='%23000' stroke='%23000' stroke-width='12' stroke-linejoin='round'/%3E%3C/svg%3E");}
.ikh-fx::after{background:linear-gradient(32deg,#8E9AAE 10%,#FFFFFF 80%);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-40 60 500 380'%3E%3Cpolygon points='160,240 218,160 432,86 376,168' fill='%23000' stroke='%23000' stroke-width='12' stroke-linejoin='round'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-40 60 500 380'%3E%3Cpolygon points='160,240 218,160 432,86 376,168' fill='%23000' stroke='%23000' stroke-width='12' stroke-linejoin='round'/%3E%3C/svg%3E");}
html[data-accent="carbon"] .ikh-fx::before{background:var(--grad-btn);}
.ikh-title{font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:25px;letter-spacing:-.6px;line-height:1.1;color:#fff;max-width:62%;}
.ikh-sub{margin-top:6px;font-size:12.5px;font-weight:600;line-height:1.35;color:rgba(232,238,247,.8);max-width:62%;}
.ikh-sub:empty{display:none;}
/* mode clair : la version « jour » (comme l'intro claire) */
html[data-mode="light"] .ikh:not(.ikh-dark){color:var(--snow);
  background:
    radial-gradient(80% 110% at 90% 6%,rgba(var(--e-rgb),.22),transparent 62%),
    radial-gradient(70% 90% at 0% 110%,rgba(var(--e-rgb),.07),transparent 70%),
    linear-gradient(160deg,#FFFFFF 0%,#F0F3F9 100%);
  box-shadow:var(--glass-shadow),inset 0 0 0 1px rgba(20,25,35,.06);}
html[data-mode="light"] .ikh:not(.ikh-dark) .ikh-fx::after{background:linear-gradient(32deg,#10141B 10%,#46516A 80%);}
html[data-mode="light"] .ikh:not(.ikh-dark) .ikh-title{color:var(--snow);}
html[data-mode="light"] .ikh:not(.ikh-dark) .ikh-sub{color:var(--muted);}
/* entrée : les lames arrivent en diagonale, la première fois qu'on ouvre la page */
.ikh.ikh-in .ikh-fx::before{animation:ikhBlade .75s var(--ease-out) both;}
.ikh.ikh-in .ikh-fx::after{animation:ikhBlade .75s .08s var(--ease-out) both;}
.ikh.ikh-in>.ikh-fx{animation:ikhEcho .9s var(--ease-out) both;}
@keyframes ikhBlade{from{transform:translate(-46px,24px);opacity:0;}}
@keyframes ikhEcho{from{opacity:0;}}

/* PAGES Sport/Stats/Outils/Profil : bannière commune #ikHead sous la barre de titre */
#ikHead{margin:max(8px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 14px max(14px,env(safe-area-inset-left));}
#ikHead .ikh-av{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:var(--fill-accent);color:var(--accent-ink);text-shadow:var(--accent-ink-shadow);
  font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:14px;box-shadow:var(--sh-accent-sm),0 0 0 2px rgba(255,255,255,.14);}
#ikHead .ikh-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
body[data-scr="home"] #ikHead,#ikHead .ikh-av{display:none;}
html.easy-mode #ikHead{display:none;}
/* la barre compacte flotte au-dessus de la bannière et ne se montre qu'une fois celle-ci passée */
body:not(.tb-compact):not([data-scr="home"]) .topbar{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none;}
body:not(.tb-compact):not([data-scr="home"]) .topbar>*{opacity:0;}
.topbar>*{transition:opacity .22s ease;}
/* barre compacte : un vrai fond (avant, un dégradé 58 % → 0 % laissait passer les cartes
   sous le titre et le sous-titre, deux textes superposés en haut de l'écran) */
.topbar{transition:background-color .22s ease,box-shadow .22s ease;}
body.tb-compact:not([data-scr="home"]) .topbar{background:rgba(var(--bg-rgb),.9);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 1px 0 var(--hair),0 12px 24px -16px rgba(0,0,0,.7);}
html[data-mode="light"] body.tb-compact:not([data-scr="home"]) .topbar{background:rgba(var(--bg-rgb),.92);box-shadow:0 1px 0 var(--hair),0 12px 24px -18px rgba(30,40,60,.3);}

/* ACCUEIL : l'en-tête (logo + boutons) et la salutation forment la bannière */
.ikh-home{margin:max(8px,env(safe-area-inset-top)) 0 14px;min-height:0;padding:14px 16px 20px;justify-content:flex-start;}
.ikh-home .hv7-header{padding:0;margin:0 0 26px;}
.ikh-home .hv7-greet{margin:0;padding:0;}
.ikh-home .hv7-greet h1{font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:25px;letter-spacing:-.6px;line-height:1.1;color:#fff;max-width:64%;}
.ikh-home .hv7-greet p{margin-top:7px;font-size:11.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:rgba(232,238,247,.8);max-width:60%;}
.ikh-home .hv7-logo span{color:#fff;}
html[data-mode="light"] .ikh-home .hv7-greet h1,html[data-mode="light"] .ikh-home .hv7-logo span{color:var(--snow);}
html[data-mode="light"] .ikh-home .hv7-greet p{color:var(--muted);}

/* CONNEXION et PREMIÈRE CONFIGURATION */
.ikh-login{margin:0 0 22px;min-height:132px;text-align:left;}
.ikh-login .login-brand{font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:30px;letter-spacing:.2px;line-height:1;color:#fff;}
.ikh-login .login-tag{margin-top:8px;text-align:left;}
.ikh-ob{margin:0 0 18px;min-height:74px;padding:14px 16px;}
.ikh-ob .ikh-title{font-size:19px;}
.ikh-ob-big{min-height:150px;margin:0 0 22px;}
#ob:has(.ob-step[data-step="1"].on) .ikh-ob{display:none;}
/* connexion : la carte était centrée par justify-content — sur un petit écran, plus
   haute que l'écran, son haut (logo) sortait par le haut et ne pouvait plus être
   atteint en faisant défiler. Marges automatiques : centrée si elle tient, sinon
   elle commence en haut et défile normalement. */
#login{justify-content:flex-start;}
#login .login-card{margin-block:auto;}
/* même correction pour les étapes de la première configuration */
.ob-step{justify-content:flex-start;}
.ob-step>:first-child{margin-top:auto;}
.ob-step>:last-child{margin-bottom:auto;}
.ikh-ob-big .login-brand{font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:30px;line-height:1;color:#fff;}
html[data-mode="light"] .ikh-ob-big .login-brand{color:var(--snow);}
.ikh{text-align:start;}
/* arabe (droite à gauche) : les lames passent à gauche, en miroir, loin du texte */
[dir="rtl"] #ikHead .ikh-av{right:auto;left:14px;}

/* ===================================================================
   LIQUID GLASS — MATIÈRE UNIQUE (27/09, demande de Hamou : « une et unique
   matière, le liquid glass, comme sur l'accueil »).
   Tout est du verre ; seul le rôle change la TEINTE, jamais la matière :
     · surface (cartes, tuiles, lignes)  → verre clair (flou sur les grandes)
     · contrôle (boutons 2nds, puces, icônes) → verre clair, plus fin
     · creux (pistes de sélecteurs, champs) → verre enfoncé
     · action / élément choisi            → verre teinté d'accent
     · fenêtres, barre du bas, bannières  → verre dépoli
   Chaque verre a la même anatomie : remplissage translucide, reflet spéculaire
   en haut à gauche, liseré lumineux sur l'arête haute, ombre portée douce.
   Ce qui rendait l'accueil « vivant » : des halos de couleur DERRIÈRE le verre
   (.hv7-bg). Ils deviennent le fond de toute l'app (body::before, fixe) : les
   cartes changent de reflet en défilant au-dessus — sans aucune animation.
   =================================================================== */
:root{
  --lg-fill:rgba(var(--s1-rgb),.62);
  --lg-body:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.02) 60%);
  --lg-spec:radial-gradient(130% 80% at 10% -18%,rgba(255,255,255,.17),transparent 55%);
  --lg-rim:inset 0 0 0 1px rgba(255,255,255,.085),inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(0,0,0,.25);
  --lg-drop:0 14px 34px -16px rgba(0,0,0,.62),0 2px 8px -3px rgba(0,0,0,.35);
  --lg-drop-sm:0 6px 16px -8px rgba(0,0,0,.55);
  --lg-blur:blur(22px) saturate(170%);
  --lg-ctl:rgba(255,255,255,.05);
  --lg-spec-sm:radial-gradient(130% 80% at 10% -18%,rgba(255,255,255,.1),transparent 55%);
  --lg-well:rgba(0,0,0,.24);
  --lg-well-rim:inset 0 1px 3px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.07);
  --lg-tint-rim:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(0,0,0,.18);
  --lg-sheet:rgba(var(--bg-rgb),.88);
  /* les anciens jetons « verre » pointent sur la matière unique : tout ce qui les utilisait suit */
  --glass-bg:var(--lg-fill); --glass-shine:var(--lg-spec); --grad-card:var(--lg-body);
  --glass-shadow:var(--lg-drop); --ring-soft:var(--lg-rim); --glass-blur:22px; --glass-sat:1.7;
}
html[data-mode="light"]{
  --lg-fill:rgba(255,255,255,.62);
  --lg-body:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.15) 60%);
  --lg-spec:radial-gradient(130% 80% at 10% -18%,rgba(255,255,255,.95),transparent 55%);
  --lg-rim:inset 0 0 0 1px rgba(255,255,255,.7),inset 0 1px 0 #fff,0 0 0 1px rgba(20,30,50,.07);
  --lg-drop:0 14px 32px -16px rgba(30,40,60,.24),0 2px 8px -3px rgba(30,40,60,.08);
  --lg-drop-sm:0 6px 14px -8px rgba(30,40,60,.22);
  --lg-ctl:rgba(255,255,255,.62);
  --lg-spec-sm:var(--lg-spec);
  --lg-well:rgba(20,30,50,.06);
  --lg-well-rim:inset 0 1px 2px rgba(20,30,50,.09),inset 0 0 0 1px rgba(20,30,50,.05);
  --lg-tint-rim:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(0,0,0,.12);
  --lg-sheet:rgba(var(--bg-rgb),.9);
  --glass-bg:var(--lg-fill); --glass-shine:var(--lg-spec); --grad-card:var(--lg-body);
  --glass-shadow:var(--lg-drop); --ring-soft:var(--lg-rim);
}

/* FOND : les halos de l'accueil, étendus à toute l'app (fixes, sans mouvement) */
:root{--ambient:
  radial-gradient(58% 38% at 12% 1%,rgba(var(--e-rgb),.32),transparent 70%),
  radial-gradient(46% 30% at 98% 28%,rgba(var(--e2-rgb),.17),transparent 70%),
  radial-gradient(56% 34% at 2% 68%,rgba(var(--e-rgb),.13),transparent 72%),
  radial-gradient(62% 40% at 94% 100%,rgba(var(--e2-rgb),.11),transparent 72%),
  var(--bg);}
html[data-mode="light"]{--ambient:
  radial-gradient(58% 38% at 12% 1%,rgba(var(--e-rgb),.17),transparent 70%),
  radial-gradient(46% 30% at 98% 28%,rgba(var(--e2-rgb),.11),transparent 70%),
  radial-gradient(56% 34% at 2% 68%,rgba(var(--e-rgb),.08),transparent 72%),
  radial-gradient(62% 40% at 94% 100%,rgba(var(--e2-rgb),.07),transparent 72%),
  var(--bg);}
body::before{background:var(--ambient);}
html[data-mode="light"] body::before{background:var(--ambient);}
.hv7-bg{display:none;}
/* les halos propres à chaque écran (.scr::before) faisaient doublon avec ce fond commun,
   et commençaient sous la bannière : une démarcation horizontale visible */
.scr:not(#s-home)::before{display:none;}

/* SURFACES — verre clair. Grandes surfaces : flou d'arrière-plan. */
html[data-mode] :is(.card,.grp-card,.kchart-card,.chrome-box,.kduo-card,.cv-card,.hv7-score,.hv7-day[onclick^="openPrayerFromHome"]){
  background:var(--lg-spec),var(--lg-body),var(--lg-fill);
  -webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);
  border-color:transparent;box-shadow:var(--lg-rim),var(--lg-drop);}
/* petites surfaces : même verre, sans flou (léger à faire défiler) */
html[data-mode] :is(.ktile,.sbox,.chrome-sbox,.favtile,.hv7-ktile,.sess:not(.today),.list-row,.exg-card,.mus-card,.goal-item,.ob-mode-card,.wheel,.fr-req-card){
  background:var(--lg-spec),var(--lg-body),var(--lg-fill);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-color:transparent;box-shadow:var(--lg-rim),var(--lg-drop-sm);}
html[data-mode] .mus-card{border-radius:var(--r-md);}
html[data-mode] .wheel{box-shadow:var(--lg-well-rim);background:var(--lg-well);}
/* HÉROS (carte du jour, plan) : le même verre, avec un halo d'accent */
html[data-mode] :is(.hv7-day:not([onclick^="openPrayerFromHome"]),.sp-plan){
  background:radial-gradient(120% 90% at 100% 0%,rgba(var(--e-rgb),.2),transparent 62%),var(--lg-spec),var(--lg-body),var(--lg-fill);
  -webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);
  border-color:transparent;box-shadow:var(--lg-rim),inset 0 0 0 1px rgba(var(--e-rgb),.2),var(--lg-drop);}
/* élément « courant » dans une liste (séance du jour, moi dans un classement) : verre teinté léger */
html[data-mode] .sess.today{background:linear-gradient(rgba(var(--e-rgb),.15),rgba(var(--e-rgb),.15)),var(--lg-spec),var(--lg-fill);
  box-shadow:inset 0 0 0 1px rgba(var(--e-rgb),.45),inset 0 1px 0 rgba(255,255,255,.14),var(--lg-drop-sm);}

/* CONTRÔLES — verre clair */
html[data-mode] :is(.btn.ghost,.hv7-act.ghost,.sp-acts button:not(.lnk),.chbtn,.pill:not(.on),.cv-unit:not(.on),.stepper button,.addperf){
  background:var(--lg-spec-sm),var(--lg-ctl) !important;border-color:transparent !important;box-shadow:var(--lg-rim),var(--lg-drop-sm);}
html[data-mode] .pills.sub .pill:not(.on){background:transparent !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);}
html[data-mode="light"] .pills.sub .pill:not(.on){box-shadow:inset 0 0 0 1px rgba(20,30,50,.12);}
html[data-mode] :is(.x,.tb-gear:not(#tbAvatar),.ik-bell,.ik-people,.hv7-icon-btn,.hv7-people,.live-ic,.mini-ic,.pf-edit,.cv-swap,.rl-ctrl:not(.main)){
  background:var(--lg-spec-sm),var(--lg-ctl) !important;border-color:transparent !important;box-shadow:var(--lg-rim),var(--lg-drop-sm) !important;}
html[data-mode] .addperf{border:0;}
html[data-mode] .chbtn[style*="--bad"]{box-shadow:inset 0 0 0 1px rgba(255,107,122,.55),inset 0 1px 0 rgba(255,255,255,.14),var(--lg-drop-sm) !important;}
/* CREUX — pistes de sélecteurs et champs de saisie */
html[data-mode] :is(.seg-ctrl:not(.sub),.fr-tabs,.inp,.li-field,.chrome-chip){background:var(--lg-well) !important;border-color:transparent !important;box-shadow:var(--lg-well-rim) !important;}
html[data-mode] :is(.inp,.li-field):is(:focus,:focus-within){box-shadow:var(--lg-well-rim),0 0 0 3px rgba(var(--e-rgb),.28) !important;}
html[data-mode] .seg-ctrl.sub{background:transparent;border-color:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);}
html[data-mode="light"] .seg-ctrl.sub{box-shadow:inset 0 0 0 1px rgba(20,30,50,.1);}
/* SPORT (vérifié vue par vue le 27/09) : derniers éléments restés en gris plein */
html[data-mode] :is(.reason-tile,.setcheck:not(.on)){background:var(--lg-spec-sm),var(--lg-ctl) !important;border-color:transparent !important;box-shadow:var(--lg-rim),var(--lg-drop-sm);}
html[data-mode] .reason-tile:active{background:linear-gradient(rgba(var(--e-rgb),.16),rgba(var(--e-rgb),.16)) !important;box-shadow:inset 0 0 0 1px rgba(var(--e-rgb),.45);}
html[data-mode] :is(.setcell,.mtag,.rs-sub){background:var(--lg-well) !important;border-color:transparent !important;box-shadow:var(--lg-well-rim);}
html[data-mode] .setcell:focus{box-shadow:var(--lg-well-rim),0 0 0 2px rgba(var(--e-rgb),.5);}
html[data-mode] .mini-ic{color:var(--e2) !important;}
.mtile.on .mtile-lab{color:var(--e2);}
html[data-mode] .setcheck.on{box-shadow:var(--lg-tint-rim),0 4px 12px -4px rgba(51,211,153,.5);}
/* ligne de série : reste OPAQUE (elle recouvre le bouton rouge « supprimer » révélé au glissé),
   mais avec l'anatomie du verre (reflet, liseré) sur une base pleine */
html[data-mode] .card.ex-swipe-card{border:0 !important;background:var(--lg-spec),var(--lg-body),rgb(var(--s1-rgb)) !important;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:var(--lg-rim),var(--lg-drop);}
/* les boutons rouges cachés sous les cartes débordaient d'un pixel sur l'arrondi (liseré rouge) :
   rentrés de 2 px, ils ne se voient qu'une fois la carte glissée */
.ex-swipe-action{top:2px !important;bottom:2px;height:auto !important;}
.ex-swipe-action,.set-swipe-action{background:var(--fill-danger) !important;}
.ex-swipe-action.left{left:2px !important;} .ex-swipe-action.right{right:2px !important;}
.set-swipe-action{top:1px !important;bottom:1px;height:auto !important;}
.set-swipe-action.left{left:1px !important;} .set-swipe-action.right{right:1px !important;}
html[data-mode] .set-swipe-row{background:var(--lg-spec),var(--lg-body),rgb(var(--s1-rgb));box-shadow:var(--lg-rim);}
/* interrupteur éteint : piste de verre bien visible (un creux sombre disparaissait sur les feuilles) */
html[data-mode] .toggle:not(.on){background:rgba(255,255,255,.13) !important;border-color:transparent !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 1px 2px rgba(0,0,0,.35);}
html[data-mode="light"] .toggle:not(.on){background:rgba(20,30,50,.14) !important;box-shadow:inset 0 0 0 1px rgba(20,30,50,.08),inset 0 1px 2px rgba(20,30,50,.12);}
html[data-mode] .toggle::after{box-shadow:0 1px 3px rgba(0,0,0,.35),inset 0 -1px 0 rgba(0,0,0,.08);}
/* ACTION / CHOISI — verre teinté d'accent (même dégradé lisible, arêtes de verre) */
html[data-mode] :is(.btn:not(.ghost):not(.danger),.hv7-act.main,.promo-cta,.rs-cta,.rl-ctrl.main){box-shadow:var(--lg-tint-rim),var(--sh-e) !important;}
html[data-mode] :is(.seg-btn.on,.fr-tab.on,.pill.on,.toggle.on,.cal-cell.today,.pf-cam,#tbAvatar){box-shadow:var(--lg-tint-rim),var(--sh-accent-sm) !important;}
html[data-mode] .btn.danger{box-shadow:var(--lg-tint-rim),var(--sh-danger) !important;}
html[data-mode] :is(.seg-ctrl.sub .seg-btn.on,.pills.sub .pill.on,.cv-unit.on){
  background:linear-gradient(rgba(var(--e-rgb),.13),rgba(var(--e-rgb),.13)) !important;
  box-shadow:inset 0 0 0 1px rgba(var(--e-rgb),.45),inset 0 1px 0 rgba(255,255,255,.14) !important;}

/* FENÊTRES — feuille de verre dépoli sur la page assombrie */
html[data-mode] .ov-card{background:var(--lg-spec),var(--lg-sheet);
  -webkit-backdrop-filter:blur(30px) saturate(160%);backdrop-filter:blur(30px) saturate(160%);
  border-top-color:transparent;box-shadow:var(--lg-rim),0 -12px 40px -14px rgba(0,0,0,.55);}
html[data-mode] .ov-card::before{background:rgba(255,255,255,.28);}
html[data-mode="light"] .ov-card::before{background:rgba(20,30,50,.18);}
html[data-mode] .ov{background:rgba(5,7,10,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
html[data-mode="light"] .ov{background:rgba(120,130,150,.3);}
html[data-mode] .ov.ov-push .ov-card{background:var(--ambient);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;}
/* BARRE DU BAS et barre de titre compacte */
html[data-mode] #nav{background:var(--lg-spec),rgba(var(--s1-rgb),.66);
  -webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);
  border-color:transparent;box-shadow:var(--lg-rim),0 18px 40px -16px rgba(0,0,0,.65);}
html[data-mode="light"] #nav{background:var(--lg-spec),rgba(255,255,255,.7);box-shadow:var(--lg-rim),0 16px 34px -16px rgba(30,40,60,.3);}
body.tb-compact:not([data-scr="home"]) .topbar{background:var(--lg-sheet);box-shadow:inset 0 -1px 0 rgba(255,255,255,.08),0 12px 24px -16px rgba(0,0,0,.55);}
html[data-mode="light"] body.tb-compact:not([data-scr="home"]) .topbar{box-shadow:inset 0 -1px 0 rgba(20,30,50,.08),0 12px 24px -18px rgba(30,40,60,.25);}

/* BANNIÈRE FONDUE DANS LA PAGE (v108, choix de Hamou parmi 3 modèles : « sans cadre +
   trait ») — avant : un bloc de verre (fond, liseré, ombre) qui se détachait du reste.
   Désormais le titre et le logo reposent sur le fond de l'app, un halo d'accent sans bord
   derrière les lames, et un fin trait lumineux qui s'efface aux deux bouts sépare
   l'en-tête du contenu. Plus léger à dessiner aussi : ni ombre ni dégradés superposés. */
html .ikh:not(.ikh-dark){color:var(--snow);min-height:0;padding:10px 4px 16px;border-radius:0;overflow:visible;
  background:none !important;box-shadow:none !important;-webkit-backdrop-filter:none;backdrop-filter:none;}
html .ikh:not(.ikh-dark)::before{content:'';position:absolute;z-index:0;right:-20px;top:-30px;width:200px;height:150px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--e-rgb),.16),transparent);}
html .ikh:not(.ikh-dark)::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
  background:var(--ik-line);box-shadow:var(--ik-line-glow);transform-origin:50% 50%;}
html .ikh.ikh-in:not(.ikh-dark)::after{animation:ikLineIn .9s .15s var(--ease-stride) both;}
#ikHead{margin-bottom:6px;}
#ikHead>.ikh-fx{right:4px;}
.ikh.ikh-home{margin-bottom:8px;}
[dir="rtl"] .ikh:not(.ikh-dark)::before{right:auto;left:-20px;}
[dir="rtl"] #ikHead>.ikh-fx{right:auto;left:4px;}
.ikh:not(.ikh-dark) .ikh-title{color:var(--snow);font-size:21px;letter-spacing:-.4px;}
.ikh:not(.ikh-dark) .ikh-sub{color:var(--muted);font-size:12px;margin-top:4px;}
.ikh-home .hv7-greet h1{color:var(--snow) !important;font-size:22px;}
.ikh-home .hv7-greet p{color:var(--muted) !important;}
.ikh-home .hv7-logo span{color:var(--snow) !important;}
.ikh-home .hv7-header{margin-bottom:18px;}
/* plus d'illustration à droite (27/09) : la salutation prend toute la largeur */
.ikh-home .hv7-greet h1,.ikh-home .hv7-greet p{max-width:none;}
.ikh-ob-big{min-height:120px !important;}
.ikh-ob-big .login-brand{color:var(--snow) !important;}
/* LOGO DES BANNIÈRES (v106) — signature en haut à gauche, lames nettes à droite */
.ikh-brand{display:flex;align-items:center;gap:7px;margin:0 0 10px;
  font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:11px;letter-spacing:.9px;line-height:1;color:var(--muted);}
.ikh-brand .ik-logo-mark{width:18px;height:18px;}
#ikHead{justify-content:flex-start;}
.ikh-login>.ikh-fx{width:112px;right:10px;top:16px;transform:none;}
.ikh.ikh-ob>.ikh-fx{width:84px;}
.ikh.ikh-ob-big>.ikh-fx{width:118px;right:10px;top:12px;transform:none;}
/* arabe : les lames passent à gauche, sans miroir (un logo ne se retourne pas) */
[dir="rtl"] .ikh>.ikh-fx{right:auto;left:14px;}
[dir="rtl"] .ikh-login>.ikh-fx,[dir="rtl"] .ikh.ikh-ob-big>.ikh-fx{left:10px;}
/* connexion (toujours sur fond sombre) : verre fumé */
.ikh.ikh-dark{background:radial-gradient(90% 120% at 96% 0%,rgba(var(--e-rgb),.3),transparent 60%),radial-gradient(130% 80% at 10% -18%,rgba(255,255,255,.14),transparent 55%),rgba(8,11,18,.5) !important;
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.22),0 14px 34px -16px rgba(0,0,0,.6) !important;}

/* ===================================================================
   LIQUID GLASS v2 — BOUTONS & CONTRÔLES (27/09, « pousse tous les boutons
   avec le liquid glass »). Trois ingrédients de plus sur chaque contrôle :
     · ARÊTE LUMINEUSE en dégradé (vive en haut à gauche, qui s'éteint puis
       revient en bas à droite, comme la lumière sur un verre bombé). Dessinée par
       un fond « border-box » sous une bordure transparente : aucun pseudo-élément
       (::before sert déjà de zone tactile élargie sur .pill/.seg-btn/.toggle) ;
     · REFLET CAPSULE en haut (le bombé du verre) ;
     · APPUI « LIQUIDE » : le contrôle s'enfonce et s'illumine au lieu de s'assombrir.
   Les boutons d'action restent OPAQUES (demande explicite : un CTA doit rester
   lisible quel que soit le fond) : ils reçoivent l'anatomie du verre, pas sa
   transparence. Les contrôles secondaires, eux, sont translucides. Le mode
   simplifié coupe tout (règles html.easy-mode plus haut, !important).
   =================================================================== */
:root{
  --lgx-edge:linear-gradient(150deg,rgba(255,255,255,.44),rgba(255,255,255,.13) 34%,rgba(255,255,255,.07) 62%,rgba(255,255,255,.22));
  --lgx-edge-strong:linear-gradient(150deg,rgba(255,255,255,.72),rgba(255,255,255,.16) 36%,rgba(255,255,255,.04) 62%,rgba(255,255,255,.34));
  --lgx-cap:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.03) 46%,rgba(255,255,255,0) 60%);
  --lgx-cap-strong:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,.07) 44%,rgba(255,255,255,0) 58%);
  --lgx-ctl:rgba(255,255,255,.08);
  --lgx-glow:0 10px 26px -10px rgba(var(--e-rgb),.72),0 2px 6px -2px rgba(0,0,0,.4);
  --lgx-inner:inset 0 1px 1px rgba(255,255,255,.26),inset 0 -3px 8px -3px rgba(0,0,0,.24);
}
html[data-mode="light"]{
  --lgx-edge:linear-gradient(150deg,rgba(255,255,255,.98),rgba(255,255,255,.55) 36%,rgba(20,30,50,.07) 64%,rgba(20,30,50,.13));
  --lgx-cap:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.4) 46%,rgba(255,255,255,0) 64%);
  --lgx-ctl:rgba(255,255,255,.58);
  --lgx-glow:0 10px 22px -10px rgba(var(--e-rgb),.55),0 2px 6px -2px rgba(30,40,60,.16);
  --lgx-inner:inset 0 1px 1px rgba(255,255,255,.4),inset 0 -3px 8px -3px rgba(0,0,0,.14);
}
/* ACTION — verre teinté d'accent, opaque, bombé, arête vive */
html[data-mode] :is(.btn:not(.ghost):not(.danger),.hv7-act.main,.promo-cta,.rs-cta,.rl-ctrl.main){
  border:1px solid transparent !important;
  background:var(--lgx-cap-strong) padding-box,var(--grad-btn) padding-box,var(--lgx-edge-strong) border-box !important;
  box-shadow:var(--lgx-inner),var(--lgx-glow) !important;}
html[data-mode] .btn:not(.ghost)::before{display:none;} /* le reflet capsule ci-dessus le remplace */
html[data-mode] .btn.danger{border:1px solid transparent !important;
  background:var(--lgx-cap-strong) padding-box,linear-gradient(180deg,#E5484D,#C62F3C 55%,#A8232F) padding-box,var(--lgx-edge-strong) border-box !important;
  box-shadow:var(--lgx-inner),0 10px 24px -10px rgba(229,72,77,.7) !important;}
/* CHOISI — onglet, puce, jour du calendrier : même verre teinté, plus compact */
html[data-mode] :is(.seg-btn.on,.fr-tab.on,.pill.on,.cal-cell.today){
  border:1px solid transparent !important;
  background:var(--lgx-cap-strong) padding-box,var(--grad-btn) padding-box,var(--lgx-edge-strong) border-box !important;
  color:var(--accent-ink) !important;text-shadow:var(--accent-ink-shadow);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.24),0 6px 16px -7px rgba(var(--e-rgb),.7) !important;}
/* SECONDAIRE — verre clair translucide, arête douce */
html[data-mode] :is(.btn.ghost,.hv7-act.ghost,.sp-acts button:not(.lnk),.chbtn,.pill:not(.on),.cv-unit:not(.on),.stepper button,.addperf,.reason-tile,.setcheck:not(.on)){
  border:1px solid transparent !important;
  background:var(--lgx-cap) padding-box,var(--lg-spec-sm) padding-box,linear-gradient(var(--lgx-ctl),var(--lgx-ctl)) padding-box,var(--lgx-edge) border-box !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),var(--lg-drop-sm) !important;}
html[data-mode="light"] :is(.btn.ghost,.hv7-act.ghost,.sp-acts button:not(.lnk),.chbtn,.pill:not(.on),.cv-unit:not(.on),.stepper button,.addperf,.reason-tile,.setcheck:not(.on)){
  box-shadow:0 1px 2px rgba(30,40,60,.08),var(--lg-drop-sm) !important;}
/* BOUTONS-ICÔNES — perles de verre ; flou réservé aux boutons d'en-tête (peu nombreux) */
html[data-mode] :is(.x,.tb-gear:not(#tbAvatar),.ik-bell,.ik-people,.hv7-icon-btn,.hv7-people,.live-ic,.mini-ic,.pf-edit,.cv-swap,.rl-ctrl:not(.main)){
  border:1px solid transparent !important;
  background:var(--lgx-cap) padding-box,var(--lg-spec-sm) padding-box,linear-gradient(var(--lgx-ctl),var(--lgx-ctl)) padding-box,var(--lgx-edge) border-box !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),var(--lg-drop-sm) !important;}
html[data-mode] :is(.x,.tb-gear:not(#tbAvatar),.ik-bell,.ik-people,.hv7-icon-btn,.hv7-people){
  -webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%);}
/* INTERRUPTEURS — piste de verre, bille nacrée ; la bille s'étire à l'appui (comme sur iOS) */
html[data-mode] .toggle{border:1px solid transparent !important;}
html[data-mode] .toggle:not(.on){background:var(--lgx-cap) padding-box,linear-gradient(rgba(255,255,255,.2),rgba(255,255,255,.2)) padding-box,var(--lgx-edge) border-box !important;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.35) !important;}
html[data-mode="light"] .toggle:not(.on){background:var(--lgx-cap) padding-box,linear-gradient(rgba(20,30,50,.22),rgba(20,30,50,.22)) padding-box,var(--lgx-edge) border-box !important;
  box-shadow:inset 0 1px 2px rgba(20,30,50,.14) !important;}
html[data-mode] .toggle.on{background:var(--lgx-cap-strong) padding-box,var(--grad-btn) padding-box,var(--lgx-edge-strong) border-box !important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.3),0 4px 14px -5px rgba(var(--e-rgb),.75) !important;}
html[data-mode] .toggle::after{background:radial-gradient(circle at 34% 28%,#fff 0,#fff 38%,#E7EBF1 100%) !important;
  box-shadow:0 2px 6px rgba(0,0,0,.34),inset 0 -1px 1px rgba(0,0,0,.1),inset 0 1px 1px #fff !important;
  transition:left .28s var(--ease-spring),width .18s var(--ease) !important;}
html[data-mode] .toggle:active::after{width:25px;}
html[data-mode] .toggle.on:active::after{left:15px;}
/* ONGLET ACTIF DE LA BARRE DU BAS — une lentille de verre teintée */
html[data-mode] #nav-pill{border:1px solid transparent !important;
  background:var(--lgx-cap-strong) padding-box,linear-gradient(rgba(var(--e-rgb),.22),rgba(var(--e-rgb),.12)) padding-box,var(--lgx-edge-strong) border-box !important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.2),0 6px 18px -8px rgba(var(--e-rgb),.6) !important;}
/* APPUI « LIQUIDE » — s'enfonce et s'illumine */
html[data-mode] :is(.btn,.hv7-act,.pill,.seg-btn,.fr-tab,.chbtn,.x,.tb-gear,.ik-bell,.ik-people,.hv7-icon-btn,.hv7-people,.stepper button,.reason-tile,.mini-ic,.cv-unit,.nb,.toggle){-webkit-tap-highlight-color:transparent;}
html[data-mode] :is(.btn,.hv7-act,.chbtn,.reason-tile,.stepper button,.cv-unit):active{transform:scale(.965);filter:brightness(1.1) saturate(1.08);}
html[data-mode] :is(.pill,.x,.tb-gear,.ik-bell,.ik-people,.hv7-icon-btn,.hv7-people,.mini-ic):active{transform:scale(.93);filter:brightness(1.12);}
html.easy-mode :is(.btn,.hv7-act,.pill,.chbtn,.x,.tb-gear,.mini-ic):active{filter:none;}
/* TOAST — pastille de verre dépoli ; rayon fixe : une pilule de plusieurs lignes devenait un ovale */
#toast{border:1px solid transparent;border-radius:20px;padding:12px 18px;line-height:1.38;
  /* width:max-content : positionné à left:50%, le toast ne pouvait s'élargir que sur la
     moitié droite de l'écran (≈190 px) — d'où les messages sur 5 lignes. */
  width:max-content;max-width:min(88vw,380px);
  background:var(--lgx-cap) padding-box,linear-gradient(rgba(var(--s1-rgb),.9),rgba(var(--s1-rgb),.9)) padding-box,
    linear-gradient(150deg,rgba(var(--e-rgb),.95),rgba(var(--e-rgb),.3) 40%,rgba(255,255,255,.08) 66%,rgba(var(--e-rgb),.55)) border-box;
  -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  box-shadow:0 16px 36px -14px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.14);}
html[data-mode="light"] #toast{background:var(--lgx-cap) padding-box,linear-gradient(rgba(255,255,255,.92),rgba(255,255,255,.92)) padding-box,
    linear-gradient(150deg,rgba(var(--e-rgb),.85),rgba(var(--e-rgb),.25) 40%,rgba(20,30,50,.08) 66%,rgba(var(--e-rgb),.45)) border-box;
  box-shadow:0 14px 30px -14px rgba(30,40,60,.35);}
/* MODE SIMPLIFIÉ — tout redevient plat et contrasté. Les règles « verre » ci-dessus
   (et celles de la matière unique du 27/09, en !important) étaient plus spécifiques
   que celles du mode simplifié : pastilles et boutons y gardaient reflets et lueurs.
   html.easy-mode[data-mode] ajoute une classe de spécificité : ces règles l'emportent. */
html.easy-mode[data-mode] :is(.btn.ghost,.hv7-act.ghost,.sp-acts button:not(.lnk),.chbtn,.pill:not(.on),.cv-unit:not(.on),.stepper button,.addperf,.reason-tile,.setcheck:not(.on),.x,.tb-gear:not(#tbAvatar),.ik-bell,.ik-people,.hv7-icon-btn,.hv7-people,.live-ic,.mini-ic,.pf-edit,.cv-swap,.rl-ctrl:not(.main)){
  background:var(--s1) !important;border:2px solid var(--hair2) !important;box-shadow:none !important;-webkit-backdrop-filter:none;backdrop-filter:none;}
html.easy-mode[data-mode] :is(.btn:not(.ghost):not(.danger),.hv7-act.main,.promo-cta,.rs-cta,.rl-ctrl.main,.seg-btn.on,.fr-tab.on,.pill.on,.cal-cell.today){
  background:var(--grad-btn) !important;border:2px solid transparent !important;box-shadow:none !important;}
html.easy-mode[data-mode] .btn.danger{background:linear-gradient(180deg,#E5484D,#C62F3C) !important;border:2px solid transparent !important;box-shadow:none !important;}
html.easy-mode[data-mode] .toggle:not(.on){background:var(--s2) !important;border:2px solid var(--hair2) !important;box-shadow:none !important;}
html.easy-mode[data-mode] .toggle.on{background:var(--e) !important;border:2px solid var(--e) !important;box-shadow:none !important;}
html.easy-mode[data-mode] .toggle::after{background:#fff !important;box-shadow:0 1px 2px rgba(0,0,0,.3) !important;}
html.easy-mode[data-mode] #nav-pill{background:var(--ed) !important;border:2px solid rgba(var(--e-rgb),.35) !important;box-shadow:none !important;}
html.easy-mode #toast{background:var(--s1);border:2px solid var(--e);box-shadow:0 8px 20px -8px rgba(0,0,0,.5);
  max-width:min(76vw,330px);} /* html.easy-mode est zoomé à 1,16 : 88vw débordait de l'écran */
/* CONNEXION — liens secondaires : centrés, en texte courant (ils étaient en Unbounded gras, alignés à gauche) */
.login-guest{text-align:center;font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:700;font-size:14px;line-height:1.4;}
.login-guest.subtle{font-weight:600;font-size:12.5px;}

/* « Réduire les animations » (réglage du téléphone) : seules 3 animations de
   fond le respectaient, une vingtaine d'autres tournaient en boucle. Les
   animations se terminent désormais instantanément dans leur état final. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
}
/* FLUIDITÉ (v107) — le flou d'arrière-plan des cartes qui défilent ne se voyait pas
   (fond presque uni derrière elles : captures identiques avec et sans, sombre et clair)
   mais Safari le recalculait à chaque image du défilement — jusqu'à 13 à la fois sur
   l'accueil. Gardé là où du contenu passe vraiment dessous : barre de titre compacte,
   barre du bas, fenêtres, toasts. */
/* V3.5.0 : en Maximal aussi. Derrière les cartes qui défilent il n'y a que le fond de
   halos, déjà flou : le flou de 34 px y était invisible mais le défilement tombait à
   13-24 images/s (Profil, Stats, Musculation). Les surfaces fixes gardent le vrai verre. */
#scroll *:not(.topbar){-webkit-backdrop-filter:none;backdrop-filter:none;}
/* GESTES (v107) — glisser depuis le bord gauche ferme la page plein écran de l'app ;
   sans ceci, Chrome/Android (et IKORUN ouvert dans un onglet) faisait « page précédente »
   et sortait de l'app. */
html,body{overscroll-behavior-x:none;touch-action:pan-x pan-y;} /* ni pincer ni double-toucher pour zoomer (v109) */
/* UNE APP, PAS UNE PAGE WEB (V3.5.0) — « des pages bougent de droite à gauche, de haut en
   bas, comme une page Google ; on peut zoomer sur certaines ».
   · touch-action n'est pas hérité et chaque zone qui défile repart de zéro : le pincement
     restait donc permis dans la page qui défile, les fiches et les pages plein écran.
     Posé sur tout, il ne laisse que le défilement ; les gestes maison gardent le leur
     (sélecteurs plus précis : cartes à glisser, lignes de séries).
   · la page elle-même ne rebondit plus (overscroll-behavior ; sur les iOS plus anciens,
     voir le garde-fou tactile dans app.js), et une zone qui défile ne passe jamais son
     élan à la page derrière.
   · aucune zone ne défile en largeur : deux fiches (Apparence, Notifications) débordaient
     de 5 px et glissaient de gauche à droite sous le doigt. */
*{touch-action:pan-x pan-y;}
input[type="range"],.ik-dial{touch-action:pan-y;} /* le glissement horizontal reste au curseur */
html,body{overscroll-behavior:none;}
:is(#scroll,.ov-card,.ov-body-scroll,#profileEditBody,.ob-step,#login,#progBody){overscroll-behavior:contain;overflow-x:hidden;}
/* SIGNATURES IKORUN (v107) — discrètes : fin de chaque écran, en-tête des pages plein
   écran, indicateur « tirer pour actualiser ». */
.ik-sign{display:flex;flex-direction:column;align-items:center;gap:5px;margin:30px auto 4px;opacity:.55;text-align:center;}
.ik-sign .ik-logo-mark{width:22px;height:22px;}
.ik-sign b{font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:11px;letter-spacing:2.4px;color:var(--snow);}
.ik-sign span{font-size:10px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);}
.ik-sign em{font-style:normal;font-size:9.5px;color:var(--dim);font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;}
.ik-sign em:empty{display:none;}
html.easy-mode .ik-sign{display:none;}
.ov.ov-push .ov-head::after{content:'';order:3;flex:none;width:20px;height:20px;opacity:.5;background:var(--e);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='84 78 356 280'%3E%3Cg fill='%23000' stroke='%23000' stroke-width='12' stroke-linejoin='round'%3E%3Cpolygon points='92,350 205,258 415,183 296,292'/%3E%3Cpolygon points='160,240 218,160 432,86 376,168'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='84 78 356 280'%3E%3Cg fill='%23000' stroke='%23000' stroke-width='12' stroke-linejoin='round'%3E%3Cpolygon points='92,350 205,258 415,183 296,292'/%3E%3Cpolygon points='160,240 218,160 432,86 376,168'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;}
html[data-accent="carbon"] .ov.ov-push .ov-head::after{background:var(--grad-btn);}
#ptrIndicator .ik-logo-mark{width:18px;height:18px;}
#ptrIndicator.busy .ik-logo-mark{animation:ikPtrPulse .9s ease-in-out infinite;}
@keyframes ikPtrPulse{50%{transform:scale(.72);opacity:.55;}}

/* ===================================================================
   EFFET VERRE — 3 NIVEAUX (V3.3.0, Profil › Apparence)
   flat : surfaces pleines (rapide, économe) · std : le verre IKORUN (défaut)
   max  : effet maximal — verre très transparent flouté partout (y compris les cartes
   qui défilent), reflets et bord lumineux renforcés, fond d'ambiance vif qui dérive
   lentement sous le verre (transform seul : animé par le GPU, pas de repeinture).
   =================================================================== */
html[data-glass="flat"]{--lg-blur:none;--lg-spec:linear-gradient(transparent,transparent);--lg-body:linear-gradient(transparent,transparent);--lg-fill:var(--s1);}
html[data-glass="flat"][data-mode="light"]{--lg-fill:#fff;}
html[data-glass="flat"] *{-webkit-backdrop-filter:none !important;backdrop-filter:none !important;}

html[data-glass="max"]{
  --lg-fill:rgba(var(--s1-rgb),.16);
  --lg-body:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 55%,rgba(255,255,255,.08));
  /* reflet en diagonale (façon verre iOS) + éclat en haut à gauche + couleur qui remonte du bas */
  --lg-spec:linear-gradient(135deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.07) 26%,transparent 44%),radial-gradient(120% 70% at 12% -14%,rgba(255,255,255,.32),transparent 52%),radial-gradient(90% 60% at 100% 120%,rgba(var(--e2-rgb),.24),transparent 60%);
  /* bord lumineux qui « décompose » la lumière : froid à gauche, chaud à droite */
  --lg-rim:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 1.5px 0 rgba(255,255,255,.58),inset 1px 0 0 rgba(var(--e2-rgb),.4),inset -1px 0 0 rgba(255,170,230,.2),inset 0 -1px 0 rgba(var(--e-rgb),.4),inset 0 0 30px rgba(255,255,255,.06);
  --lg-drop:0 26px 48px -18px rgba(0,0,0,.76),0 4px 12px -4px rgba(0,0,0,.42);
  --lg-blur:blur(34px) saturate(230%) brightness(1.1);
}
html[data-glass="max"][data-mode="light"]{
  --lg-fill:rgba(255,255,255,.28);
  --lg-body:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.16) 60%);
  --lg-spec:linear-gradient(135deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.2) 26%,transparent 44%),radial-gradient(90% 60% at 100% 120%,rgba(var(--e-rgb),.16),transparent 60%);
  --lg-rim:inset 0 0 0 1px rgba(255,255,255,.9),inset 0 1.5px 0 #fff,0 0 0 1px rgba(20,30,50,.06),inset 1px 0 0 rgba(var(--e2-rgb),.3),inset 0 -1px 0 rgba(var(--e-rgb),.24);
  --lg-blur:blur(34px) saturate(210%);
}
/* carbone en Maximal : le verre reste assez fumé pour que le tressage ne brouille pas le texte */
html[data-carbon][data-glass="max"]{--lg-fill:rgba(6,7,9,.34);--lg-blur:blur(11px) saturate(190%);}
html[data-carbon][data-glass="max"][data-mode="light"]{--lg-fill:rgba(255,255,255,.4);--lg-blur:blur(11px) saturate(160%);}
/* en Maximal, même les petites surfaces (tuiles, lignes, séances) sont en verre flouté */
html[data-glass="max"] :is(.ktile,.sbox,.chrome-sbox,.favtile,.hv7-ktile,.sess:not(.today),.list-row,.exg-card,.mus-card,.goal-item,.wheel,.fr-req-card,.seg-ctrl,.hv7-icon-btn,.hv7-people,.tb-gear){
  -webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);}
/* le fond qui vit sous le verre */
html[data-glass="max"] body::before{inset:-18%;
  background:
    radial-gradient(40% 30% at 16% 12%,rgba(var(--e-rgb),.78),transparent 70%),
    radial-gradient(36% 28% at 88% 30%,rgba(var(--e2-rgb),.62),transparent 70%),
    radial-gradient(42% 32% at 18% 62%,rgba(var(--e-rgb),.52),transparent 72%),
    radial-gradient(38% 30% at 84% 86%,rgba(var(--e2-rgb),.56),transparent 72%),
    var(--bg);
  animation:ikGlassDrift 22s ease-in-out infinite alternate;will-change:transform;}
html[data-glass="max"][data-mode="light"] body::before{
  background:
    radial-gradient(34% 26% at 18% 12%,rgba(var(--e-rgb),.30),transparent 70%),
    radial-gradient(30% 24% at 86% 30%,rgba(var(--e2-rgb),.24),transparent 70%),
    radial-gradient(36% 28% at 20% 62%,rgba(var(--e-rgb),.18),transparent 72%),
    radial-gradient(32% 26% at 82% 86%,rgba(var(--e2-rgb),.20),transparent 72%),
    var(--bg);}
@keyframes ikGlassDrift{0%{transform:translate3d(0,0,0) rotate(0deg) scale(1);}50%{transform:translate3d(6%,-5%,0) rotate(6deg) scale(1.06);}100%{transform:translate3d(-5%,6%,0) rotate(-5deg) scale(1.02);}}
/* barre du bas et barre de titre : encore plus de verre */
html[data-glass="max"] #nav{-webkit-backdrop-filter:blur(34px) saturate(220%) brightness(1.1);backdrop-filter:blur(34px) saturate(220%) brightness(1.1);}
html[data-glass="max"] body.tb-compact:not([data-scr="home"]) .topbar{-webkit-backdrop-filter:blur(30px) saturate(210%);backdrop-filter:blur(30px) saturate(210%);}
@media (prefers-reduced-motion: reduce){ html[data-glass="max"] body::before{animation:none;} }
html.easy-mode[data-glass="max"] body::before{animation:none;inset:0;}

/* Aperçu dans Profil › Apparence */
.glass-demo{position:relative;margin-top:12px;height:92px;border-radius:var(--r-lg);overflow:hidden;
  background:radial-gradient(40% 70% at 20% 30%,rgba(var(--e-rgb),.9),transparent 70%),radial-gradient(35% 60% at 80% 70%,rgba(var(--e2-rgb),.8),transparent 70%),var(--bg);}
.glass-demo-card.card{position:absolute;inset:14px 38px;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  -webkit-backdrop-filter:var(--lg-blur) !important;backdrop-filter:var(--lg-blur) !important;}
html[data-glass="flat"] .glass-demo-card.card{-webkit-backdrop-filter:none !important;backdrop-filter:none !important;}
.glass-demo-t{font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:15px;letter-spacing:2px;color:var(--snow);}
.glass-demo-s{font-size:11px;font-weight:600;color:var(--muted);}

/* ===================================================================
   TRAIT LUMINEUX (V3.3.0) — le trait sous la bannière devient le motif de l'app :
   cœur lumineux au centre, léger halo, et il sépare aussi les sections des pages.
   · titres avec un lien à droite (« Voir le plan ›ʼ) : le trait passe au-dessus ;
   · titres seuls (Profil, Outils, Apparence…) : le trait part du titre vers la droite.
   =================================================================== */
:root{
  --ik-line:linear-gradient(90deg,transparent,rgba(var(--e-rgb),.55) 22%,rgba(255,255,255,.8) 50%,rgba(var(--e2-rgb),.45) 78%,transparent);
  --ik-line-r:linear-gradient(90deg,rgba(var(--e-rgb),.7),rgba(var(--e2-rgb),.3) 38%,transparent);
  --ik-line-glow:0 0 8px rgba(var(--e-rgb),.6);
}
html[data-mode="light"]{
  --ik-line:linear-gradient(90deg,transparent,rgba(var(--e-rgb),.4) 22%,rgba(var(--e-rgb),.95) 50%,rgba(var(--e2-rgb),.4) 78%,transparent);
  --ik-line-r:linear-gradient(90deg,rgba(var(--e-rgb),.6),rgba(var(--e2-rgb),.22) 38%,transparent);
  --ik-line-glow:0 0 6px rgba(var(--e-rgb),.35);
}
@keyframes ikLineIn{from{transform:scaleX(.15);opacity:0;}to{transform:none;opacity:1;}}
/* au-dessus des titres de section qui portent un lien */
.hv7-sec-lab,.sec-lab{position:relative;border-top:0 !important;}
.hv7-sec-lab::before,.sec-lab::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:var(--ik-line);box-shadow:var(--ik-line-glow);opacity:.75;}
.sec-lab{padding-top:14px;}
/* derrière les titres seuls */
.grp-lab,#toolRes > .lab,#toolRes > .row > .lab:first-child,#progBody > .lab{display:flex;align-items:center;gap:10px;}
.sec-head > .grp-lab,#toolRes > .row > .lab:first-child{flex:1;min-width:0;}
.grp-lab::after,#toolRes > .lab::after,#toolRes > .row > .lab:first-child::after,#progBody > .lab::after{
  content:'';flex:1;min-width:24px;height:1px;background:var(--ik-line-r);box-shadow:var(--ik-line-glow);opacity:.7;}
/* sous l'en-tête des pages plein écran et de la barre de titre compacte */
.ov.ov-push .ov-head{position:relative;padding-bottom:12px;}
.ov.ov-push .ov-head::before{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
  background:var(--ik-line);box-shadow:var(--ik-line-glow);opacity:.6;}
body.tb-compact:not([data-scr="home"]) .topbar{box-shadow:none !important;}
body.tb-compact:not([data-scr="home"]) .topbar::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
  background:var(--ik-line);box-shadow:var(--ik-line-glow);opacity:.7;}
html.easy-mode :is(.hv7-sec-lab,.sec-lab)::before,html.easy-mode :is(.grp-lab,#toolRes > .lab,#progBody > .lab)::after{display:none;}
@media (prefers-reduced-motion: reduce){ html .ikh.ikh-in:not(.ikh-dark)::after{animation:none;} }

/* ===================================================================
   CHRONOS VIVANTS (V3.3.0) — cadran du chrono, anneaux du minuteur / Pomodoro / repos
   =================================================================== */
.ch-dial{position:relative;width:260px;height:260px;max-width:100%;margin:0 auto;display:flex;align-items:center;justify-content:center;isolation:isolate;}
.ch-bezel{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.ch-tk{stroke:rgba(255,255,255,.2);stroke-width:1.2;stroke-linecap:round;}
.ch-tk.big{stroke:rgba(255,255,255,.42);stroke-width:2.2;}
html[data-mode="light"] .ch-tk{stroke:rgba(20,30,50,.16);}
html[data-mode="light"] .ch-tk.big{stroke:rgba(20,30,50,.34);}
.ch-track{fill:none;stroke:rgba(var(--e-rgb),.13);stroke-width:4;}
.ch-arc{fill:none;stroke:var(--e);stroke-width:4;stroke-linecap:round;transform:rotate(-90deg);transform-origin:130px 130px;
  filter:drop-shadow(0 0 6px rgba(var(--e-rgb),.75));}
#chHead{transform-origin:130px 130px;}
.ch-head{fill:#fff;filter:drop-shadow(0 0 5px var(--e)) drop-shadow(0 0 12px rgba(var(--e-rgb),.85));transition:opacity .3s;}
.ch-mid{position:relative;text-align:center;}
#chDisp{font-size:40px;font-weight:700;letter-spacing:-1.5px;transition:color .3s;}
.ch-face.run #chDisp{color:var(--e);}
.ch-sub{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);margin-top:4px;}
/* il respire quand il tourne */
.ch-dial::before,.ring-wrap.run::before{content:'';position:absolute;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(var(--e-rgb),.3),transparent 70%);}
.ch-dial::before{inset:16%;opacity:0;transition:opacity .4s;}
.ch-face.run .ch-dial::before{opacity:1;animation:ikBreath 2.4s ease-in-out infinite;}
.ring-wrap.run{isolation:isolate;}
.ring-wrap.run::before{inset:4%;animation:ikBreath 2.4s ease-in-out infinite;}
@keyframes ikBreath{0%,100%{transform:scale(.94);opacity:.9;}50%{transform:scale(1.12);opacity:.45;}}
/* en pause : les chiffres clignotent doucement, comme un vrai chrono */
.ch-face.paused #chDisp{animation:ikBlink 1.4s ease-in-out infinite;}
.ch-face.paused .ch-head{opacity:.45;}
@keyframes ikBlink{50%{opacity:.32;}}
/* tour pris : éclair sur le cadran */
.ch-face.lap .ch-dial{animation:ikLapFlash .55s ease-out;}
@keyframes ikLapFlash{30%{transform:scale(1.03);filter:brightness(1.4);}}
@media (prefers-reduced-motion: reduce){ .ch-face .ch-dial::before,.ring-wrap.run::before,.ch-face.paused #chDisp,.ch-face.lap .ch-dial{animation:none;} }
html.easy-mode .ch-dial::before,html.easy-mode .ring-wrap.run::before{display:none;}
html.easy-mode .ch-face.paused #chDisp{animation:none;}
/* séance en cours : point « en direct » qui pulse à côté de la durée */
.ik-live-dot{width:7px;height:7px;border-radius:50%;background:var(--bad);box-shadow:0 0 0 0 rgba(224,57,74,.6);animation:ikLive 1.6s ease-out infinite;flex:none;}
@keyframes ikLive{0%{box-shadow:0 0 0 0 rgba(224,57,74,.55);}70%{box-shadow:0 0 0 7px rgba(224,57,74,0);}100%{box-shadow:0 0 0 0 rgba(224,57,74,0);}}
@media (prefers-reduced-motion: reduce){ .ik-live-dot{animation:none;} }

/* ===================================================================
   LIQUID GLASS INTERACTIF (V3.3.0)
   =================================================================== */
/* pastille de la barre du bas : une goutte qui s'étire puis se resserre (tous les modes) */
#nav-pill{transition:left .42s var(--ease-spring),width .42s var(--ease-spring),transform .38s var(--ease-spring),background .3s ease,box-shadow .3s ease,border-color .3s ease,backdrop-filter .3s ease;}
#nav-pill.liquid{transition:left .16s cubic-bezier(.3,0,.2,1),width .16s cubic-bezier(.3,0,.2,1),transform .16s ease;transform:scaleY(.84);border-radius:22px;}
/* lumière au toucher (Maximal) */
.ik-touchlight{position:absolute;z-index:6;width:260px;height:260px;margin:-130px 0 0 -130px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.62) 0%,rgba(var(--e2-rgb),.42) 20%,rgba(var(--e-rgb),.16) 44%,transparent 66%);mix-blend-mode:screen;
  animation:ikLightIn .32s var(--ease-out) both;transition:left .08s linear,top .08s linear;}
/* l'onde : comme une goutte qui tombe sur le verre */
.ik-touchlight::after{content:'';position:absolute;inset:18%;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);
  box-shadow:0 0 14px rgba(var(--e2-rgb),.8);animation:ikRipple .7s cubic-bezier(.2,.7,.3,1) both;}
@keyframes ikRipple{from{transform:scale(.15);opacity:1;}to{transform:scale(1.25);opacity:0;}}
.ik-touchlight.out{animation:ikLightOut .5s ease forwards;}
html[data-mode="light"] .ik-touchlight{mix-blend-mode:normal;background:radial-gradient(circle,rgba(255,255,255,.98),rgba(var(--e-rgb),.2) 34%,transparent 66%);}
html[data-mode="light"] .ik-touchlight::after{border-color:rgba(var(--e-rgb),.55);box-shadow:0 0 12px rgba(var(--e-rgb),.35);}
@keyframes ikLightIn{from{transform:scale(.25);opacity:0;}}
@keyframes ikLightOut{to{transform:scale(1.6);opacity:0;}}
html[data-glass="max"] :is(.card,.grp-card,.kchart-card,.kduo-card,.list-row,.favtile,.hv7-ktile,.ktile,.sess,.pb-card,.mus-card,.exg-card):has(> .ik-touchlight){overflow:hidden;}
/* boutons « gelée » (Maximal) */
.ik-jelly{animation:ikJelly .55s cubic-bezier(.2,.8,.3,1.2);}
@keyframes ikJelly{0%{transform:scale(1);}22%{transform:scale(1.09,.88);}48%{transform:scale(.95,1.07);}72%{transform:scale(1.02,.98);}100%{transform:scale(1);}}
/* reflets vivants (Maximal, V3.5.0) : un calque de lumière unique au-dessus de la page
   (#ikGlare, voir app.js) — une bande diagonale et un éclat, qui glissent avec
   l'inclinaison ou le défilement. Seul son transform change : rien à recalculer ailleurs. */
#ikGlare{position:fixed;inset:-35%;z-index:9998;pointer-events:none;display:none;will-change:transform;transition:transform .12s linear;}
html[data-glass="max"] #ikGlare{display:block;}
#ikGlare i,#ikGlare b{position:absolute;inset:0;}
#ikGlare i{background:linear-gradient(118deg,transparent 41%,rgba(255,255,255,.07) 46%,rgba(255,255,255,.16) 49.5%,rgba(255,255,255,.07) 53%,transparent 58%),
  linear-gradient(118deg,transparent 60%,rgba(255,255,255,.05) 62.5%,transparent 65%);}
#ikGlare b{background:radial-gradient(22% 16% at 34% 30%,rgba(255,255,255,.13),transparent 70%);}
html[data-mode="light"] #ikGlare i{background:linear-gradient(118deg,transparent 41%,rgba(255,255,255,.22) 46%,rgba(255,255,255,.45) 49.5%,rgba(255,255,255,.22) 53%,transparent 58%);}
html[data-mode="light"] #ikGlare b{background:radial-gradient(22% 16% at 34% 30%,rgba(255,255,255,.35),transparent 70%);}
html.easy-mode #ikGlare{display:none !important;}
@media (prefers-reduced-motion: reduce){ #nav-pill.liquid{transform:none;} .ik-jelly{animation:none;} .ik-touchlight{display:none;} }

/* ===================================================================
   TRAIT LUMINEUX VIVANT (V3.3.0) — déploiement à l'entrée + étincelle qui passe
   =================================================================== */
:root{--ik-spark:linear-gradient(90deg,transparent,rgba(255,255,255,.9) 42%,#fff 50%,rgba(255,255,255,.9) 58%,transparent);}
html[data-mode="light"]{--ik-spark:linear-gradient(90deg,transparent,rgba(var(--e-rgb),.95) 50%,transparent);}
/* déploiement : depuis le centre pour les traits centrés, depuis le titre pour les traits qui le suivent */
html.ik-lines-anim :is(.hv7-sec-lab,.sec-lab)::before,html.ik-lines-anim .ikh:not(.ikh-dark)::after{transform:scaleX(0);transform-origin:50% 50%;transition:transform .9s var(--ease-stride);}
html.ik-lines-anim :is(.grp-lab,#toolRes > .lab,#toolRes > .row > .lab:first-child,#progBody > .lab)::after{transform:scaleX(0);transform-origin:0 50%;transition:transform .9s var(--ease-stride);}
html.ik-lines-anim .ik-lit:is(.hv7-sec-lab,.sec-lab)::before,html.ik-lines-anim .ikh.ik-lit:not(.ikh-dark)::after,
html.ik-lines-anim .ik-lit:is(.grp-lab,#toolRes > .lab,#toolRes > .row > .lab:first-child,#progBody > .lab)::after{transform:none;}
html.ik-lines-anim .ik-lit-now::before,html.ik-lines-anim .ik-lit-now::after{transition:none !important;}
[dir="rtl"] :is(.grp-lab,#toolRes > .lab,#progBody > .lab)::after{transform-origin:100% 50%;}
/* l'étincelle */
.ik-lit:is(.hv7-sec-lab,.sec-lab)::before,.ikh.ik-lit:not(.ikh-dark)::after{
  background:var(--ik-spark) no-repeat,var(--ik-line);background-size:64px 100%,100% 100%;background-position:-30% 0,0 0;
  animation:ikSpark 9s var(--spark-delay,2s) ease-in-out infinite;}
.ik-lit:is(.grp-lab,#toolRes > .lab,#toolRes > .row > .lab:first-child,#progBody > .lab)::after{
  background:var(--ik-spark) no-repeat,var(--ik-line-r);background-size:48px 100%,100% 100%;background-position:-30% 0,0 0;
  animation:ikSpark 9s var(--spark-delay,2s) ease-in-out infinite;}
@keyframes ikSpark{0%{background-position:-30% 0,0 0;}14%{background-position:130% 0,0 0;}100%{background-position:130% 0,0 0;}}
html.easy-mode .ik-lit::before,html.easy-mode .ik-lit::after{animation:none;}
@media (prefers-reduced-motion: reduce){ .ik-lit::before,.ik-lit::after{animation:none !important;} }

/* ===================================================================
   CHRONOS VIVANTS · 2 (V3.3.0) — graduations, comète, embrasement, ondes,
   sphère liquide, séance en cours
   =================================================================== */
/* graduations des secondes écoulées : allumées */
.ch-tk{transition:stroke .35s ease,filter .35s ease;}
.ch-tk.on{stroke:rgba(var(--e2-rgb),.95);filter:drop-shadow(0 0 3px rgba(var(--e-rgb),.9));}
.ch-tk.big.on{stroke:#fff;}
html[data-mode="light"] .ch-tk.on{stroke:var(--e);}
html[data-mode="light"] .ch-tk.big.on{stroke:var(--e);}
/* traînée de comète */
.ch-tail{fill:rgba(var(--e2-rgb),1);filter:drop-shadow(0 0 4px rgba(var(--e-rgb),.9));}
html[data-mode="light"] .ch-tail{fill:var(--e);}
.ch-face.paused .ch-tail{opacity:0 !important;transition:opacity .3s;}
/* départ : les graduations s'embrasent en vague */
.ch-face.ignite .ch-tk{animation:chIgnite .55s calc(var(--i) * 9ms) ease-out both;}
@keyframes chIgnite{35%{stroke:#fff;filter:drop-shadow(0 0 6px var(--e)) drop-shadow(0 0 12px rgba(var(--e-rgb),.9));}}
/* onde de choc (tour, fin de minuteur, séance terminée) */
.ik-shock{position:absolute;left:50%;top:50%;width:100%;aspect-ratio:1;max-width:320px;border-radius:50%;pointer-events:none;z-index:4;
  border:2px solid rgba(var(--e2-rgb),.9);box-shadow:0 0 18px rgba(var(--e-rgb),.7),inset 0 0 12px rgba(var(--e-rgb),.5);
  transform:translate(-50%,-50%) scale(.4);opacity:0;animation:ikShock .9s cubic-bezier(.2,.7,.3,1) both;}
.ik-live-prog .ik-shock{width:120%;max-width:none;aspect-ratio:auto;height:34px;border-radius:999px;}
@keyframes ikShock{0%{opacity:.95;transform:translate(-50%,-50%) scale(.45);}100%{opacity:0;transform:translate(-50%,-50%) scale(1.35);}}

/* sphère liquide au centre des anneaux de décompte */
.ik-orb{position:absolute;inset:18px;border-radius:50%;overflow:hidden;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.1),transparent 55%),rgba(var(--bg-rgb),.25);
  box-shadow:inset 0 0 18px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.12);}
.ik-orb svg{position:absolute;inset:0;width:100%;height:100%;}
.ik-orb-lvl{transform:translateY(calc((1 - var(--lvl,1)) * 100px));transition:transform 1s linear;}
.ik-wave{fill:var(--orb,var(--e));}
.ik-wave.w1{opacity:.42;animation:ikWave 3.2s linear infinite;}
.ik-wave.w2{opacity:.26;animation:ikWave2 5.1s linear infinite;}
@keyframes ikWave{from{transform:translateX(0);}to{transform:translateX(-100px);}}
@keyframes ikWave2{from{transform:translate(-100px,3px);}to{transform:translate(0,3px);}}
.ring-wrap > .ring-c{z-index:1;}
.ring-wrap > span[id$="Ring"]{position:relative;z-index:1;}
html[data-mode="light"] .ik-orb{background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.9),transparent 55%),rgba(255,255,255,.35);box-shadow:inset 0 0 16px rgba(30,40,60,.12);}

/* séance en cours : barre de progression lumineuse */
.ik-live-prog{position:relative;height:6px;margin:14px 10px 2px;border-radius:999px;background:rgba(var(--e-rgb),.12);overflow:visible;}
.ik-live-prog > i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;overflow:hidden;
  background:linear-gradient(90deg,var(--e),var(--e2));box-shadow:0 0 12px rgba(var(--e-rgb),.7);transition:width .8s var(--ease-stride);}
.ik-live-prog > i::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
  transform:translateX(-100%);animation:ikBarShine 2.4s ease-in-out infinite;}
@keyframes ikBarShine{60%,100%{transform:translateX(100%);}}
/* série validée : la coche se dessine */
.ik-done .setcheck.on svg *{stroke-dasharray:32;stroke-dashoffset:32;animation:ikDraw .45s .08s ease-out forwards;}
@keyframes ikDraw{to{stroke-dashoffset:0;}}

@media (prefers-reduced-motion: reduce){
  .ch-face.ignite .ch-tk,.ik-shock,.ik-wave,.ik-live-prog > i::after,.ik-done .setcheck.on svg *{animation:none !important;}
  .ik-done .setcheck.on svg *{stroke-dashoffset:0;} .ik-shock{display:none;}
}
html.easy-mode .ik-wave,html.easy-mode .ik-live-prog > i::after{animation:none;}

/* ===================================================================
   MODE SIMPLIFIÉ (V3.3.1) — corrections et mise au propre
   =================================================================== */
/* Hauteurs en pourcentage, pas en vh : sous zoom:1.16, 100vh valait 116 % de l'écran.
   La page entière défilait alors de 135 px sous la zone de défilement (la barre du bas
   « sautait » en changeant de page) et les fenêtres dépassaient par le haut (titre de la
   séance en cours coupé). Un pourcentage suit la vraie taille de l'écran, quel que soit
   le zoom et le navigateur. */
html.easy-mode,html.easy-mode body{height:100%;}
html.easy-mode body{min-height:0;overflow:hidden;}
html.easy-mode #scroll{height:100%;}
html.easy-mode .ov-card,html.easy-mode #ovProfile .ov-card{max-height:92%;}
html.easy-mode #ikMaj{max-width:calc(100% - 24px);}
html.easy-mode #toast{max-width:min(calc(100% - 40px),330px);}
/* Feuilles opaques : sans flou, un fond à 88 % laissait lire la page derrière. */
html.easy-mode[data-mode] .ov:not(.ov-push) .ov-card{background:var(--bg) !important;border-top:2px solid var(--hair2) !important;}

/* Barre du bas : libellés lisibles, onglet « parent » allumé quand la page n'a pas d'onglet */
.nb.on-alt{color:var(--e2);}
html.easy-mode .nb span{font-size:10.5px;}
html.easy-mode .nb svg{width:22px;height:22px;}

/* Moins de bruit : bordures fines et un seul ton, texte courant dans les boutons.
   L'Unbounded extra-gras sur chaque bouton et chaque pastille criait plus qu'il n'aidait. */
html.easy-mode .card,html.easy-mode .grp-card,html.easy-mode .favtile,html.easy-mode .sbox,html.easy-mode .inp,html.easy-mode .pill{border-width:1.5px !important;border-color:var(--hair2) !important;}
html.easy-mode :is(.btn,.pill,.seg-btn){font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;letter-spacing:0;}
html.easy-mode .btn{font-weight:700;font-size:15.5px;}
html.easy-mode .pill{font-weight:700;}
html.easy-mode[data-mode] .btn.ghost{border-width:1.5px !important;}

/* Titres de section : un seul modèle partout (Accueil, Sport, Stats, Profil, Outils),
   même taille, même couleur, même respiration au-dessus et en dessous. */
html.easy-mode :is(.next-lab,.sec-lab,.hv7-sec-lab,.grp-lab,#toolRes > .lab){
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:11.5px;font-weight:800;letter-spacing:.7px;
  text-transform:uppercase;color:var(--e2);margin:22px 2px 9px !important;padding-top:0;}
html.easy-mode .ez-lab-row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
html.easy-mode .ez-lab-row .see{font-size:12px;font-weight:700;text-transform:none;letter-spacing:0;color:var(--e2);cursor:pointer;}
html.easy-mode .scr{padding:0 16px 20px;}
html.easy-mode .card{margin-bottom:10px;}

/* Accueil */
html.easy-mode .ik-header{padding-bottom:8px;}
.ez-av{background:none;border:0;padding:0;border-radius:50%;cursor:pointer;line-height:0;}
.ez-av > div{margin:0 !important;}
html.easy-mode .ik-greet{margin-bottom:14px;}
html.easy-mode .next-title{font-size:16px;}
html.easy-mode .next-meta{font-size:13px;}
html.easy-mode .next-when{font-size:13px;}
html.easy-mode .goal-card .goal-lab{display:none;}
html.easy-mode .goal-card .goal-race{margin-top:0;font-size:16px;}
html.easy-mode .goal-card .goal-target{font-size:12.5px;}
html.easy-mode .goal-count .u{font-size:10px;}
.ez-week{padding:16px 16px 15px;cursor:pointer;}
.ez-week-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:14px;color:var(--muted);font-weight:600;}
.ez-week-row b{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:24px;font-weight:800;color:var(--snow);letter-spacing:-.4px;font-variant-numeric:tabular-nums;}
/* (chiffres en Inter : le zéro rond d'Unbounded se lisait comme la lettre O) */
.ez-week-km b{font-size:18px;}
.ez-week .kgoal-bar{height:10px;margin-top:12px;}
.ez-week-prev{font-size:12.5px;color:var(--muted);margin-top:10px;font-weight:500;}

/* Stats */
.ez-quatro{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;}
.ez-quatro .stat-card{margin:0;padding:14px 8px;}
html.easy-mode .stat-v{font-size:18px;}
html.easy-mode .stat-l{font-size:10px;letter-spacing:.3px;}

/* Profil */
html.easy-mode .grp-row{padding:14px;}
html.easy-mode .grp-row .lr-title{font-weight:700 !important;font-size:14.5px;}
html.easy-mode .grp-row .lr-txt{flex:1;min-width:0;}
html.easy-mode .grp-row .lr-txt .lr-title{flex:none;}
html.easy-mode .grp-row .lr-sub{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.35;}
.ez-ver{text-align:center;margin:24px 0 4px;font-size:11px;color:var(--dim);font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.4px;}

/* Outils : trois tuiles par ligne, titre d'outil sur deux lignes plutôt que tronqué */
.ez-toolgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.ez-toolgrid .favtile{padding:14px 6px;}
html.easy-mode .favlab{font-size:12px;font-weight:700;}
html.easy-mode .tool-title{white-space:normal !important;overflow:visible !important;font-size:16px !important;line-height:1.2;}
html.easy-mode .list-row .lr-title{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:700 !important;font-size:15px;}
/* Musculation : silhouettes un peu plus étroites pour laisser respirer le texte */
html.easy-mode .mus-body{width:70px;}
html.easy-mode .mus-name{font-size:16px;}
html.easy-mode .mus-meta{font-size:12.5px;}
html.easy-mode .list-row .lr-sub{font-size:12px;}

/* ===================================================================
   ÎLOT D'ACTIVITÉ (V3.4.0) — séance, repos, chrono, minuteur, Pomodoro
   Capsule noire vitrée (comme l'îlot de l'iPhone, en clair comme en sombre), posée
   au-dessus de la barre du bas ; elle descend à sa place quand la barre se masque.
   =================================================================== */
#ikIsland{--isl-nav:62px;position:fixed;left:50%;z-index:9999;width:calc(100% - 26px);max-width:404px;
  bottom:calc(18px + var(--isl-nav) + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:8px;pointer-events:none;opacity:0;
  transform:translate(-50%,26px) scale(.55,.4);transform-origin:50% 100%;
  transition:transform .55s var(--ease-spring),opacity .22s ease,bottom .38s var(--ease-spring);}
#ikIsland.on{pointer-events:auto;opacity:1;transform:translate(-50%,0) scale(1);}
#nav.nav-hidden ~ #ikIsland{bottom:calc(10px + env(safe-area-inset-bottom));}
body.isl-on.isl-low #scroll{padding-bottom:calc(214px + env(safe-area-inset-bottom));}
body.isl-on.isl-low #toast{bottom:172px;}
.isl-main,.isl-mini{--isl-c:var(--e);position:relative;overflow:hidden;color:#fff;cursor:pointer;
  background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--isl-c) 22%,transparent),transparent 58%),linear-gradient(180deg,#1b1f27,#07090c);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 18px 38px -14px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.14),inset 0 -8px 16px -10px rgba(0,0,0,.7),0 0 28px -8px color-mix(in srgb,var(--isl-c) 70%,transparent);
  -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  -webkit-tap-highlight-color:transparent;transition:transform .2s var(--ease-spring),box-shadow .3s ease;}
.isl-main{flex:1;min-width:0;height:60px;border-radius:30px;display:flex;align-items:center;gap:10px;padding:0 8px 0 9px;}
.isl-main:active,.isl-mini:active{transform:scale(.97);}
/* reflet qui glisse lentement sur la capsule : une goutte de lumière, pas un clignotement */
.isl-main::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.09) 45%,transparent 60%);
  transform:translateX(-120%);animation:islSheen 5.5s ease-in-out infinite;}
@keyframes islSheen{0%,55%{transform:translateX(-120%);}100%{transform:translateX(120%);}}
.isl-mini{width:56px;height:56px;border-radius:50%;flex:none;display:none;padding:0;align-items:center;justify-content:center;}
#ikIsland.duo .isl-mini{display:flex;animation:islPop .5s var(--ease-spring);}
@keyframes islPop{from{transform:scale(.3);opacity:0;}to{transform:none;opacity:1;}}
.isl-ring{position:relative;width:40px;height:40px;flex:none;display:flex;align-items:center;justify-content:center;}
.isl-mini .isl-ring{width:44px;height:44px;}
.isl-ring > svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible;}
.isl-trk{fill:none;stroke:rgba(255,255,255,.13);stroke-width:3.2;}
.isl-arc{fill:none;stroke:var(--isl-c);stroke-width:3.2;stroke-linecap:round;
  filter:drop-shadow(0 0 4px var(--isl-c));transition:stroke-dashoffset .3s linear,stroke .4s ease;}
.isl-ic{display:flex;color:#fff;font-style:normal;}
.isl-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;line-height:1.2;}
.isl-t{font-size:13.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.1px;}
.isl-s{font-size:11.5px;color:rgba(255,255,255,.62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;}
.isl-s:empty{display:none;}
.isl-time{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:19px;font-weight:700;
  letter-spacing:-.5px;font-variant-numeric:tabular-nums;color:#fff;flex:none;text-shadow:0 0 14px color-mix(in srgb,var(--isl-c) 55%,transparent);}
.isl-acts{display:flex;gap:6px;flex:none;}
.isl-b{width:40px;height:40px;border-radius:50%;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;
  color:#fff;background:rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.14);font:800 12px 'Inter',system-ui,sans-serif;
  -webkit-tap-highlight-color:transparent;transition:transform .15s var(--ease-spring),background .15s;}
.isl-b:active{transform:scale(.88);background:rgba(255,255,255,.22);}
.isl-b[data-act="toggle"]{background:color-mix(in srgb,var(--isl-c) 34%,rgba(255,255,255,.08));}
.isl-go{display:flex;color:rgba(255,255,255,.55);padding:0 6px;}
/* séance ou chrono qui tourne : le point de vie respire au bord de l'anneau */
.live .isl-ring::after{content:'';position:absolute;top:1px;right:1px;width:8px;height:8px;border-radius:50%;
  background:var(--isl-c);box-shadow:0 0 8px var(--isl-c);animation:islBeat 1.6s ease-in-out infinite;}
@keyframes islBeat{0%,100%{transform:scale(.8);opacity:.7;}50%{transform:scale(1.15);opacity:1;}}
/* dernières secondes : la capsule s'embrase doucement */
.isl-main.urgent{animation:islUrgent 1s ease-in-out infinite;}
.isl-main.urgent .isl-time{color:var(--isl-c);}
@keyframes islUrgent{0%,100%{box-shadow:0 18px 38px -14px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.14),0 0 22px -8px var(--isl-c);}
  50%{box-shadow:0 18px 38px -14px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.14),0 0 34px -2px var(--isl-c);}}
/* changement d'activité : la capsule se déforme comme une goutte, puis se reforme */
.isl-main.morph{animation:islMorph .55s var(--ease-spring);}
@keyframes islMorph{0%{transform:scale(1);}30%{transform:scale(1.05,.86);}65%{transform:scale(.98,1.04);}100%{transform:none;}}
/* fin d'un repos réduit : message bref, capsule teintée */
.isl-flash{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:800;font-size:15px;
  opacity:0;pointer-events:none;transition:opacity .25s ease;padding:0 18px;text-align:center;}
.isl-main.flash{background:linear-gradient(180deg,color-mix(in srgb,var(--isl-c) 70%,#07090c),color-mix(in srgb,var(--isl-c) 40%,#07090c));}
.isl-main.flash > :not(.isl-flash){opacity:0;}
.isl-main.flash .isl-flash{opacity:1;}
/* deux activités : la capsule se resserre (anneau, chiffres et boutons un peu plus petits) */
#ikIsland.duo .isl-main{gap:7px;padding:0 7px 0 8px;}
#ikIsland.duo .isl-main .isl-ring{width:36px;height:36px;}
#ikIsland.duo .isl-time{font-size:17px;}
#ikIsland.duo .isl-b{width:36px;height:36px;}
/* mode simplifié : une seule activité à la fois, sans sous-titre ni remise à zéro */
html.easy-mode #ikIsland.duo .isl-mini{display:none;}
html.easy-mode .isl-s,html.easy-mode .isl-b[data-act="reset"]{display:none;}
@media (prefers-reduced-motion: reduce){ .isl-main::after,.live .isl-ring::after,.isl-main.urgent,.isl-main.morph{animation:none;} #ikIsland{transition:opacity .2s ease;} }
html.easy-mode .isl-main::after,html.easy-mode .live .isl-ring::after{animation:none;}
/* bouton « réduire » de la séance en cours */
.ik-min-btn svg{transition:transform .2s var(--ease-spring);}
.ik-min-btn:active svg{transform:translateY(2px);}

/* SÉANCE EN COURS — fluidité (V3.4.0) : la fiche couvre 92 % de l'écran et son fond était
   déjà opaque à 88 % ; le flou de 30 px recalculé à chaque image de la montée (et celui du
   fond de page) faisait accrocher l'ouverture sur téléphone. Fond plein, même reflet. */
html[data-mode] #ovLive{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(5,7,10,.62);}
html[data-mode="light"] #ovLive{background:rgba(120,130,150,.42);}
html[data-mode] #ovLive .ov-card{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--lg-spec),var(--bg);}
#ovLive .ov-card{will-change:transform;contain:layout paint;}

/* ===================================================================
   MATIÈRE « PÂTE À MODELER » (V3.4.0) — Profil › Apparence › Matière
   Tout paraît modelé dans une pâte mate et gonflée : pas de verre ni de flou, une
   lumière douce en haut à gauche et une ombre DANS la matière en bas à droite (les
   deux ombres intérieures de --lg-rim), des coins très arrondis, une ombre portée
   épaisse. Au toucher, ça s'écrase puis rebondit comme une pâte molle (.ik-jelly /
   .ik-clay, voir glassJellyOn dans app.js), et le fond est fait de grosses gouttes
   colorées qui dérivent lentement (transform seul : rien à recalculer).
   =================================================================== */
html[data-glass="clay"]{
  --lg-fill:rgb(var(--s2-rgb));
  --lg-body:linear-gradient(160deg,rgba(255,255,255,.07),rgba(0,0,0,.12));
  --lg-spec:radial-gradient(90% 70% at 22% 6%,rgba(255,255,255,.11),transparent 62%);
  --lg-rim:inset 3px 4px 9px -3px rgba(255,255,255,.14),inset -6px -8px 14px -6px rgba(0,0,0,.6);
  --lg-drop:0 18px 30px -14px rgba(0,0,0,.72),0 5px 12px -5px rgba(0,0,0,.5);
  --lg-drop-sm:0 10px 18px -9px rgba(0,0,0,.62),0 3px 6px -3px rgba(0,0,0,.4);
  --lg-blur:none;
  --lg-ctl:rgb(var(--s3-rgb));
  --lg-spec-sm:radial-gradient(90% 80% at 24% 8%,rgba(255,255,255,.13),transparent 62%);
  --lg-well:rgba(0,0,0,.3);
  --lg-well-rim:inset 3px 5px 9px rgba(0,0,0,.55),inset -2px -3px 6px rgba(255,255,255,.05);
  --lg-tint-rim:inset 2px 3px 7px -2px rgba(255,255,255,.42),inset -4px -6px 10px -4px rgba(0,0,0,.4);
  --lg-sheet:rgb(var(--bg-rgb));
  --r-md:24px; --r-lg:28px; --r-sm:20px;
}
html[data-glass="clay"][data-mode="light"]{
  --lg-fill:#FFFFFF;
  --lg-body:linear-gradient(160deg,rgba(255,255,255,.9),rgba(var(--e-rgb),.05));
  --lg-spec:radial-gradient(90% 70% at 22% 6%,#fff,transparent 62%);
  --lg-rim:inset 4px 5px 10px -3px #fff,inset -7px -9px 16px -7px rgba(var(--e-rgb),.26);
  --lg-drop:0 20px 32px -16px rgba(var(--e-rgb),.34),0 5px 12px -5px rgba(30,40,60,.12);
  --lg-drop-sm:0 12px 20px -12px rgba(var(--e-rgb),.3),0 3px 6px -3px rgba(30,40,60,.08);
  --lg-ctl:#FFFFFF;
  --lg-well:rgba(var(--e-rgb),.07);
  --lg-well-rim:inset 3px 5px 9px rgba(var(--e-rgb),.18),inset -3px -4px 7px rgba(255,255,255,.95);
  --lg-sheet:rgb(var(--bg-rgb));
}
html[data-glass="clay"] *{-webkit-backdrop-filter:none !important;backdrop-filter:none !important;}
html[data-glass="clay"] :is(.card,.grp-card,.kchart-card,.chrome-box,.kduo-card,.cv-card){border-radius:26px;}
html[data-glass="clay"] :is(.ktile,.sbox,.chrome-sbox,.favtile,.hv7-ktile,.sess,.list-row,.exg-card,.mus-card,.goal-item,.fr-req-card){border-radius:20px;}
html[data-glass="clay"] :is(.hv7-day,.sp-plan,.hv7-score){border-radius:30px;}
html[data-glass="clay"] .btn{border-radius:20px;box-shadow:var(--lg-tint-rim),0 12px 20px -10px rgba(var(--e-rgb),.6),0 3px 6px -2px rgba(0,0,0,.3) !important;}
html[data-glass="clay"] .btn.ghost{box-shadow:var(--lg-rim),var(--lg-drop-sm) !important;}
html[data-glass="clay"] :is(.pill,.seg-btn,.chbtn,.x,.tb-gear,.hv7-icon-btn,.hv7-people,.live-ic){box-shadow:var(--lg-rim),var(--lg-drop-sm) !important;}
html[data-glass="clay"] :is(.seg-btn.on,.pill.on,.hv7-act.main,.fr-tab.on){box-shadow:var(--lg-tint-rim),0 8px 14px -8px rgba(var(--e-rgb),.7) !important;}
/* barre du bas : un boudin de pâte ; la pastille, une goutte gonflée */
html[data-glass="clay"] #nav{background:var(--lg-spec),var(--lg-body),var(--lg-fill) !important;border-color:transparent !important;border-radius:30px;
  box-shadow:var(--lg-rim),var(--lg-drop) !important;}
html[data-glass="clay"] #nav-pill{border-radius:22px;background:var(--fill-accent) !important;border:0 !important;
  box-shadow:var(--lg-tint-rim),0 8px 16px -8px rgba(var(--e-rgb),.75) !important;}
html[data-glass="clay"] .nb.on{color:var(--accent-ink);}
html[data-glass="clay"] .nb.on::after{display:none;}
/* interrupteurs : une bille de pâte dans un creux */
html[data-glass="clay"] .toggle{box-shadow:var(--lg-well-rim) !important;}
html[data-glass="clay"] .toggle::after{box-shadow:inset 2px 3px 5px -1px rgba(255,255,255,.7),inset -3px -4px 6px -2px rgba(0,0,0,.28),0 3px 6px -2px rgba(0,0,0,.4) !important;}
/* appui : la pâte s'écrase (le rebond vient de .ik-jelly / .ik-clay au relâcher) */
html[data-glass="clay"] :is(.btn,.hv7-act,.pill,.seg-btn,.chbtn,.x,.setcheck,.favtile,.tb-gear,.hv7-icon-btn,.accent-dot,.acc-sw,.mat-sw):active{transform:scale(.94,.9) !important;transition:transform .09s ease-out !important;}
html[data-glass="clay"] :is(.card[onclick],.hv7-day,.sess,.list-row,.mus-card,.grp-row,.stat-card):active{transform:scale(.975,.96) !important;transition:transform .09s ease-out !important;}
.ik-clay{animation:ikClay .6s cubic-bezier(.2,.8,.3,1.2);}
@keyframes ikClay{0%{transform:scale(.975,.96);}30%{transform:scale(1.018,.985);}55%{transform:scale(.992,1.012);}78%{transform:scale(1.004,.998);}100%{transform:none;}}
/* le fond : de grosses gouttes de pâte colorée qui dérivent */
html[data-glass="clay"] body::before{inset:-16%;
  background:
    radial-gradient(34% 26% at 14% 12%,rgba(var(--e-rgb),.34),transparent 71%),
    radial-gradient(30% 24% at 86% 26%,rgba(var(--e2-rgb),.26),transparent 71%),
    radial-gradient(36% 28% at 22% 66%,rgba(var(--e2-rgb),.2),transparent 72%),
    radial-gradient(32% 26% at 80% 88%,rgba(var(--e-rgb),.24),transparent 72%),
    var(--bg);
  animation:ikGlassDrift 26s ease-in-out infinite alternate;will-change:transform;}
html[data-glass="clay"][data-mode="light"] body::before{
  background:
    radial-gradient(34% 26% at 14% 12%,rgba(var(--e-rgb),.2),transparent 71%),
    radial-gradient(30% 24% at 86% 26%,rgba(var(--e2-rgb),.14),transparent 71%),
    radial-gradient(36% 28% at 22% 66%,rgba(var(--e2-rgb),.12),transparent 72%),
    radial-gradient(32% 26% at 80% 88%,rgba(var(--e-rgb),.15),transparent 72%),
    var(--bg);}
@media (prefers-reduced-motion: reduce){ html[data-glass="clay"] body::before{animation:none;} }
html.easy-mode[data-glass="clay"] body::before{animation:none;inset:0;}

/* COULEUR « PÂTE À MODELER » : corail tendre, et un fond de pâte multicolore
   (corail, lilas, menthe, beurre), comme une boîte de pâtes à modeler ouverte. */
html[data-accent="clay"]{
  --e:#FF8E72; --e2:#FFB39E; --e-rgb:255,142,114; --e2-rgb:255,179,158;
  --grad-btn:linear-gradient(180deg,#E0674C,#C44E36 55%,#A03C28);
  --marineL:#43252E; --hair:#2E1D24; --hair2:#412A33;
  --bg:#120B0C; --s1:#21151A; --s2:#2B1C22; --s3:#38252D;
  --bg-rgb:18,11,12; --s1-rgb:33,21,26; --s2-rgb:43,28,34; --s3-rgb:56,37,45;
  --clay-a:255,142,114; --clay-b:190,160,255; --clay-c:110,220,180; --clay-d:255,214,120;
}
html[data-mode="light"][data-accent="clay"]{
  --marineL:#FADDD0; --hair:#EFD9CD; --hair2:#E3C2B2;
  --bg:#FBF1EB; --s1:#FFFFFF; --s2:#F5E4DA; --bg-rgb:251,241,235; --s1-rgb:255,255,255; --s2-rgb:245,228,218; --s3:#EDD3C6; --s3-rgb:237,211,198;
  --e:#C24E36; --e2:#9A3A26; --e-rgb:194,78,54; --e2-rgb:154,58,38;
  --grad-btn:linear-gradient(180deg,#E06A50,#C24E36 55%,#9A3A26);
}
html[data-accent="clay"] body::before{
  background:
    radial-gradient(34% 26% at 14% 12%,rgba(var(--clay-a),.36),transparent 71%),
    radial-gradient(30% 24% at 86% 24%,rgba(var(--clay-b),.3),transparent 71%),
    radial-gradient(36% 28% at 20% 64%,rgba(var(--clay-c),.24),transparent 72%),
    radial-gradient(32% 26% at 82% 88%,rgba(var(--clay-d),.26),transparent 72%),
    var(--bg) !important;}
html[data-mode="light"][data-accent="clay"] body::before{
  background:
    radial-gradient(34% 26% at 14% 12%,rgba(var(--clay-a),.3),transparent 71%),
    radial-gradient(30% 24% at 86% 24%,rgba(var(--clay-b),.26),transparent 71%),
    radial-gradient(36% 28% at 20% 64%,rgba(var(--clay-c),.22),transparent 72%),
    radial-gradient(32% 26% at 82% 88%,rgba(var(--clay-d),.28),transparent 72%),
    var(--bg) !important;}
.accent-dot[data-a="clay"]{background:conic-gradient(from 200deg,#FF8E72,#FFD678,#6EDCB4,#BEA0FF,#FF8E72);
  box-shadow:inset 2px 3px 5px -1px rgba(255,255,255,.6),inset -3px -4px 6px -2px rgba(0,0,0,.3),var(--sh-sm);}

/* Sélecteur de matière : quatre échantillons qui imitent chacun sa matière */
.mat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.mat-sw{display:flex;align-items:center;gap:10px;padding:12px;border-radius:18px;cursor:pointer;background:var(--s1);border:1.5px solid var(--hair);
  transition:transform .18s var(--ease-spring),border-color .2s ease;}
.mat-sw.on{border-color:var(--e);box-shadow:0 0 0 3px rgba(var(--e-rgb),.18);}
.mat-sw b{font-size:13px;font-weight:800;line-height:1.2;}
.mat-ico{width:34px;height:34px;flex:none;border-radius:11px;}
.mat-ico.flat{background:rgb(var(--s3-rgb));}
.mat-ico.std{background:radial-gradient(130% 80% at 10% -18%,rgba(255,255,255,.55),transparent 55%),linear-gradient(160deg,rgba(var(--e-rgb),.45),rgba(var(--e2-rgb),.15));box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);}
.mat-ico.max{background:linear-gradient(135deg,rgba(255,255,255,.8),transparent 40%),conic-gradient(from 90deg,rgba(var(--e-rgb),.9),rgba(255,120,200,.6),rgba(120,220,255,.7),rgba(var(--e2-rgb),.9));box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);}
.mat-ico.clay{border-radius:14px;background:var(--grad-btn);box-shadow:inset 3px 4px 6px -2px rgba(255,255,255,.55),inset -4px -5px 8px -3px rgba(0,0,0,.4),0 6px 10px -5px rgba(var(--e-rgb),.7);}

/* ===================================================================
   JOURS SPÉCIAUX (V3.5.0) — html[data-fete="…"], posé par applyTheme ces jours-là :
   bday, race, record, ramadan, qadr, mawlid, achoura, muharram, isra, eidFitr, eidAdha,
   xmas, newyear, halloween, sportDay.
   1. couleurs de la fête (l'accent choisi revient le lendemain) ;
   2. carte sur l'Accueil (.fete-card), un fond sombre à elle, lisible en clair comme en sombre ;
   3. calque #ikFete : personnages posés sur la barre du bas, scènes qui passent (voir app.js).
   Tout bouge en transform/opacity ; rien en mode simplifié ni avec « réduire les animations ».
   =================================================================== */
html[data-fete="bday"][data-mode]{--e:#FF5FA2;--e2:#FFC94D;--e-rgb:255,95,162;--e2-rgb:255,201,77;--grad-btn:linear-gradient(135deg,#E23A86,#9B4DE0);}
html[data-fete="bday"][data-mode="light"]{--e:#C2186B;--e2:#8A5A00;--e-rgb:194,24,107;--e2-rgb:138,90,0;}
html[data-fete="record"][data-mode]{--e:#FFC83D;--e2:#FF9A3D;--e-rgb:255,200,61;--e2-rgb:255,154,61;--grad-btn:linear-gradient(135deg,#D99A06,#A86B00);}
html[data-fete="record"][data-mode="light"]{--e:#8A5A00;--e2:#A33D00;--e-rgb:138,90,0;--e2-rgb:163,61,0;}
html[data-fete="ramadan"][data-mode]{--e:#F2C14E;--e2:#8C9CFF;--e-rgb:242,193,78;--e2-rgb:140,156,255;--grad-btn:linear-gradient(135deg,#B8860B,#7A4E0B);}
html[data-fete="ramadan"][data-mode="light"]{--e:#8A5E00;--e2:#3F4FD6;--e-rgb:138,94,0;--e2-rgb:63,79,214;}
html:is([data-fete="eidFitr"],[data-fete="eidAdha"])[data-mode]{--e:#2FD08A;--e2:#F2C14E;--e-rgb:47,208,138;--e2-rgb:242,193,78;--grad-btn:linear-gradient(135deg,#12A26A,#0B6E4D);}
html:is([data-fete="eidFitr"],[data-fete="eidAdha"])[data-mode="light"]{--e:#0B7A50;--e2:#8A5E00;--e-rgb:11,122,80;--e2-rgb:138,94,0;}
html:is([data-fete="mawlid"],[data-fete="achoura"],[data-fete="muharram"])[data-mode]{--e:#2FD08A;--e2:#F2C14E;--e-rgb:47,208,138;--e2-rgb:242,193,78;--grad-btn:linear-gradient(135deg,#12A26A,#B8860B);}
html:is([data-fete="mawlid"],[data-fete="achoura"],[data-fete="muharram"])[data-mode="light"]{--e:#0B7A50;--e2:#8A5E00;--e-rgb:11,122,80;--e2-rgb:138,94,0;}
html:is([data-fete="qadr"],[data-fete="isra"])[data-mode]{--e:#8C9CFF;--e2:#F2C14E;--e-rgb:140,156,255;--e2-rgb:242,193,78;--grad-btn:linear-gradient(135deg,#3F4FD6,#7A4E0B);}
html:is([data-fete="qadr"],[data-fete="isra"])[data-mode="light"]{--e:#3F4FD6;--e2:#8A5E00;--e-rgb:63,79,214;--e2-rgb:138,94,0;}
html[data-fete="sportDay"][data-mode]{--e:#3DA5F5;--e2:#FFA83D;--e-rgb:61,165,245;--e2-rgb:255,168,61;--grad-btn:linear-gradient(135deg,#1477C4,#C97010);}
html[data-fete="sportDay"][data-mode="light"]{--e:#0C63A8;--e2:#A85800;--e-rgb:12,99,168;--e2-rgb:168,88,0;}
html[data-fete="xmas"][data-mode]{--e:#FF4D5E;--e2:#3DDC84;--e-rgb:255,77,94;--e2-rgb:61,220,132;--grad-btn:linear-gradient(135deg,#D7263D,#9E1A2C);}
html[data-fete="xmas"][data-mode="light"]{--e:#C8102E;--e2:#1B7F3B;--e-rgb:200,16,46;--e2-rgb:27,127,59;}
html[data-fete="newyear"][data-mode]{--e:#F5C542;--e2:#9FB4FF;--e-rgb:245,197,66;--e2-rgb:159,180,255;--grad-btn:linear-gradient(135deg,#C99A2E,#7E5E14);}
html[data-fete="newyear"][data-mode="light"]{--e:#8A6400;--e2:#3F55C8;--e-rgb:138,100,0;--e2-rgb:63,85,200;}
html[data-fete="halloween"][data-mode]{--e:#FF8A1F;--e2:#A970FF;--e-rgb:255,138,31;--e2-rgb:169,112,255;--grad-btn:linear-gradient(135deg,#E8590C,#9A3412);}
html[data-fete="halloween"][data-mode="light"]{--e:#C2410C;--e2:#6D28D9;--e-rgb:194,65,12;--e2-rgb:109,40,217;}
/* le jaune et le mono sombres écrivent en noir sur leurs boutons : pas ceux des fêtes */
html[data-fete]:not([data-fete="race"])[data-mode][data-accent] :is(.btn:not(.ghost),.hv7-act.main){color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45);}
html[data-fete]:not([data-fete="race"]){--accent-ink:#FFFFFF;--accent-ink-shadow:0 1px 2px rgba(0,0,0,.45);}
/* Halloween : nuit violette, lueur de citrouille en bas */
html[data-fete="halloween"][data-mode] body::before{background:
  radial-gradient(70% 40% at 12% 100%,rgba(255,120,20,.3),transparent 70%),
  radial-gradient(80% 45% at 92% 0%,rgba(140,70,255,.32),transparent 70%),
  radial-gradient(130% 90% at 50% 45%,transparent 55%,rgba(0,0,0,.5)),var(--bg) !important;}
html[data-fete="halloween"][data-mode="light"] body::before{background:
  radial-gradient(70% 40% at 12% 100%,rgba(255,120,20,.16),transparent 70%),
  radial-gradient(80% 45% at 92% 0%,rgba(140,70,255,.14),transparent 70%),var(--bg) !important;}
/* ciel derrière le contenu : neige à Noël, étoiles qui scintillent au Ramadan, à l'Aïd et au Nouvel an
   (une tuile qui glisse ou qui respire : transform/opacity d'un seul calque) */
html[data-fete="xmas"][data-mode] body::after{inset:-240px 0 0 0;opacity:.5;mix-blend-mode:normal;filter:none;
  background-image:
    radial-gradient(circle at 22px 30px,rgba(255,255,255,.95) 0 2.2px,rgba(255,255,255,0) 3.6px),radial-gradient(circle at 96px 84px,rgba(255,255,255,.95) 0 1.4px,rgba(255,255,255,0) 2.8px),
    radial-gradient(circle at 160px 22px,rgba(255,255,255,.95) 0 2.6px,rgba(255,255,255,0) 4.0px),radial-gradient(circle at 58px 158px,rgba(255,255,255,.95) 0 1.7px,rgba(255,255,255,0) 3.1px),
    radial-gradient(circle at 184px 134px,rgba(255,255,255,.95) 0 1.2px,rgba(255,255,255,0) 2.6px),radial-gradient(circle at 126px 196px,rgba(255,255,255,.95) 0 2.1px,rgba(255,255,255,0) 3.5px),
    radial-gradient(circle at 12px 212px,rgba(255,255,255,.95) 0 1.3px,rgba(255,255,255,0) 2.7px);
  background-size:240px 240px;animation:fxSnow 16s linear infinite;will-change:transform;}
html[data-fete="xmas"][data-mode="light"] body::after{opacity:.45;filter:brightness(.72) sepia(.3) hue-rotate(170deg) saturate(2.2);}
@keyframes fxSnow{from{transform:translateY(0);}to{transform:translateY(240px);}}
html:is([data-fete="ramadan"],[data-fete="eidFitr"],[data-fete="eidAdha"],[data-fete="newyear"],[data-fete="mawlid"],[data-fete="achoura"],[data-fete="muharram"],[data-fete="qadr"],[data-fete="isra"])[data-mode] body::after{inset:0;opacity:.8;mix-blend-mode:normal;filter:none;
  background-image:
    radial-gradient(circle at 30px 40px,#FFE9A0 0 1.3px,transparent 1.9px),radial-gradient(circle at 150px 20px,#fff 0 1px,transparent 1.6px),
    radial-gradient(circle at 110px 120px,#FFE9A0 0 1.6px,transparent 2.2px),radial-gradient(circle at 200px 90px,#fff 0 .9px,transparent 1.5px),
    radial-gradient(circle at 60px 190px,#fff 0 1.2px,transparent 1.8px),radial-gradient(circle at 180px 210px,#FFE9A0 0 1px,transparent 1.6px);
  background-size:230px 230px;-webkit-mask:linear-gradient(180deg,#000 0,#000 45%,transparent 85%);mask:linear-gradient(180deg,#000 0,#000 45%,transparent 85%);
  animation:fxTwinkle 3.2s ease-in-out infinite alternate;}
html:is([data-fete="ramadan"],[data-fete="eidFitr"],[data-fete="eidAdha"],[data-fete="newyear"],[data-fete="mawlid"],[data-fete="achoura"],[data-fete="muharram"],[data-fete="qadr"],[data-fete="isra"])[data-mode="light"] body::after{opacity:.5;filter:brightness(.55) sepia(1) saturate(3);}
@keyframes fxTwinkle{from{opacity:.35;}to{opacity:.85;}}

/* ---------- carte de l'Accueil ---------- */
.fete-card{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;gap:14px;margin:0 0 12px;padding:16px 16px 16px 14px;min-height:112px;
  border-radius:24px;color:#fff;background:var(--fc-bg);
  box-shadow:0 18px 34px -18px var(--fc-glow),inset 0 1px 0 rgba(255,255,255,.24),inset 0 0 0 1px rgba(255,255,255,.07);}
.fete-card::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,0) 44%),radial-gradient(120% 90% at 0% 100%,rgba(0,0,0,.22),transparent 60%);}
.fete-card.off{filter:saturate(.55) brightness(.9);}
.fc-deco{position:absolute;inset:0;z-index:0;pointer-events:none;}
.fc-deco > i{position:absolute;display:block;}
.fc-deco svg,.fc-art svg{display:block;width:100%;height:auto;overflow:visible;}
.fc-art{position:relative;z-index:1;flex:none;width:78px;height:78px;border-radius:24px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.11);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -10px 18px -10px rgba(0,0,0,.35),0 10px 20px -12px rgba(0,0,0,.6);}
.fc-art > svg{width:62px;animation:fcBob 3.2s ease-in-out infinite;}
@keyframes fcBob{0%,100%{transform:translateY(0) rotate(-3deg);}50%{transform:translateY(-3px) rotate(3deg);}}
.fc-txt{position:relative;z-index:1;flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px;}
.fc-txt b{font-family:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:700;font-size:16px;line-height:1.22;letter-spacing:-.25px;text-shadow:0 1px 10px rgba(0,0,0,.25);}
.fc-txt span{font-size:12px;line-height:1.42;font-weight:600;color:rgba(255,255,255,.88);}
.fc-btn{margin-top:6px;border:0;border-radius:999px;padding:7px 13px;font:800 11.5px 'Inter',system-ui,sans-serif;color:#fff;cursor:pointer;
  background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),inset 0 1px 0 rgba(255,255,255,.3);}
.fc-btn:active{transform:scale(.94);}
html[dir="rtl"] .fete-card{padding:16px 14px 16px 16px;}
/* chaque fête, son décor */
.fc-bday{--fc-bg:radial-gradient(90% 90% at 100% 0%,rgba(255,201,77,.34),transparent 55%),linear-gradient(135deg,#3A0E4F 0%,#7B1B6A 52%,#D23C7E 100%);--fc-glow:rgba(210,60,126,.8);padding-top:24px;}
.fc-bunt{left:-4px;right:-4px;top:-2px;height:34px;}
.fc-bunt svg{height:34px;}
.fc-bal{width:17px;right:16px;bottom:8px;opacity:.9;animation:fcFloat 4s ease-in-out infinite;}
.fc-bal.b2{width:13px;right:38px;bottom:2px;animation-delay:-1.6s;opacity:.75;}
@keyframes fcFloat{0%,100%{transform:translateY(0) rotate(-4deg);}50%{transform:translateY(-6px) rotate(4deg);}}
.fc-race{--fc-bg:radial-gradient(80% 90% at 0% 0%,rgba(var(--e-rgb),.45),transparent 60%),linear-gradient(150deg,#0E1624,#18263F 60%,#22365A);--fc-glow:rgba(var(--e-rgb),.6);}
.fc-check{left:0;right:0;bottom:0;height:8px;opacity:.5;background:repeating-conic-gradient(#fff 0 25%,transparent 0 50%) 0 0/8px 8px;}
.fc-record{--fc-bg:radial-gradient(90% 90% at 12% 30%,rgba(255,214,90,.42),transparent 60%),linear-gradient(150deg,#2B1B00,#5E3D00 55%,#9A6500);--fc-glow:rgba(217,154,6,.75);}
.fc-rays{left:-10%;top:-60%;width:120%;aspect-ratio:1;opacity:.18;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,#FFE9A0 0 6deg,transparent 6deg 18deg);animation:fcSpin 40s linear infinite;
  -webkit-mask:radial-gradient(closest-side,#000 20%,transparent);mask:radial-gradient(closest-side,#000 20%,transparent);}
@keyframes fcSpin{to{transform:rotate(360deg);}}
.fc-eidFitr,.fc-eidAdha{--fc-bg:radial-gradient(70% 80% at 100% 0%,rgba(242,193,78,.3),transparent 60%),linear-gradient(150deg,#053A2E,#0A5E47 55%,#12906A);--fc-glow:rgba(18,144,106,.75);}
.fc-ramadan{--fc-bg:radial-gradient(70% 80% at 100% 0%,rgba(242,193,78,.28),transparent 60%),linear-gradient(160deg,#0A0F2E,#1A2266 58%,#34308A);--fc-glow:rgba(70,70,190,.75);}
/* Mawlid, Achoura, Nouvel an musulman : même famille verte/or que l'Aïd, teintes propres */
.fc-mawlid{--fc-bg:radial-gradient(70% 80% at 100% 0%,rgba(242,193,78,.32),transparent 60%),linear-gradient(150deg,#241A05,#4A3308 55%,#7A5410);--fc-glow:rgba(154,110,16,.75);}
.fc-achoura{--fc-bg:radial-gradient(70% 80% at 100% 0%,rgba(242,193,78,.3),transparent 60%),linear-gradient(150deg,#0A2E1A,#0F5E36 55%,#189A58);--fc-glow:rgba(24,154,88,.75);}
.fc-muharram{--fc-bg:radial-gradient(70% 80% at 100% 0%,rgba(185,140,255,.3),transparent 60%),linear-gradient(150deg,#160A3E,#2E1A6E 55%,#4A2E9E);--fc-glow:rgba(74,46,158,.75);}
/* Nuit du Destin, Isra wal Mi'raj : nuit sobre, presque sans lueur — ce sont des nuits de recueillement */
:is(.fc-qadr,.fc-isra){--fc-bg:radial-gradient(70% 80% at 100% 0%,rgba(140,156,255,.22),transparent 60%),linear-gradient(160deg,#05050F,#0A0A28 55%,#12123D);--fc-glow:rgba(20,20,60,.6);}
/* Journée du sport : énergique, bleu vers orange */
.fc-sportDay{--fc-bg:radial-gradient(70% 80% at 100% 0%,rgba(255,168,61,.3),transparent 60%),linear-gradient(150deg,#051A2E,#0A3D6B 55%,#1477C4);--fc-glow:rgba(20,119,196,.7);}
.fc-moon{width:34px;right:12px;top:10px;opacity:.95;}
:is(.fc-eidFitr,.fc-eidAdha,.fc-ramadan,.fc-mawlid,.fc-achoura,.fc-muharram) .fc-txt b{padding-inline-end:34px;}
.fc-halloween .fc-txt b{padding-inline-end:30px;}
.fc-stars{inset:0;opacity:.75;background:
  radial-gradient(circle at 18% 22%,#FFE9A0 0 1.2px,transparent 1.8px),radial-gradient(circle at 62% 14%,#fff 0 1px,transparent 1.6px),
  radial-gradient(circle at 78% 70%,#FFE9A0 0 1.3px,transparent 1.9px),radial-gradient(circle at 44% 84%,#fff 0 .9px,transparent 1.5px),
  radial-gradient(circle at 90% 40%,#fff 0 1px,transparent 1.6px);animation:fxTwinkle 2.6s ease-in-out infinite alternate;}
.fc-xmas{--fc-bg:radial-gradient(90% 80% at 0% 0%,rgba(255,255,255,.12),transparent 60%),linear-gradient(150deg,#0B3A26 0%,#11593A 55%,#1E7A45 100%);--fc-glow:rgba(30,122,69,.75);}
.fc-snow{inset:0;opacity:.7;background:
  radial-gradient(circle at 10% 20%,#fff 0 1.6px,transparent 2.2px),radial-gradient(circle at 34% 70%,#fff 0 1.1px,transparent 1.7px),
  radial-gradient(circle at 58% 18%,#fff 0 1.3px,transparent 1.9px),radial-gradient(circle at 80% 58%,#fff 0 1.8px,transparent 2.4px),
  radial-gradient(circle at 92% 18%,#fff 0 1px,transparent 1.6px),radial-gradient(circle at 70% 88%,#fff 0 1.2px,transparent 1.8px);}
.fc-tree{bottom:-6px;opacity:.5;}
.fc-tree.t1{width:34px;right:10px;} .fc-tree.t2{width:24px;right:40px;bottom:-8px;opacity:.35;}
.fc-newyear{--fc-bg:radial-gradient(80% 80% at 100% 0%,rgba(245,197,66,.3),transparent 60%),linear-gradient(160deg,#0A0E26,#1B2156 60%,#3A2E7A);--fc-glow:rgba(90,80,200,.7);}
.fc-halloween{--fc-bg:radial-gradient(80% 70% at 88% 100%,rgba(255,138,31,.42),transparent 62%),linear-gradient(160deg,#120A1F,#2A1142 55%,#4B1A57);--fc-glow:rgba(160,60,200,.7);}
.fc-web{width:64px;right:-2px;top:-2px;}
.fc-spider{width:20px;right:20px;top:0;animation:fcSpider 3.6s ease-in-out infinite;}
.fc-spider b{position:absolute;left:50%;bottom:70%;width:1px;height:60px;background:rgba(255,255,255,.5);}
.fc-spider svg{transform:rotate(180deg);}
@keyframes fcSpider{0%,100%{transform:translateY(4px);}50%{transform:translateY(12px);}}
html[dir="rtl"] :is(.fc-moon,.fc-web,.fc-spider,.fc-tree,.fc-bal){right:auto;left:10px;}
html[dir="rtl"] .fc-web{left:-2px;transform:scaleX(-1);}
html[dir="rtl"] .fc-spider{left:20px;} html[dir="rtl"] .fc-tree.t2,html[dir="rtl"] .fc-bal.b2{left:40px;}
html.easy-mode .fete-card{min-height:0;}
.fete-try{margin-top:12px;}
.fete-try > span{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:8px;}
html.easy-mode .fete-card *,.fete-card.off *{animation:none !important;}

/* ---------- micro-animations des dessins (SVG) ---------- */
.fx-tw{transform-box:fill-box;transform-origin:50% 50%;animation:fxTw 2.4s ease-in-out infinite;}
@keyframes fxTw{0%,100%{transform:scale(1) rotate(0);opacity:1;}50%{transform:scale(.8) rotate(16deg);opacity:.8;}}
.fx-blink{animation:fxBlink 1.8s ease-in-out infinite;}
@keyframes fxBlink{0%,100%{opacity:1;}50%{opacity:.55;}}
.fx-eyes{transform-box:fill-box;transform-origin:50% 50%;animation:fxEyes 4.4s infinite;}
@keyframes fxEyes{0%,45%,51%,100%{transform:scaleY(1);}48%{transform:scaleY(.12);}}
.fx-glow{animation:fxGlow 2.2s ease-in-out infinite;}
@keyframes fxGlow{0%,100%{opacity:1;}30%{opacity:.78;}55%{opacity:.95;}70%{opacity:.7;}}
.fx-flame{transform-box:fill-box;transform-origin:50% 100%;animation:fxFlame .9s ease-in-out infinite alternate;}
.fx-flame:nth-of-type(2n){animation-duration:.7s;animation-delay:-.3s;}
@keyframes fxFlame{from{transform:scale(1,1) rotate(-4deg);}to{transform:scale(.86,1.12) rotate(4deg);}}
.fx-wave{transform-box:fill-box;transform-origin:0 50%;animation:fxWave 1.4s ease-in-out infinite alternate;}
@keyframes fxWave{from{transform:skewY(-6deg) scaleX(.96);}to{transform:skewY(5deg) scaleX(1);}}

/* ---------- calque des fêtes ---------- */
#ikFete{position:fixed;inset:0;z-index:9990;pointer-events:none;overflow:hidden;contain:layout paint;--navh:62px;}
#ikFete .fx{position:absolute;left:0;top:0;will-change:transform;}
#ikFete i{display:block;}
#ikFete svg{display:block;width:100%;height:auto;overflow:visible;}
html.easy-mode #ikFete{display:none;}
@media (prefers-reduced-motion: reduce){ #ikFete *,.fete-card *{animation:none !important;} }
/* personnages posés sur la barre du bas ; ils descendent avec elle et s'effacent sous l'îlot */
.fx-gnd{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 5px + var(--navh));display:flex;align-items:flex-end;gap:1px;
  transition:transform .38s var(--ease-spring,cubic-bezier(.3,1.3,.5,1)),opacity .3s ease;}
.fx-gnd.l{left:max(20px,env(safe-area-inset-left));} .fx-gnd.r{right:max(20px,env(safe-area-inset-right));}
.fx-gnd .fx-it{flex:none;filter:drop-shadow(0 6px 6px rgba(0,0,0,.28));}
.fx-gnd .fx-it.flip svg,.fx-walker.rtl svg,.fx-bat.rtl svg{transform:scaleX(-1);}
#nav.nav-hidden ~ #ikFete .fx-gnd{transform:translateY(calc(var(--navh) - 2px));}
body.isl-on.isl-low #ikFete .fx-gnd{opacity:0;transform:translateY(14px);}
.fx-sway{transform-origin:50% 100%;animation:fxSway 2.8s ease-in-out infinite alternate;}
@keyframes fxSway{from{transform:rotate(-6deg);}to{transform:rotate(6deg);}}
/* marcheurs : le corps sautille, les pattes vont et viennent */
.fx-bob{animation:fxBob .46s ease-in-out infinite alternate;}
@keyframes fxBob{from{transform:translateY(0);}to{transform:translateY(-3px);}}
.fx-hop{transform-origin:50% 100%;animation:fxHop 1.15s cubic-bezier(.3,0,.4,1) infinite;}
@keyframes fxHop{0%,100%{transform:translateY(0) scale(1,1);}14%{transform:translateY(0) scale(1.1,.88);}46%{transform:translateY(-26px) scale(.94,1.07);}78%{transform:translateY(0) scale(1.08,.92);}88%{transform:translateY(0) scale(.98,1.02);}}
.fx-walker .fx-leg-a,.fx-walker .fx-leg-b{transform-box:fill-box;transform-origin:50% 0;animation:fxLeg .46s ease-in-out infinite alternate;}
.fx-walker .fx-leg-b{animation-direction:alternate-reverse;}
@keyframes fxLeg{from{transform:rotate(-12deg);}to{transform:rotate(12deg);}}
/* araignées */
.fx-thread{position:absolute;left:50%;bottom:62%;width:1px;height:200vh;margin-left:-.5px;background:rgba(255,255,255,.5);}
html[data-mode="light"] .fx-thread,html[data-mode="light"] .fc-spider b{background:rgba(30,30,40,.4);}
.fx-drop .fx-spin svg{transform:rotate(180deg);}
.fx-drop .fx-leg-a,.fx-drop .fx-leg-b,.fx-run .fx-leg-a,.fx-run .fx-leg-b{transform-box:fill-box;animation:fxLegS .7s ease-in-out infinite alternate;}
.fx-drop .fx-leg-a,.fx-run .fx-leg-a{transform-origin:100% 40%;} .fx-drop .fx-leg-b,.fx-run .fx-leg-b{transform-origin:0 40%;animation-direction:alternate-reverse;}
.fx-run .fx-leg-a,.fx-run .fx-leg-b{animation-duration:.11s;}
@keyframes fxLegS{from{transform:rotate(-7deg);}to{transform:rotate(7deg);}}
/* chauves-souris */
.fx-flap{animation:fxBob .3s ease-in-out infinite alternate;}
.fx-wl,.fx-wr{transform-box:fill-box;animation:fxFlapL .2s ease-in-out infinite alternate;}
.fx-wl{transform-origin:100% 40%;} .fx-wr{transform-origin:0 40%;animation-name:fxFlapR;}
@keyframes fxFlapL{from{transform:rotate(-24deg) scaleY(.9);}to{transform:rotate(18deg) scaleY(1);}}
@keyframes fxFlapR{from{transform:rotate(24deg) scaleY(.9);}to{transform:rotate(-18deg) scaleY(1);}}
.fx-float{animation:fxFloat 1.7s ease-in-out infinite alternate;}
@keyframes fxFloat{from{transform:translateY(-6px) rotate(-3deg);}to{transform:translateY(8px) rotate(3deg);}}
/* yeux dans le noir */
.fx-eyes2{display:flex;gap:9px;}
.fx-eyes2 i{width:13px;height:8px;border-radius:50%;background:#FFE14D;box-shadow:0 0 10px 3px rgba(255,190,40,.75);animation:fxEyes 1.3s .5s 2 both;}
.fx-eyes2 i:first-child{clip-path:polygon(0 42%,100% 0,100% 100%,0 100%);} .fx-eyes2 i:last-child{clip-path:polygon(0 0,100% 42%,100% 100%,0 100%);}
/* feux d'artifice, étoiles, étoile filante */
.fx-fw{width:0;height:0;}
.fx-fw i{position:absolute;left:-2px;top:-7px;width:4px;height:14px;border-radius:3px;background:currentColor;box-shadow:0 0 8px currentColor;}
.fx-fw b{position:absolute;left:-22px;top:-22px;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle,#fff,rgba(255,255,255,0) 62%);}
.fx-star{filter:drop-shadow(0 0 4px rgba(255,210,90,.8));}
.fx-shoot{width:120px;height:2px;margin-top:-1px;border-radius:2px;transform-origin:100% 50%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,248,220,.95));}
.fx-shoot::after{content:'';position:absolute;right:-3px;top:-3px;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 12px 4px rgba(255,236,170,.85);}
html[data-mode="light"] .fx-shoot{background:linear-gradient(90deg,rgba(200,150,30,0),rgba(200,150,30,.9));}
html[data-mode="light"] .fx-shoot::after{background:#E0A82E;}
/* silhouettes des cartes de programmes : images (voir anatomyImg) */
.mus-body .mus-fig{width:50%;height:auto;display:block;pointer-events:none;-webkit-user-select:none;user-select:none;}

/* ÎLOT QUI SE DÉPLACE (V3.5.0) — capsule en bas (défaut) ou en haut, ou bulle dans un coin */
#ikIsland,#ikIsland *{touch-action:none;}
#ikIsland .isl-drag{display:flex;align-items:center;gap:8px;width:100%;will-change:transform;}
#ikIsland.dragging .isl-main,#ikIsland.dragging .isl-mini{box-shadow:0 26px 44px -14px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.16),0 0 34px -4px color-mix(in srgb,var(--isl-c) 80%,transparent);}
#ikIsland[data-pos="top"]{bottom:auto;top:calc(env(safe-area-inset-top) + 8px);transform:translate(-50%,-26px) scale(.55,.4);transform-origin:50% 0;}
#ikIsland[data-pos="top"].on{transform:translate(-50%,0) scale(1);}
#ikIsland.bub{width:auto;left:auto;right:auto;transform:scale(.3);transform-origin:50% 50%;}
#ikIsland.bub.on{transform:none;}
#ikIsland[data-pos="bl"]{left:14px;} #ikIsland[data-pos="br"]{right:14px;}
#ikIsland[data-pos="tl"],#ikIsland[data-pos="tr"]{bottom:auto;top:calc(env(safe-area-inset-top) + 70px);}
#ikIsland[data-pos="tl"]{left:14px;} #ikIsland[data-pos="tr"]{right:14px;}
#nav.nav-hidden ~ #ikIsland[data-pos="top"],#nav.nav-hidden ~ #ikIsland[data-pos="tl"],#nav.nav-hidden ~ #ikIsland[data-pos="tr"]{bottom:auto;}
#ikIsland.bub .isl-main{display:none;}
#ikIsland.bub .isl-mini{display:flex;flex-direction:column;gap:1px;width:64px;height:70px;border-radius:24px;animation:islPop .5s var(--ease-spring);}
#ikIsland.bub .isl-mini .isl-ring{width:40px;height:40px;}
.isl-mt{display:none;font-size:10.5px;font-weight:700;letter-spacing:-.3px;color:#fff;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;}
#ikIsland.bub .isl-mt{display:block;}

/* MOLETTES LIBRES (V3.5.0) — thème et matière. Le curseur est une molette crantée (stries
   verticales, relief) ; la piste montre ce qu'on parcourt. Les crans sont doux : la molette
   s'y pose d'elle-même, avec une petite vibration. */
.iks{position:relative;padding:2px 0 0;}
.iks input[type="range"]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:46px;margin:0;background:transparent;cursor:pointer;touch-action:pan-y;}
.iks input[type="range"]:focus{outline:none;}
.iks input[type="range"]::-webkit-slider-runnable-track{height:16px;border-radius:999px;background:var(--iks-track);box-shadow:inset 0 1px 3px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.08),0 1px 0 rgba(255,255,255,.06);}
.iks input[type="range"]::-moz-range-track{height:16px;border-radius:999px;background:var(--iks-track);}
.iks input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:30px;height:38px;margin-top:-11px;border-radius:11px;border:0;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.2) 0 1.2px,rgba(255,255,255,0) 1.2px 3.6px),linear-gradient(90deg,#9aa2ad,#f4f6f9 32%,#ffffff 50%,#e4e8ed 68%,#8d95a0);
  box-shadow:0 8px 16px -6px rgba(0,0,0,.6),0 2px 4px -1px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 3px rgba(0,0,0,.25);transition:transform .15s var(--ease-spring,ease);}
.iks input[type="range"]::-moz-range-thumb{width:30px;height:38px;border-radius:11px;border:0;background:linear-gradient(90deg,#9aa2ad,#fff 50%,#8d95a0);}
.iks input[type="range"]:active::-webkit-slider-thumb{transform:scale(1.08,1.04);}
.iks-lum{--iks-track:linear-gradient(90deg,#05070a 0%,#262c36 49.4%,rgba(var(--e-rgb),.9) 49.6%,rgba(var(--e-rgb),.9) 50.4%,#c9ced6 50.6%,#f7f9fc 100%);}
.iks-ends{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:2px;font-size:12px;color:var(--muted);font-weight:600;}
.iks-ends span{display:inline-flex;align-items:center;gap:5px;}
.iks-ends b{font-size:12.5px;font-weight:800;color:var(--snow);text-align:center;}
.iks-mat{--iks-track:linear-gradient(90deg,rgba(var(--e-rgb),.95) 0%,rgba(var(--e-rgb),.55) 14%,#59606b 33.3%,rgba(150,190,255,.5) 58%,rgba(210,230,255,.75) 66.6%,#ff7ad9 84%,#7fe3ff 100%);}
.iks-ticks{position:relative;height:58px;margin-top:4px;}
.iks-tick{position:absolute;top:0;inset-inline-start:calc(15px + (100% - 30px) * var(--i) / 3);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:5px;
  border:0;background:none;padding:0;cursor:pointer;font:700 11px 'Inter',system-ui,sans-serif;color:var(--muted);width:76px;text-align:center;line-height:1.15;}
html[dir="rtl"] .iks-tick{transform:translateX(50%);}
.iks-tick:first-child{inset-inline-start:0;transform:none;align-items:flex-start;text-align:start;}
.iks-tick:last-child{inset-inline-start:auto;inset-inline-end:0;transform:none;align-items:flex-end;text-align:end;}
.iks-tick .mat-ico{width:26px;height:26px;border-radius:9px;flex:none;}
.iks-tick.on{color:var(--snow);}
.iks-tick.on .mat-ico{box-shadow:0 0 0 2px var(--e),0 0 12px rgba(var(--e-rgb),.5);}
html[data-mode="light"] .iks input[type="range"]::-webkit-slider-runnable-track{box-shadow:inset 0 1px 3px rgba(20,30,50,.3),inset 0 0 0 1px rgba(20,30,50,.08);}