:root{--bg:#E8EAEE;--carte:#F7F8FA;--txt:#2C3038;--mut:#7B8290;--acc:#6E78E6;--fait:#34B27B;--bd:#D5D9E0;color-scheme:light;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
*{box-sizing:border-box}
body{margin:0 auto;background:var(--bg);color:var(--txt);font:16px/1.4 "Avenir Next","Segoe UI",system-ui,sans-serif;max-width:560px;padding:12px}
button,select,input,textarea{font:inherit;color:inherit}
header{display:flex;align-items:center;gap:6px;margin-bottom:10px}
header button{border:0;background:var(--carte);border-radius:12px;width:42px;height:42px;font-size:1.3rem;cursor:pointer}
header .titre{flex:1;width:auto;font-size:1rem;font-weight:600}
.bilan{background:var(--carte);border-radius:14px;padding:10px 14px;margin-bottom:10px;border-left:6px solid var(--acc)}
.bilan small{color:var(--mut)}
.jour{display:grid;grid-template-columns:52px 1fr;gap:8px;background:var(--carte);border-radius:14px;padding:8px;margin-bottom:8px}
.jour.auj{outline:2px solid var(--acc)}
.date{display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--mut)}
.auj .date{color:var(--acc)}
.date span{font-size:1.4rem;font-weight:700}
.seances{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.puce{display:flex;align-items:center;flex:1 1 180px;background:color-mix(in srgb,var(--c) 35%,white);border-left:6px solid var(--c);border-radius:12px;overflow:hidden}
.puce .corps{flex:1;display:flex;align-items:center;gap:8px;padding:8px 10px;border:0;background:none;text-align:left;cursor:pointer}
.puce .ico{font-size:1.5rem}
.puce b{display:block}
.puce small{color:var(--mut)}
.coche{width:36px;height:36px;margin-right:8px;border-radius:50%;border:2px solid var(--mut);background:#fff;color:#fff;font-weight:700;cursor:pointer}
.puce.fait{background:#DDF3E8;border-left-color:var(--fait)}
.puce.fait .coche{background:var(--fait);border-color:var(--fait)}
.puce.annule{opacity:.5}
.puce.annule b{text-decoration:line-through}
.plus{width:36px;height:36px;border-radius:50%;border:1px dashed var(--mut);background:none;color:var(--mut);cursor:pointer}
dialog{border:0;border-radius:18px;background:var(--carte);color:var(--txt);width:min(420px,94vw);padding:0}
dialog::backdrop{background:rgba(30,34,44,.45)}
dialog form{display:grid;gap:10px;padding:18px}
dialog h2{margin:0}
label{display:grid;gap:4px;font-size:.9rem;color:var(--mut)}
input,select,textarea{padding:10px;border:1px solid var(--bd);border-radius:10px;background:#fff;color:var(--txt)}
.btns{display:flex;gap:8px;justify-content:flex-end}
.btns button{border:0;border-radius:10px;padding:10px 14px;cursor:pointer;background:var(--bd)}
.btns .ok{background:var(--acc);color:#fff}
.btns .lien{background:none;color:var(--mut);margin-right:auto;text-decoration:underline}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.case{display:flex;align-items:center;gap:8px;color:var(--txt)}
input[type=checkbox]{width:auto;padding:0}
#wod{width:min(520px,96vw);max-height:92vh;overflow:auto}
.wod-tete,#w-liste,#wod .pied{padding:14px 16px}
.wod-tete{display:grid;gap:10px;position:sticky;top:0;background:var(--carte);z-index:1}
.ex{display:grid;grid-template-columns:96px 1fr;gap:12px;background:#fff;border-radius:14px;padding:10px;margin-bottom:10px}
.ex img,.ph{width:96px;height:96px;border-radius:10px;object-fit:cover;background:#E3E1F4}
.ph{display:flex;align-items:center;justify-content:center;font-size:2rem}
.ex b{display:block}
.ex p{margin:6px 0 0;font-size:.88rem;color:var(--mut)}
.cible{display:inline-block;margin-top:4px;padding:2px 10px;border-radius:20px;background:#9C8BDD;color:#fff;font-weight:600;font-size:.85rem}
#wod .pied{flex-wrap:wrap;position:sticky;bottom:0;background:var(--carte)}
#sc{width:min(520px,96vw);max-height:92vh;overflow:auto}
#sc-nat{display:grid;gap:8px}
#sc-liste{padding:14px 16px}
#sc .pied{padding:14px 16px;flex-wrap:wrap;position:sticky;bottom:0;background:var(--carte)}
#sc-nat .sec{border:0;border-radius:10px;padding:10px 14px;cursor:pointer;background:var(--bd)}
.bloc{background:#fff;border-radius:12px;padding:10px 12px;margin-bottom:8px}
.bloc b{display:block}
.bloc span{color:var(--mut);font-size:.92rem}
.obj{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:end}
.obj .sec{grid-column:1/-1;border:0;border-radius:10px;padding:10px 14px;cursor:pointer;background:var(--bd)}
.realise{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 16px 8px}
.realise b{grid-column:1/-1}
.bloc span{white-space:pre-line}
/* --- Fenêtres : un seul défilement, mise en page commune et compacte --- */
dialog{max-height:92vh;max-height:92dvh;overflow:auto}
#wod[open],#sc[open]{display:block}
#wod .wod-tete,#sc .wod-tete{position:static;padding:14px 16px 6px}
#wod #w-liste,#sc #sc-liste{padding:6px 16px}
#wod .realise,#sc .realise{padding:6px 16px}
#wod .pied,#sc .pied{position:static;padding:10px 16px calc(14px + env(safe-area-inset-bottom))}
dialog form{padding:14px 16px;gap:8px}
dialog h2{font-size:1.15rem}
label{font-size:.85rem;gap:3px}
input,select,textarea{padding:8px 10px}
dialog .bilan{padding:8px 12px;font-size:.92rem;margin:0}
.bloc{padding:8px 10px}
.ex{grid-template-columns:72px 1fr;gap:10px;padding:8px}
.ex img,.ph{width:72px;height:72px}
.ex p{font-size:.82rem;margin-top:4px}
.btns button{padding:9px 12px}
@media (max-width:600px){
  dialog{width:100vw;max-width:100vw;margin:auto 0 0;border-radius:20px 20px 0 0;scrollbar-width:none}
  dialog::-webkit-scrollbar{display:none}
  .pied .ok{order:-1;flex:1 1 100%;padding:12px}
  .pied .lien{margin-right:0}
}
/* --- Correction : champs « Réalisé » qui dépassaient --- */
.realise,.obj{grid-template-columns:repeat(2,minmax(0,1fr))}
.realise label,.obj label{min-width:0}
input,select,textarea{min-width:0;width:100%}
dialog{overflow-x:hidden}
/* --- Barre d’outils, bilan, records --- */
.outils{display:flex;gap:6px;margin-bottom:10px}
.outils button{flex:1;border:0;border-radius:12px;background:var(--carte);padding:9px 4px;font-size:.88rem;cursor:pointer}
.corps-bil{padding:6px 16px}
#bil .wod-tete,#rec .wod-tete{position:static;padding:14px 16px 6px}
#bil .pied{padding:10px 16px calc(14px + env(safe-area-inset-bottom));flex-wrap:wrap}
#rec form{border-top:1px solid var(--bd)}
#rec h3{margin:0;font-size:1rem}
.rec-ligne{display:flex;justify-content:space-between;align-items:center;gap:8px}
.rec-ligne button{border:0;background:none;color:var(--mut);font-size:1.1rem;cursor:pointer;padding:6px}
/* --- Vue en colonnes : 7 jours côte à côte (affichage par défaut) --- */
body.large{max-width:1100px}
#jours.col{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;align-items:start}
.col .jour{display:block;margin:0;padding:6px 3px;text-align:center}
.col .date{margin-bottom:6px}
.col .date span{font-size:1.1rem}
.col .seances{flex-direction:column;gap:5px}
.col .puce{display:flex;flex-direction:column;align-items:stretch;flex:none;width:100%;border-left:0;border-top:4px solid var(--c);border-radius:10px}
.col .puce .corps{flex-direction:column;gap:0;padding:6px 0 2px;width:100%;align-items:center}
.col .puce .corps>span:last-child{display:none}
.col .puce .ico{font-size:1.3rem}
.col .coche{width:28px;height:28px;margin:2px auto 6px;font-size:.85rem}
.col .plus{width:100%;height:28px;border-radius:8px}
@media (min-width:760px){
  .col .puce .corps>span:last-child{display:block;text-align:center;font-size:.8rem}
  .col .puce b{font-size:.85rem}
}
/* --- Étape 4 : attribut hidden toujours respecté, onglets, compte --- */
[hidden]{display:none!important}
.mut{color:var(--mut);font-size:.85rem;margin:0}
#sync-statut{margin:-4px 2px 8px}
.onglets{display:flex;gap:6px}
.onglets button{flex:1;border:0;border-radius:10px;padding:8px;background:var(--bd);cursor:pointer}
.onglets .on{background:var(--acc);color:#fff}
.sect{font-weight:600;color:var(--mut);margin:10px 0 4px;font-size:.85rem}
/* --- Étape 5 : messages de l’IA --- */
#sc-msg:empty,#w-msg:empty{display:none}
#sc-msg,#w-msg{margin:0}
/* --- Étape 6 : zone de sécurité en bas (touches Android), planification, administration --- */
:root{--bas:var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));--haut:var(--safe-area-inset-top, env(safe-area-inset-top, 0px));padding:var(--haut) 0 var(--bas)}
:root.android{--bas:max(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)), 28px)}
dialog{padding-bottom:var(--bas)}
#c-admin{border:0;border-radius:10px;padding:10px 14px;cursor:pointer;background:var(--bd);width:100%}
.adm-btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.adm-btns button{border:0;border-radius:8px;padding:6px 10px;cursor:pointer;background:var(--bd);font-size:.82rem}
#adm-liste .bloc b{word-break:break-all}
#plan-resume{font-size:.92rem}
#plan-msg:empty,#bil-msg:empty{display:none}

/* ===== Étape 7a : thème sombre et décors par activité ===== */
:root{--bg:#11141A;--carte:#1B1F27;--txt:#ECEFF4;--mut:#8B93A3;--acc:#7C89FF;--fait:#3DDC97;--bd:#2C323D;--champ:#12151B;color-scheme:dark}
[data-t="course"]{--c:#E2733A;--c2:#8A5A3C;--decor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='xMaxYMax slice' fill='none' stroke='white' stroke-opacity='.16' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M-5 70 C30 55 55 75 90 58 S150 50 205 62'/%3E%3Cpath d='M-5 58 C25 44 60 62 95 46 S155 38 205 50'/%3E%3Cpath d='M-5 46 C30 34 65 50 100 34 S160 26 205 38'/%3E%3Cpath d='M-5 34 C35 24 70 38 105 22 S165 14 205 26'/%3E%3C/svg%3E");--sur:#1A0E08}
[data-t="natation"]{--c:#2BB3D6;--c2:#0B5F7A;--decor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='xMaxYMax slice' fill='none' stroke='white' stroke-opacity='.16' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M-5 60 q12 -10 25 0 t25 0 t25 0 t25 0 t25 0 t25 0 t25 0 t25 0 t25 0'/%3E%3Cpath d='M-5 48 q12 -10 25 0 t25 0 t25 0 t25 0 t25 0 t25 0 t25 0 t25 0 t25 0'/%3E%3Cpath d='M-5 36 q12 -10 25 0 t25 0 t25 0 t25 0 t25 0 t25 0 t25 0 t25 0 t25 0'/%3E%3C/svg%3E");--sur:#04222B}
[data-t="velo"]{--c:#A9DDF2;--c2:#4D8BA6;--decor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='xMaxYMax slice' fill='none' stroke='white' stroke-opacity='.16' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M10 62 H120 c14 0 14 -16 0 -16'/%3E%3Cpath d='M40 48 H170 c16 0 16 -18 0 -18'/%3E%3Cpath d='M0 34 H90 c12 0 12 -14 0 -14'/%3E%3Cpath d='M80 70 H190'/%3E%3C/svg%3E");--sur:#0B2530}
[data-t="ppg"]{--c:#4F8CFF;--c2:#1E3F8F;--decor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='xMaxYMax slice' fill='none' stroke='white' stroke-opacity='.16' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M150 4 L128 42 H146 L136 76 L172 30 H152 Z' fill='white' fill-opacity='.18' stroke='none'/%3E%3Cpath d='M178 14 L168 34 H176 L172 50'/%3E%3C/svg%3E");--sur:#04122B}
body{background:var(--bg);color:var(--txt)}
header button,.outils button{background:var(--carte);color:var(--txt)}
.bilan{background:var(--carte);border-left-color:var(--acc)}
.jour{background:var(--carte)}
input,select,textarea{background:var(--champ);color:var(--txt);border-color:var(--bd)}
option{background:var(--carte);color:var(--txt)}
.bloc,.ex{background:var(--champ)}
.ph{background:#262B36}
.btns button,.adm-btns button,#c-admin,#sc-nat .sec,.obj .sec,.onglets button{background:var(--bd);color:var(--txt)}
.btns .ok,.onglets .on{background:var(--acc);color:#0B0E14;font-weight:600}
.btns .lien{background:none;color:var(--mut)}
dialog{background:var(--carte);color:var(--txt)}
dialog::backdrop{background:rgba(5,7,10,.7)}
/* cartes de séance : barre d'accent, décor de l'élément en fond */
.puce{background:var(--decor) right bottom/auto 100% no-repeat,linear-gradient(135deg,color-mix(in srgb,var(--c) 22%,var(--carte)),var(--carte) 70%);border-left-color:var(--c);box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 28%,transparent)}
.puce .corps,.puce b{color:var(--txt)}
.puce small{color:color-mix(in srgb,var(--txt) 70%,transparent)}
.coche{background:transparent;border-color:var(--c);color:var(--sur)}
.puce.fait{background:var(--decor) right bottom/auto 100% no-repeat,linear-gradient(135deg,color-mix(in srgb,var(--fait) 28%,var(--carte)),var(--carte) 70%);border-left-color:var(--fait)}
.puce.fait .coche{background:var(--fait);border-color:var(--fait);color:#06210F}
.col .puce{border-left:0;border-top:4px solid var(--c)}
.col .puce.fait{border-top-color:var(--fait)}
.plus{border-color:var(--mut);color:var(--mut)}
.auj{outline-color:var(--acc)}
/* fenêtres de séance : en-tête dans le décor de l'activité */
#sc[data-t] .wod-tete,#wod[data-t] .wod-tete,#fiche[data-t] form>h2{background:var(--decor) right bottom/auto 100% no-repeat,linear-gradient(135deg,color-mix(in srgb,var(--c) 26%,var(--carte)),var(--carte) 75%)}
#fiche[data-t] form>h2{margin:-14px -16px 4px;padding:14px 16px}
#sc[data-t] .wod-tete h2,#wod[data-t] .wod-tete h2{color:var(--c)}
.cible{background:var(--c,#7C89FF);color:var(--sur,#0B0E14)}
#sc[data-t] .bilan,#wod[data-t] .bilan{border-left-color:var(--c)}
#sc[data-t] .btns .ok,#wod[data-t] .btns .ok,#fiche[data-t] .btns .ok{background:var(--c);color:var(--sur)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline-color:var(--c,var(--acc))}

/* ===== Étape 7b/7c : bandeau de la semaine, bilan en jauges, séance guidée ===== */
.puce{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.glisse{overflow:hidden}
.souleve{opacity:.35}
.fantome{position:fixed;z-index:1000;pointer-events:none;margin:0;box-shadow:0 12px 30px rgba(0,0,0,.55);transform:scale(1.03)}
.depot{outline:2px dashed var(--acc);outline-offset:2px}
#bandeau{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;background:var(--carte);border-radius:18px;padding:10px 6px 12px;margin-bottom:12px}
.jb{border:0;background:none;color:var(--mut);display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0 4px;border-radius:14px;cursor:pointer;min-width:0}
.jb small{font-size:.68rem;letter-spacing:.05em;text-transform:uppercase}
.jb b{font-size:1.15rem;width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--txt)}
.jb.auj b{box-shadow:inset 0 0 0 2px var(--acc)}
.jb.sel b{background:var(--txt);color:var(--bg)}
.jb .pts{display:flex;gap:3px;min-height:7px}
.jb .pts i{width:7px;height:7px;border-radius:50%;opacity:.45}
.jb .pts i.fait{opacity:1}
.bande{display:flex;flex-direction:column;gap:10px}
.bande .jt{margin:2px 2px 0;font-size:1.05rem}
.bande .puce{flex:none;border-radius:18px;min-height:76px}
.bande .puce .corps{padding:14px 12px;gap:12px}
.bande .puce .ico{font-size:1.9rem}
.bande .puce b{font-size:1.1rem}
.bande .puce small{font-size:.9rem}
.bande .coche{width:44px;height:44px;margin-right:12px;font-size:1.1rem}
.bande .repos{text-align:center;padding:18px 0}
.ajout{border:1px dashed var(--mut);background:none;color:var(--mut);border-radius:16px;padding:14px;cursor:pointer;font-size:.95rem}
/* démonstration */
a.demo,.g-demo{color:var(--c,var(--acc));font-size:.85rem;font-weight:600;text-decoration:none;display:inline-block;margin-top:6px}
/* bilan */
.hero{display:flex;gap:18px;align-items:stretch;background:var(--champ);border-radius:18px;padding:14px;margin-bottom:10px}
.jv{position:relative;width:96px;min-height:170px;border-radius:22px;background:#262B36;overflow:hidden;flex:none}
.jv i{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,#7C89FF,#4B57D6);border-radius:22px 22px 0 0;transition:height .6s}
.jv b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.hstats{display:flex;flex-direction:column;justify-content:space-around;gap:6px}
.hstats b{display:block;font-size:1.55rem;line-height:1.1}
.hstats span{color:var(--mut);font-size:.85rem}
.act{background:var(--decor) right bottom/auto 100% no-repeat,linear-gradient(135deg,color-mix(in srgb,var(--c) 18%,var(--champ)),var(--champ) 70%);border-radius:16px;padding:12px 14px;margin-bottom:8px;border-left:5px solid var(--c)}
.act-t{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-weight:600}
.act-t em{font-style:normal;color:var(--mut);font-size:.85rem;font-weight:400}
.act-v{display:flex;align-items:baseline;gap:10px;margin:4px 0 8px}
.act-v b{font-size:1.9rem;color:var(--c)}
.act-v span,.act small{color:var(--mut);font-size:.85rem}
.barre{height:8px;border-radius:6px;background:rgba(255,255,255,.1);overflow:hidden;margin-bottom:4px}
.barre i{display:block;height:100%;background:var(--c);border-radius:6px}
/* séance guidée : plein écran */
#guide{width:100vw;max-width:100vw;height:100vh;height:100dvh;max-height:none;margin:0;border-radius:0;padding:0;overflow:hidden}
#guide[open]{display:flex;flex-direction:column}
.g-haut{display:flex;align-items:center;gap:10px;padding:calc(12px + var(--haut)) 14px 6px}
.g-haut button{border:0;background:var(--champ);color:var(--txt);width:38px;height:38px;border-radius:50%;font-size:1rem;cursor:pointer;flex:none}
.g-prog{flex:1;height:6px;border-radius:4px;background:#262B36;overflow:hidden}
.g-prog i{display:block;height:100%;width:0;background:var(--c);transition:width .3s}
#g-etape{font-size:.8rem;color:var(--mut);white-space:nowrap}
.g-scene{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 18px 10px;text-align:center}
.g-media{position:relative;width:min(62vw,240px);height:min(62vw,240px);border-radius:28px;overflow:hidden;background:var(--champ);flex:none;box-shadow:0 0 36px color-mix(in srgb,var(--c) 35%,transparent)}
.g-media img,.g-media .ph{width:100%;height:100%;object-fit:cover;border-radius:0}
.g-media .ph.grand{font-size:5rem}
.g-media.anim img{position:absolute;inset:0;animation:alt 1.6s steps(1) infinite}
.g-media.anim .a2{animation-delay:.8s}
@keyframes alt{0%{opacity:1}50%{opacity:0}}
.g-media.anim .a1{animation-name:alt1}
.g-media.anim .a2{animation-name:alt2}
@keyframes alt1{0%,49.99%{opacity:1}50%,100%{opacity:0}}
@keyframes alt2{0%,49.99%{opacity:0}50%,100%{opacity:1}}
.g-phase{margin:6px 0 0;color:var(--c);font-weight:600;font-size:.9rem;text-transform:uppercase;letter-spacing:.06em}
#g-nom{margin:0;font-size:1.9rem;line-height:1.15}
.g-minuteur{position:relative;width:132px;height:132px;flex:none}
.g-minuteur svg{width:100%;height:100%;transform:rotate(-90deg)}
.g-fond,.g-arc{fill:none;stroke-width:8}
.g-fond{stroke:#262B36}
.g-arc{stroke:var(--c);stroke-linecap:round;transition:stroke-dashoffset .25s linear}
.g-centre{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
#g-temps{font-size:2.3rem;line-height:1}
#g-cible{font-size:.82rem;color:var(--mut);margin-top:2px}
.g-desc{margin:0;color:var(--mut);font-size:.95rem;max-width:34ch}
.g-suite{margin:4px 0 0;color:var(--mut);font-size:.82rem}
.g-actions{display:flex;gap:10px;padding:10px 16px calc(14px + var(--bas))}
.g-actions button{border:0;border-radius:16px;padding:16px;font-size:1.05rem;cursor:pointer;background:var(--bd);color:var(--txt)}
.g-actions #g-pause{flex:none;width:58px;padding:0}
.g-actions #g-passer{flex:1}
.g-actions .ok{flex:2;background:var(--c);color:var(--sur);font-weight:700}
.g-actions button[hidden]{display:none}
#g-cible{font-size:1rem;font-weight:700;color:var(--c);margin-top:3px}

/* ===== Ambiance par élément : photos en fond, partout ===== */
[data-t="course"]{--img:url("../images/themes/terre.jpg");--pos:64% 50%;--fond:url("../images/fonds/terre.jpg")}
[data-t="natation"]{--img:url("../images/themes/eau.jpg");--pos:55% 55%;--fond:url("../images/fonds/eau.jpg")}
[data-t="velo"]{--img:url("../images/themes/vent.jpg");--pos:45% 60%;--fond:url("../images/fonds/vent.jpg")}
[data-t="ppg"]{--img:url("../images/themes/foudre.jpg");--pos:68% 40%;--fond:url("../images/fonds/foudre.jpg")}
/* page : l'image de l'activité du jour, assombrie, derrière tout le contenu */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(17,20,26,.36) 0,rgba(17,20,26,.60) 40%,rgba(17,20,26,.84) 100%),var(--fond,none) center/cover no-repeat}
body:not([data-t])::before{display:none}
/* cartes en verre : le fond reste lisible à travers */
.bilan,.jour,#bandeau{background:rgba(24,28,36,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.jb .pts i{box-shadow:0 0 6px currentColor}
/* cartes de séance : photo de l'élément à droite */
.puce{background:linear-gradient(90deg,rgba(18,21,27,.96) 30%,rgba(18,21,27,.35) 100%),var(--img) var(--pos)/cover no-repeat;box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 30%,transparent)}
.puce.fait{background:linear-gradient(90deg,rgba(14,32,24,.96) 30%,rgba(18,21,27,.35) 100%),var(--img) var(--pos)/cover no-repeat}
.act{background:linear-gradient(90deg,rgba(18,21,27,.95) 35%,rgba(18,21,27,.4) 100%),var(--img) var(--pos)/cover no-repeat}
.hero{background:rgba(18,21,27,.7)}
/* fenêtres d'une activité : photo en fond fixe sous le contenu */
dialog[data-t]{background:linear-gradient(180deg,rgba(22,26,34,.48) 0,rgba(22,26,34,.86) 34%,rgba(22,26,34,.96) 100%),var(--fond) center/cover no-repeat,var(--carte)}
#sc[data-t] .wod-tete,#wod[data-t] .wod-tete,#fiche[data-t] form>h2{background:none}
dialog[data-t] .bloc,dialog[data-t] .ex{background:rgba(10,12,16,.58)}
dialog[data-t] .bilan{background:rgba(10,12,16,.5);-webkit-backdrop-filter:none;backdrop-filter:none}
dialog[data-t] input,dialog[data-t] select,dialog[data-t] textarea{background:rgba(10,12,16,.6)}
/* séance guidée : image visible dans le haut, texte lisible en bas */
#guide[data-t]{background:linear-gradient(180deg,rgba(16,19,25,.45) 0,rgba(16,19,25,.80) 40%,rgba(16,19,25,.93) 100%),var(--fond) center/cover no-repeat,var(--carte)}
.g-fond{stroke:rgba(255,255,255,.14)}
.g-prog{background:rgba(255,255,255,.15)}

/* Étape 7e : icônes */
.si{width:1.25em;height:1.25em;vertical-align:-.25em;flex:none}
.ic{width:1.5em;height:1.5em;object-fit:contain;vertical-align:-.4em;flex:none;pointer-events:none}
header button .si{width:1.4em;height:1.4em}
.outils button{display:flex;align-items:center;justify-content:center;gap:6px}
.outils button .ic{width:1.45em;height:1.45em}
.puce .ico{display:flex;width:2rem;height:2rem;align-items:center;justify-content:center}
.puce .ico .ic{width:100%;height:100%}
.bande .puce .ico{width:2.4rem;height:2.4rem}
.col .puce .ico{width:1.7rem;height:1.7rem}
.puce .coche .si{width:1.1em;height:1.1em;vertical-align:middle}
.act-t .ic{width:2em;height:2em;vertical-align:-.65em}
.g-media .ph.grand .ic{width:46%;height:46%;vertical-align:baseline}
#g-pause .si,#g-quitter .si{width:1.5em;height:1.5em;vertical-align:middle}
.g-actions button .si{width:1.1em;height:1.1em;vertical-align:-.2em}
.g-demo,.demo,.ajout,#w-demarrer{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.ajout{display:flex;width:100%}
#c-sync .ic{margin-right:6px}
.records button .si,.sect button .si{width:1em;height:1em}

/* Fenêtre Compte : alignement */
#cloud form{display:flex;flex-direction:column;gap:12px}
#c-connecte,#c-connexion{display:flex;flex-direction:column;gap:10px}
#cloud .btns{width:100%}
#cloud .btns button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px}
#c-admin{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:44px;border:0;border-radius:10px;cursor:pointer}
.ok .ic{filter:brightness(0)}
#c-sync .ic{margin:0}