/* Séance de Ben · direction B « Fonte » : graphite chaud, craie, braise orange, chiffres géants.
   Tailles en rem : 1rem = 16px à 390 px de large (iPhone standard), l'écran entier s'adapte aux autres tailles. */
*{box-sizing:border-box;margin:0}
:root{
  --bg:#171513;--s1:#211E1B;--s2:#2D2925;--s3:#413A33;--line:#3C362F;
  --tx:#F5F0E6;--tx2:#C0B6A5;--tx3:#8A8171;
  --hot:#FF5A2B;--hot2:#FF8A2B;--amb:#FFB62E;--ink:#1B0F09;--ok:#A8DB86;
  --cd:'Avenir Next Condensed','DIN Condensed','Arial Narrow',sans-serif;
  --body:'Avenir Next',-apple-system,'SF Pro Text',system-ui,sans-serif;
  --top:max(env(safe-area-inset-top),14px);
  --bot:env(safe-area-inset-bottom);
  --slabH:clamp(9.25rem,21vh,11.125rem);
}
html{font-size:min(4.1026vw,18px);background:var(--bg);-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--tx);font-family:var(--body);overscroll-behavior:none;-webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-touch-callout:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--amb);outline-offset:2px}
svg.i{width:1.5rem;height:1.5rem;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
svg.i.f{fill:currentColor;stroke:none}
svg.i.b{stroke-width:3}
.cd{font-family:var(--cd);font-weight:800;font-style:italic;letter-spacing:-.005em;font-feature-settings:"tnum"}

#app{position:fixed;inset:0;max-width:30rem;margin:0 auto;overflow:hidden;background:var(--bg)}
#app::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.024) 0 2px,transparent 2px 7px);pointer-events:none;z-index:0}
#view{position:absolute;inset:0}
.scr{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;padding:calc(var(--top) + .5rem) 1.25rem calc(var(--slabH) + var(--bot) + 1rem);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.scr::-webkit-scrollbar{display:none}
.scr.home{padding-bottom:calc(10.5rem + var(--bot))}
.scr.enter{animation:viewIn .34s cubic-bezier(.2,.8,.2,1) both}

/* barre du haut des écrans de liste */
.meta{display:flex;align-items:center;gap:.6rem;font-size:.97rem;font-weight:600;color:var(--tx2);min-height:2.25rem}
.meta .sp{flex:1}
.box{position:relative;border:1.5px solid var(--tx3);border-radius:4px;padding:.19rem .56rem;font-size:.84rem;color:var(--tx);font-weight:700;white-space:nowrap}
.box::after{content:"";position:absolute;inset:-.6rem -.4rem}
.key{width:2.875rem;height:2.875rem;border-radius:6px;background:var(--s2);border:1px solid var(--line);display:grid;place-items:center;color:var(--tx);flex:none}
.key.sm{width:2.75rem;height:2.75rem}
.key:active,.pm:active,.k2:active,.chip:active,.box:active{filter:brightness(1.25);transform:scale(.97)}
.title{font-size:6.125rem;line-height:.82;margin:.7rem 0 0 -.12rem;text-transform:uppercase;letter-spacing:-.012em;overflow-wrap:anywhere}
.title.long{font-size:4.2rem}
.title.sm{font-size:4rem;margin:0}
.stt{font-size:1.06rem;font-weight:700;color:var(--tx2);margin-top:.5rem}
.when{font-size:.9rem;font-weight:700;color:var(--amb);margin-top:.5rem}
.when.miss{color:var(--hot2)}
.wnote{margin-top:.6rem;font-size:.86rem;line-height:1.35;color:var(--tx2);font-weight:600}
.wnote{padding:.1rem 0 .1rem .65rem;border-left:3px solid var(--amb)}
.wnote.lg{border-left-color:var(--ok)}

/* les 4 séances de la semaine */
.days{display:flex;gap:.4rem;margin-top:.9rem}
.dy{flex:1;height:2.75rem;transform:skewX(-14deg);background:var(--s2);border:1px solid var(--line);border-radius:4px;display:flex;align-items:center;justify-content:center;gap:.4rem;color:var(--tx2);position:relative}
.dy>*{transform:skewX(14deg)}
.dy .cd{font-size:1.15rem;text-transform:uppercase}
.dy small{font-size:.8rem;font-weight:700;opacity:.85}
.dy svg.i{width:1rem;height:1rem;stroke-width:3}
.dy.done{background:var(--s3);color:var(--tx)}
.dy.miss{border-color:var(--amb);color:var(--amb)}
.dy.sel{background:var(--tx);color:var(--ink);border-color:transparent}
.dy:active{filter:brightness(1.2)}

/* tableau de bord */
.score{display:grid;grid-template-columns:repeat(3,1fr);margin-top:.9rem;border-top:2px solid var(--tx);border-bottom:1px solid var(--line)}
.score div{padding:.56rem 0 .56rem .875rem;border-right:1px solid var(--line)}
.score div:first-child{padding-left:0}
.score div:last-child{border-right:0}
.score b{display:block;font-size:3.375rem;line-height:.92}
.score small{display:block;font-size:.78rem;color:var(--tx2);font-weight:600;margin-top:.12rem}

/* lignes d'exercices */
.strip{position:relative;display:grid;grid-template-columns:4rem 1fr auto;align-items:center;min-height:5rem;padding:.62rem 0 1.25rem;border-bottom:1px solid var(--line);animation:rise .42s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*55ms + 120ms)}
.strip .no{font-size:3.375rem;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--tx3)}
.strip .nm{position:relative;display:block;font-family:var(--cd);font-weight:800;font-style:italic;font-size:1.5625rem;line-height:.98;text-transform:uppercase;color:var(--tx);padding:.15rem 0}
.strip .nm::after{content:"";position:absolute;inset:-.6rem 0}
.strip .sub{font-size:.84rem;color:var(--tx2);font-weight:600;margin-top:.2rem;display:flex;align-items:center}
.sep{display:inline-block;width:1px;height:.7rem;background:var(--tx3);margin:0 .56rem}
.strip .w{text-align:right;padding-left:.5rem}
.strip .w b{display:block;font-size:2.625rem;line-height:.9}
.strip .w small{display:block;font-size:.76rem;color:var(--amb);font-weight:700;margin-top:.2rem}
.strip .segs{position:absolute;left:4rem;bottom:.56rem;display:flex;gap:.25rem}
.strip .segs i{width:1.25rem;height:.25rem;background:var(--s3);transform:skewX(-20deg);transition:background .3s}
.strip .segs i.on{background:var(--tx)}
.strip.tp .no{font-size:2.9rem;-webkit-text-stroke-color:var(--amb)}
.fade{position:absolute;left:0;right:0;bottom:0;height:calc(12.5rem + var(--bot));background:linear-gradient(180deg,rgba(23,21,19,0),var(--bg) 52%);z-index:5;pointer-events:none}
.cta{position:absolute;left:.875rem;right:.875rem;bottom:calc(var(--bot) + .9rem);height:4.375rem;background:var(--hot);color:var(--ink);display:flex;align-items:center;justify-content:center;gap:.9rem;font-size:2.25rem;text-transform:uppercase;transform:skewX(-10deg);border-radius:6px;z-index:6;box-shadow:0 14px 34px rgba(255,90,43,.35);font-family:var(--cd);font-weight:800;font-style:italic;animation:ctaIn .5s .35s cubic-bezier(.2,.9,.25,1) both}
.cta>*{transform:skewX(10deg)}
.cta svg{width:1.9rem;height:1.9rem}
.cta:active{transform:skewX(-10deg) scale(.98);filter:brightness(.93)}
.cta.st{background:var(--s2);color:var(--tx);box-shadow:none;border:1px solid var(--line)}

/* écran de séance */
.top2{display:grid;grid-template-columns:2.875rem 1fr auto;gap:.75rem;align-items:center;min-height:2.875rem}
.eb{display:flex;gap:.25rem}
.sg{flex:1;height:.4375rem;background:var(--s3);transform:skewX(-20deg);position:relative;padding:0}
.sg::after{content:"";position:absolute;inset:-1.25rem -.12rem}
.sg.on{background:var(--tx)}
.sg.cur{background:linear-gradient(90deg,var(--hot) calc(var(--f,0)*100%),var(--s3) 0)}
.sg.tpx{box-shadow:inset 0 0 0 1px var(--amb)}
.sg.tpx.on,.sg.tpx.cur{background:var(--amb)}
.sg:disabled{cursor:default}
.clk{text-align:right;line-height:1}
.clk .cd{display:block;font-size:2rem}
.clk small{display:block;font-size:.75rem;font-weight:700;color:var(--amb);margin-top:.12rem;white-space:nowrap}
.h2{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:1rem}
.h2 .nm{font-family:var(--cd);font-weight:800;font-style:italic;font-size:3.5rem;line-height:.9;text-transform:uppercase;text-align:left;min-width:0;padding:0}
.h2 .nm.m{font-size:3rem}.h2 .nm.l{font-size:2.5rem}.h2 .nm.xl{font-size:2.05rem;line-height:.95}.h2 .nm.xx{font-size:1.75rem;line-height:.98}
.cam{width:3rem;height:3rem;border-radius:6px;background:var(--hot);color:var(--ink);display:grid;place-items:center;flex:none;transform:skewX(-10deg)}
.cam svg{transform:skewX(10deg);width:1.6rem;height:1.6rem}
.cam:active{filter:brightness(.92)}
.mach{font-size:.9rem;color:var(--tx2);font-weight:600;margin-top:.45rem;display:flex;align-items:center;flex-wrap:wrap}
.mach b{color:var(--amb)}
.sets{margin-top:1rem;display:flex;align-items:center;gap:.875rem}
.sets .cd{font-size:1.75rem;white-space:nowrap;text-transform:uppercase}
.sets .bars{flex:1;display:flex;gap:.375rem}
.sets .bars i{flex:1;height:.875rem;background:var(--s3);transform:skewX(-20deg);transition:background .3s}
.sets .bars i.on{background:var(--tx)}
.sets .bars i.cur{background:var(--hot);box-shadow:0 0 1rem rgba(255,90,43,.55)}
.sets .bars i.nx{background:transparent;border:2px solid var(--hot)}
.giant{display:flex;justify-content:center;align-items:baseline;gap:.6rem;margin-top:.4rem;line-height:.8}
.giant .cd{font-size:calc(min(12.875rem,23.5vh)*var(--gs,1));letter-spacing:-.02em}
.giant .cd.u{font-size:min(4rem,9vh);color:var(--tx2);letter-spacing:0}
.giant.pop #gw{animation:pop .22s ease-out}
.pmrow{display:flex;align-items:center;justify-content:space-between;margin-top:1.1rem;gap:.5rem}
.pm{width:4.875rem;height:4rem;border-radius:6px;background:var(--s2);border:1px solid var(--line);display:grid;place-items:center;color:var(--tx);flex:none}
.pm svg{width:2rem;height:2rem}
.pm.r{background:var(--tx);color:var(--ink);border-color:transparent}
.chip{display:inline-flex;align-items:center;gap:.45rem;min-height:2.125rem;padding:.2rem .8rem;border-radius:4px;background:var(--s2);border:1px solid var(--line);font-size:.9rem;font-weight:700;text-align:center;line-height:1.1}
.chip svg{width:1.05rem;height:1.05rem}
.chip.a{color:var(--amb);border-color:rgba(255,182,46,.45)}
.chip.rec{background:var(--amb);color:var(--ink);border-color:transparent;animation:pop .5s ease-out}
.chip.cl{justify-content:center;margin:.9rem auto 0;display:flex;width:max-content}
.slab{position:absolute;left:0;right:0;bottom:0;height:calc(var(--slabH) + var(--bot));background:var(--hot);clip-path:polygon(0 15%,100% 0,100% 100%,0 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;padding:1.9rem 0 calc(var(--bot) + .9rem);color:var(--ink);z-index:6;animation:slabIn .3s cubic-bezier(.2,.9,.25,1) both;text-align:center}
.slab .cd{font-size:2.625rem;line-height:.9;text-transform:uppercase;display:flex;align-items:center;gap:.75rem;white-space:nowrap}
.slab .cd svg{width:2.1rem;height:2.1rem}
.slab small{font-size:.875rem;font-weight:700;opacity:.88}
.slab:active{filter:brightness(.92)}
.slab.st{background:var(--s2);color:var(--tx)}
.slab.st::after{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--hot);clip-path:polygon(0 100%,100% 0,100% 100%,0 100%)}
.slab.go{background:var(--tx)}
.clock{display:flex;justify-content:center;align-items:baseline;margin-top:.6rem;line-height:.8}
.clock .cd{font-size:min(11.125rem,19.5vh);letter-spacing:-.025em;background:linear-gradient(180deg,#FFD25E,var(--hot) 92%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.7rem}
.clock.sm .cd{font-size:min(6rem,12vh)}
.clock.wide .cd{font-size:min(8rem,16vh)}
.li .v small{white-space:nowrap}
.clock.urgent .cd{animation:beat .5s ease-in-out infinite}
.lbl{display:flex;justify-content:space-between;align-items:baseline;margin-top:.875rem}
.lbl .cd{font-size:1.75rem;text-transform:uppercase;color:var(--tx2)}
.lbl span{font-size:.875rem;color:var(--tx2);font-weight:600}
.drain{height:.875rem;background:var(--s3);margin-top:.5rem;transform:skewX(-20deg);overflow:hidden}
.drain u{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--amb),var(--hot));transform-origin:left center;transform:scaleX(var(--f,1));transition:transform .3s linear}
.keys{display:flex;gap:.6rem;margin-top:.875rem}
.k2{flex:1;height:3.375rem;border-radius:6px;background:var(--s2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--cd);font-weight:800;font-style:italic;font-size:1.875rem;text-transform:uppercase;color:var(--tx)}
.k2 svg{width:1.4rem;height:1.4rem}
.k2.w{background:var(--tx);color:var(--ink);border-color:transparent}
.k2.h{background:var(--hot);color:var(--ink);border-color:transparent}
.k2.n{flex:0 0 3.375rem}
.k2.sm{font-size:1.55rem}
.row .keys .k2{flex:1;padding:0 .25rem;font-size:1.25rem}
.k2.d{color:var(--hot2)}
.upn{margin-top:.75rem;padding:.7rem 0 0;border-top:2px solid var(--tx);display:flex;justify-content:space-between;align-items:flex-end;gap:.75rem}
.upn small{display:block;font-size:.8rem;color:var(--tx2);font-weight:600}
.upn .cd{font-size:2.125rem;line-height:1;text-transform:uppercase}
.upn .cd.sm{font-size:1.55rem;line-height:1.02}
.upn .r{text-align:right;flex:none}
.still *,.still *::before,.still *::after{animation:none!important;transition:none!important}
.upn .r .cd{font-size:2.875rem}
/* prochain exercice : nom sur 2 lignes au plus, « à régler » discret, pour que rien ne passe sous le gros bouton */
.upn>div:first-child{min-width:0}
.upn .cd.sm{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.upn .r .cd.na{font-size:1.5rem;color:var(--amb)}
/* « Annuler la série N » : action de rattrapage, plus discrète que les touches de temps à côté */
.k2.un{flex:0 0 auto;gap:.45rem;padding:0 .8rem 0 .65rem;background:transparent;color:var(--tx2);font-size:1.3rem;line-height:1}
.k2.un svg{width:1.2rem;height:1.2rem}
.k2.un span{display:flex;flex-direction:column;align-items:flex-start}
.k2.un small{font:700 .72rem/1.15 var(--body);text-transform:none;letter-spacing:0}
/* repos fini tout seul : depuis combien de temps (le repos ne s'allonge pas en douce) */
.over{margin-top:1rem;text-align:center;font-size:1.05rem;font-weight:800;color:var(--amb);font-variant-numeric:tabular-nums}

/* mouvement : chaque animation raconte un changement. Nouvel écran = tout entre ; nouvelle étape (lancer, finir, repos) = le contenu
   glisse et la série finie se remplit ; une simple mise à jour (+15 s, charge, retour d'une fenêtre) ne rejoue rien. */
#view.calme .strip,#view.calme .wk,#view.calme .cta,#view.calme:not(.chg) .slab{animation:none}
#view.chg .ph-c{animation:phIn .24s cubic-bezier(.2,.8,.2,1) both}
#view.chg .sets .bars i.new{transform-origin:left center;animation:fill .38s cubic-bezier(.2,.8,.2,1) both}
.ph-work .sets .bars i.cur{animation:respire 1.4s ease-in-out infinite}

/* fenêtre du bas (photo, modifier, quitter) */
#sheet{position:absolute;inset:0;z-index:40}
#sheet[hidden]{display:none}
.ov{position:absolute;inset:0;background:rgba(10,9,8,.68);animation:fade .2s both}
.sheet{position:absolute;left:0;right:0;bottom:var(--kb,0px);max-height:calc(92% - var(--kb,0px));display:flex;flex-direction:column;background:var(--bg);border-top:3px solid var(--hot);animation:up .4s cubic-bezier(.2,.9,.25,1) both;overflow:hidden}
.sheet.closing{animation:down .2s ease-in both}
.sheet .bd{overflow-y:auto;padding:1rem 1.25rem calc(var(--bot) + 1.1rem);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sheet .bd::-webkit-scrollbar{display:none}
.ph{position:relative;height:min(15.625rem,30vh);overflow:hidden;flex:none;background:var(--s1)}
.ph img{width:100%;height:100%;object-fit:cover;display:block;animation:kb .8s cubic-bezier(.2,.8,.2,1) both}
.ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,21,19,.1) 35%,rgba(23,21,19,.94) 100%)}
.ph h2{position:absolute;left:1.25rem;right:1.25rem;bottom:.75rem;z-index:2;font-size:2.9rem;line-height:.88;text-transform:uppercase}
.ph h2.l{font-size:2.2rem}
.ph .x{position:absolute;right:1rem;top:.9rem;z-index:3;background:rgba(23,21,19,.6)}
.ph.none{display:grid;place-items:center;background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 2px,transparent 2px 7px),var(--s1)}
.ph.none>svg{width:4rem;height:4rem;color:var(--tx3);stroke-width:1.5;margin-bottom:2rem}
.tg{display:flex;flex-wrap:wrap;gap:.5rem}
.tg span{font-size:.84rem;font-weight:700;padding:.3rem .62rem;border-radius:4px;background:var(--s2);border:1px solid var(--line);color:var(--tx2)}
.fn{font-size:.8rem;color:var(--tx3);margin-top:.6rem;line-height:1.35}
.alt{width:100%;text-align:left;margin-top:1rem;border-top:2px solid var(--tx);padding-top:.75rem;display:flex;align-items:center;gap:.875rem}
.alt img,.alt .ni{width:5.75rem;height:3.875rem;object-fit:cover;border-radius:3px;background:var(--s2);flex:none}
.alt small{display:block;font-size:.8rem;color:var(--amb);font-weight:700}
.alt .cd{font-size:1.69rem;line-height:1;text-transform:uppercase;margin-top:.12rem;display:block}
.alt svg{margin-left:auto;color:var(--tx3)}
.acts{display:flex;gap:.6rem;margin-top:1.1rem}
.acts .k2{height:3.6rem;font-size:1.7rem;white-space:nowrap;padding:0 .5rem}
.acts .k2.f{flex:1.7}
.acts.col{flex-direction:column}
.acts.col .k2{flex:none;height:3.6rem}
.acts.col .k2.d{height:3.2rem;font-size:1.45rem}
details{margin-top:.9rem;border-top:1px solid var(--line)}
summary{list-style:none;display:flex;align-items:center;justify-content:space-between;padding:.7rem 0;font-weight:700;font-size:.92rem;color:var(--tx2);cursor:pointer}
summary::-webkit-details-marker{display:none}
summary svg{transition:transform .2s}
details[open] summary svg{transform:rotate(90deg)}
details p{font-size:.88rem;line-height:1.45;color:var(--tx2);margin-bottom:.7rem}
details p b{color:var(--amb)}
.sh-t{font-size:2.6rem;line-height:.9;text-transform:uppercase}
.sh-t.sm{font-size:2.25rem}
.sh-p{font-size:.95rem;color:var(--tx2);line-height:1.4;margin-top:.5rem}
.fld{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.7rem 0;border-bottom:1px solid var(--line)}
.fld .l{font-family:var(--cd);font-weight:800;font-style:italic;font-size:1.35rem;text-transform:uppercase;flex:none}
.fld input[type=text],.sheet textarea{background:var(--s2);border:1px solid var(--line);border-radius:6px;color:var(--tx);font:inherit;font-size:max(16px,1.05rem);font-weight:600;padding:.6rem .7rem;width:100%;user-select:text;-webkit-user-select:text}
.fld input[type=text]{width:60%;text-align:right}
.sheet textarea{margin-top:.75rem;min-height:9rem;font-size:max(16px,1rem);font-family:ui-monospace,Menlo,monospace;font-weight:500}
.stp{display:flex;align-items:center;gap:.4rem}
.stp button{width:2.75rem;height:2.75rem;border-radius:6px;background:var(--s2);border:1px solid var(--line);display:grid;place-items:center}
.stp button.r{background:var(--tx);color:var(--ink);border-color:transparent}
.stp output{min-width:4.6rem;text-align:center;font-family:var(--cd);font-weight:800;font-style:italic;font-size:1.75rem}
.stp button:active{filter:brightness(1.25)}
.fld .stp .kgf{width:6.4rem;min-height:2.75rem;padding:.2rem .4rem;text-align:center;font-family:var(--cd);font-weight:800;font-style:italic;font-size:1.75rem;letter-spacing:.01em}
.giant.tap{cursor:pointer;-webkit-tap-highlight-color:transparent}
.giant.tap:active .cd:not(.u){filter:brightness(1.2)}

/* semaines et réglages */
.back{display:flex;align-items:center;gap:.75rem}
.wk{display:grid;grid-template-columns:3.6rem 1fr;gap:.2rem .5rem;padding:.9rem 0 1rem;border-bottom:1px solid var(--line);animation:rise .4s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*60ms)}
.wk .no{font-size:3rem;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--tx3);grid-row:span 3}
.wk.now .no{-webkit-text-stroke-color:var(--hot)}
.wk .d1{font-size:.95rem;font-weight:700;color:var(--tx)}
.wk .d1 em{font-style:normal;color:var(--amb);margin-left:.5rem;font-size:.8rem}
.wk .d1 em.lg{color:var(--ok)}
.wk .wn{grid-column:2;font-size:.82rem;line-height:1.35;color:var(--tx2);font-weight:600}
.wk .wn.lg{color:var(--ok)}
.wk .days{margin-top:.5rem;grid-column:2}
.wk .dy{flex-direction:column;gap:.05rem;line-height:1;min-width:0}
.wk .dy .cd{font-size:1.05rem}
.bil{margin-top:1.1rem;padding:.9rem 0 0;border-top:2px solid var(--tx);font-size:.9rem;line-height:1.45;color:var(--tx2)}
.bil b{color:var(--tx)}
.row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.85rem 0;border-bottom:1px solid var(--line)}
.row .l{font-size:1rem;font-weight:700}
.row small{display:block;font-size:.78rem;color:var(--tx3);font-weight:600;margin-top:.15rem;line-height:1.3}
.row .k2{flex:none;height:2.75rem;font-size:1.3rem;padding:0 1rem}
.dg{margin-top:1.4rem;font-size:.8rem;color:var(--tx3);line-height:1.5}
/* réglages propres : 4 blocs titrés, interrupteurs ronds avec « Allumé » ou « Éteint » écrit, mêmes boutons partout */
.grp{font-family:var(--cd);font-weight:800;font-style:italic;font-size:1.2rem;line-height:1;text-transform:uppercase;letter-spacing:.06em;color:var(--hot);margin:1.6rem 0 0;padding-bottom:.45rem;border-bottom:2px solid var(--tx)}
.back+.grp{margin-top:1rem}
.tgl{display:flex;align-items:center;justify-content:flex-end;gap:.65rem;min-width:7.4rem;height:2.75rem;flex:none;padding:0;background:none;border:0;color:var(--tx3);font-family:var(--cd);font-weight:800;font-style:italic;font-size:1.25rem;text-transform:uppercase;letter-spacing:.03em;-webkit-tap-highlight-color:transparent}
.tgl::before{content:"Éteint"}
.tgl[aria-checked=true]{color:var(--hot2)}
.tgl[aria-checked=true]::before{content:"Allumé"}
.tgl i{position:relative;display:block;flex:none;width:3.2rem;height:1.95rem;border-radius:999px;background:var(--s3);transition:background .2s}
.tgl i::after{content:"";position:absolute;top:.2rem;left:.2rem;width:1.55rem;height:1.55rem;border-radius:50%;background:var(--tx);box-shadow:0 1px 3px rgba(0,0,0,.5);transition:transform .22s cubic-bezier(.2,.9,.25,1)}
.tgl[aria-checked=true] i{background:var(--hot)}
.tgl[aria-checked=true] i::after{transform:translateX(1.25rem)}
.kgbox{display:flex;align-items:center;gap:.45rem;flex:none}
.kgbox .kgf{width:5.8rem;min-height:2.75rem;padding:.2rem .5rem;text-align:center;background:var(--s2);border:1px solid var(--line);border-radius:6px;color:var(--tx);font-family:var(--cd);font-weight:800;font-style:italic;font-size:1.75rem}
.kgbox .kgf::placeholder{color:var(--tx3)}
.kgbox span{font-family:var(--cd);font-weight:800;font-style:italic;font-size:1.3rem;color:var(--tx2)}
.row.col{flex-direction:column;align-items:stretch;gap:.7rem}
.duo{display:flex;gap:.6rem}
.row .duo .k2{flex:1;height:2.75rem;font-size:1.3rem;padding:0 1rem}
.zone{margin-top:1.8rem;display:flex;flex-direction:column;gap:.55rem}
.zone small{font-size:.78rem;color:var(--tx3);font-weight:600;line-height:1.3;text-align:center}
.k2.rouge{flex:none;width:100%;height:3.1rem;font-size:1.4rem;color:#FF6B5B;background:rgba(255,80,60,.08);border-color:rgba(255,80,60,.55)}
.giant.ask{display:block;text-align:center}
.giant.ask .cd{display:block;font-size:min(5.4rem,11.5vh);line-height:.9;letter-spacing:-.005em;text-transform:uppercase}
.pmrow.vide{justify-content:center}
.pmrow.vide .chip{min-height:2.6rem;font-size:1rem;padding:.4rem 1rem}
.lst{margin-top:1rem}
.li{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.7rem 0;border-bottom:1px solid var(--line)}
.li .cd{font-size:1.4rem;text-transform:uppercase;line-height:1}
.li .v{display:flex;align-items:baseline;gap:.5rem;font-family:var(--cd);font-weight:800;font-style:italic;font-size:1.7rem}
.li .v small{font-size:.8rem;font-style:normal;font-family:var(--body);font-weight:800;color:var(--amb)}
.li .v em{font-size:.85rem;font-style:normal;font-family:var(--body);font-weight:700;color:var(--tx2);margin-left:-.3rem}

/* couches : éclair de fin de repos, message */
#flash{position:absolute;inset:0;z-index:30;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 55%,rgba(255,138,43,.85),rgba(255,90,43,.35) 55%,transparent 80%)}
#flash.on{animation:flash .75s ease-out}
#toast{position:absolute;left:50%;bottom:calc(var(--slabH) + var(--bot) + .6rem);transform:translateX(-50%) skewX(-10deg);z-index:60;background:var(--tx);color:var(--ink);font-weight:800;font-size:.95rem;padding:.55rem 1rem;border-radius:5px;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.4);animation:toast 2.2s ease both}
#toast[hidden]{display:none}

@keyframes viewIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes ctaIn{from{opacity:0;transform:skewX(-10deg) translateY(30px)}to{opacity:1;transform:skewX(-10deg)}}
@keyframes slabIn{from{transform:translateY(46%);opacity:.4}to{transform:none;opacity:1}}
@keyframes respire{50%{opacity:.5}}
@keyframes phIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fill{from{transform:skewX(-20deg) scaleX(0)}to{transform:skewX(-20deg) scaleX(1)}}
@keyframes pop{0%{transform:scale(.9)}60%{transform:scale(1.06)}100%{transform:none}}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
@keyframes down{from{transform:none}to{transform:translateY(100%)}}
@keyframes kb{from{transform:scale(1.06)}to{transform:scale(1)}}
@keyframes flash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
@keyframes toast{0%{opacity:0;transform:translateX(-50%) skewX(-10deg) translateY(10px)}12%,82%{opacity:1;transform:translateX(-50%) skewX(-10deg)}100%{opacity:0}}
/* petits écrans (iPhone SE : 667 px de haut) : on resserre pour que rien ne passe sous le bouton du bas */
@media (max-height:740px){
  :root{--slabH:8.4rem}
  .slab{padding-top:1.5rem}
  .slab .cd{font-size:2.2rem}
  .clock .cd{font-size:min(8.4rem,15vh)}
  .clock.wide .cd{font-size:min(6.6rem,13vh)}
  .clock.sm .cd{font-size:min(4.6rem,9.5vh)}
  .giant .cd{font-size:calc(min(10.5rem,20vh)*var(--gs,1))}
  .upn .cd{font-size:1.75rem}
  .upn .cd.sm{font-size:1.25rem}
  .upn .r .cd{font-size:2.4rem}
  .lbl,.sets,.pmrow,.keys,.upn{margin-top:.55rem}
  .h2{margin-top:.6rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}