/* ---- LA SEMAINE (05/10) : la carte du tracking, nettoyée. La langue est
   celle du dashboard : le lime pour le temps travaillé, les ensō pour
   l'humeur. L'énergie seule change de teinte selon son niveau, du rouge
   (vidé) au vert (à bloc), parce que c'est la seule chose ici qu'on lit
   comme un signal. Pas de verre dans le verre : dedans, un bloc se creuse. ---- */
#donnees>.wrap{max-width:none}
#donnees h2{max-width:20ch}
.journal{margin-top:28px}

/* la navigation : le mois et ses flèches, puis ses semaines */
.sn{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin-bottom:16px}
.sn-mois{display:flex;align-items:center;gap:10px}
.sn-nom{font-size:19px;font-weight:700;letter-spacing:-.015em;min-width:150px;text-align:center}
.sn button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;-webkit-appearance:none;appearance:none}
.sn-fleche{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--creux);
  border:1px solid var(--trait);transition:background .15s ease,opacity .15s ease}
.sn-fleche svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sn-fleche:hover:not(:disabled){background:var(--actif)}
.sn-fleche:disabled{opacity:.3;cursor:default}
.sn-semaines{display:flex;gap:3px;padding:4px;border-radius:999px;background:var(--creux);border:1px solid var(--trait)}
.sn-semaines button{padding:7px 13px;border-radius:999px;font-size:13px;font-weight:600;opacity:.72;white-space:nowrap;
  transition:background .15s ease,opacity .15s ease}
.sn-semaines button:hover{opacity:1}
.sn-semaines button[aria-pressed="true"]{opacity:1;background:var(--texte);color:#fff}
.sn button:focus-visible{outline:2px solid var(--texte);outline-offset:2px}

.semaine-carte{padding:26px 28px 28px;border-radius:24px;background:var(--creux);border:1px solid var(--trait)}
.semaine-carte.entre{animation:sc-entre .28s ease-out}
@keyframes sc-entre{from{opacity:0;transform:translateY(6px)}}
.sc-titre{font-size:clamp(19px,2.4vw,23px);font-weight:700;letter-spacing:-.02em;margin-bottom:22px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.sc-haut{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:24px 40px;align-items:center}

/* les sept jours : la barre des heures, puis l'énergie, puis l'humeur */
.sc-jours{display:flex;gap:9px}
.sj{flex:1;min-width:0;display:grid;grid-template-rows:16px 170px auto 6px 24px;justify-items:center;gap:7px;
  padding:6px 3px;margin:-6px -3px;border:0;border-radius:12px;background:none;font:inherit;color:inherit;cursor:pointer;
  -webkit-appearance:none;appearance:none;transition:background .15s ease}
.sj:hover:not(:disabled){background:rgba(255,255,255,.4)}
.sj:disabled{cursor:default}
.sj:focus-visible{outline:2px solid var(--texte);outline-offset:1px}
.sj.choisi{background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 4px 14px -6px rgba(30,35,15,.25)}
/* le jour ouvert : sa barre devient la jauge empilée, aux couleurs des apps */
.sj-tube i.empile{display:flex;flex-direction:column-reverse;background:none;overflow:hidden}
.sj-tube i.empile b{display:block;min-height:1px}
.sc-astuce{margin-top:12px;font-size:12.5px;font-weight:500;opacity:.6;text-align:center}
.sj-h{font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.01em}
.sj-tube{width:100%;display:flex;align-items:flex-end;border-radius:8px;background:rgba(0,0,0,.06);overflow:hidden}
.sj-tube i{display:block;width:100%;background:var(--accent);border-radius:8px 8px 0 0}
.sj-l{font-size:12px;font-weight:600;opacity:.66}
.sj-e{width:100%;height:6px;border-radius:3px;background:rgba(0,0,0,.08);overflow:hidden}
.sj-e i{display:block;height:100%;border-radius:3px}
.sj-e.e1 i{background:#d8443c}
.sj-e.e2 i{background:#ec8a35}
.sj-e.e3 i{background:#e2c03c}
.sj-e.e4 i{background:#9bcb45}
.sj-e.e5 i{background:#4f9a2b}
.visage{display:inline-grid;place-items:center;width:24px;height:24px;color:var(--texte)}
.visage svg{width:100%;height:100%}
.visage .sans{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.3}

/* les heures actives, et l'écart dessiné en deux longueurs */
.sc-total{display:grid;gap:2px;margin-bottom:18px}
.sc-total b{font-size:clamp(44px,6.4vw,64px);font-weight:700;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.sc-total span{font-size:15px;font-weight:600;opacity:.7}
.ecart{display:grid;gap:10px}
/* L'ÉCART EST UNE BULLE DE VERRE LIQUIDE (Salih, 05/10 : l'encadré vert
   plein cassait la langue de la page) : la lentille blanche des pastilles,
   et une lueur qui dit le sens, verte quand ça monte. Quand ça descend,
   elle reste GRISE (Salih, 05/10 : « le rouge ça fait anxiogène ») : une
   semaine plus légère n'est pas une alerte. La courbe suit la même teinte. */
.ec-tete{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.ec-badge{--lueur:165,207,77;display:inline-flex;align-items:baseline;gap:8px;padding:9px 18px 10px;border-radius:999px;
  background:linear-gradient(160deg,rgba(255,255,255,.82),rgba(255,255,255,.4));
  -webkit-backdrop-filter:blur(12px) saturate(1.6);backdrop-filter:blur(12px) saturate(1.6);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.75),inset 0 1.5px 1px #fff,inset 0 -8px 16px rgba(var(--lueur),.12),
    0 0 0 1px rgba(var(--lueur),.3),0 0 22px rgba(var(--lueur),.42),0 10px 24px -12px rgba(var(--lueur),.7)}
.ec-badge.baisse{--lueur:128,136,146}
.ec-badge b{font-size:24px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:#4f7d14}
.ec-badge.baisse b{color:#4a4f57}
.ec-badge em{font-style:normal;font-size:13.5px;opacity:.75}
.ec-courbe{flex:none;overflow:visible;--c:#6fa422}
.ec-courbe.baisse{--c:#6b727c}
.ec-courbe .trait{fill:none;stroke:var(--c);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--c) 45%,transparent))}
.ec-courbe .aire{fill:var(--c);opacity:.12}
.ec-courbe .avant{fill:none;stroke:rgba(0,0,0,.22);stroke-width:1.6;stroke-dasharray:2 3;stroke-linecap:round;stroke-linejoin:round}
.ec-courbe circle{fill:var(--c);stroke:#fff;stroke-width:1.6}
.ec-ligne{display:grid;grid-template-columns:118px minmax(0,1fr) 62px;align-items:center;gap:12px;font-size:13.5px}
.ec-ligne span:first-child{opacity:.8}
.ec-ligne b{text-align:right;font-variant-numeric:tabular-nums}
.ec-piste{height:12px;border-radius:6px;background:rgba(0,0,0,.06);overflow:hidden}
.ec-piste i{display:block;height:100%;border-radius:6px;background:var(--accent)}
.ec-ligne.avant .ec-piste i{background:rgba(0,0,0,.2)}
.ec-ligne.avant b{opacity:.7;font-weight:600}


/* tâches et rendez-vous : chacun son icône, posée contre son titre */
.sc-listes{display:grid;grid-template-columns:1fr 1fr;gap:16px 40px;margin-top:22px;padding-top:22px;border-top:1px solid var(--trait)}
.sc-listes h4{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;margin-bottom:8px}
.sc-listes h4 img{flex:none;border-radius:7px;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.taches,.rdvs{list-style:none;display:grid;font-size:14.5px}
.taches li,.rdvs li{padding:9px 0;border-bottom:1px solid var(--trait)}
.taches li:last-child,.rdvs li:last-child{border-bottom:0}
.taches li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;align-items:center}
.taches li i{width:18px;height:18px;border-radius:50%;border:1.6px solid rgba(0,0,0,.3)}
.taches li.ok i{border:0;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.2 2.3 2.3 4.7-5' fill='none' stroke='%231d1d1f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.rdvs li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;align-items:baseline}
.rdvs time{font-weight:700;font-size:13.5px;font-variant-numeric:tabular-nums;white-space:nowrap}

/* LA JOURNÉE, APP PAR APP : la jauge couchée, chaque app à sa part, son
   logo dedans quand la part est assez large ; puis la liste des heures */
.jour-vue{animation:sc-entre .26s ease-out}
.jv-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;font-size:15px;font-weight:700}
.jv-tete{flex-wrap:wrap}
.jv-retour{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;padding:7px 14px 7px 10px;border:1px solid var(--trait);border-radius:999px;
  background:var(--creux);font:inherit;font-size:13px;font-weight:600;color:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;transition:background .15s ease}
.jv-retour:hover{background:var(--actif)}
.jv-retour:focus-visible{outline:2px solid var(--texte);outline-offset:2px}
.jv-retour svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.jour-vue .sc-total{margin-bottom:14px}
.jauge-apps{display:flex;gap:3px;height:46px;padding:4px;border-radius:16px;background:rgba(0,0,0,.05);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.06)}
.jg-part{min-width:4px;display:grid;place-items:center;border-radius:11px;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.06)}
.jg-part img{border-radius:7px;box-shadow:0 1px 4px rgba(0,0,0,.22)}
.jour-liste{list-style:none;display:grid;margin-top:12px;font-size:14px}
.jour-liste li{display:grid;grid-template-columns:28px 92px minmax(0,1fr) 62px 38px;align-items:center;gap:10px;padding:6px 0}
.jour-liste img,.jour-liste .autres{border-radius:7px;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.jour-liste .autres{display:block;width:28px;height:28px;background:rgba(0,0,0,.08)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cg fill='%231d1d1f' opacity='.45'%3E%3Ccircle cx='9' cy='14' r='1.8'/%3E%3Ccircle cx='14' cy='14' r='1.8'/%3E%3Ccircle cx='19' cy='14' r='1.8'/%3E%3C/g%3E%3C/svg%3E") center/100% no-repeat}
.jl-nom{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jl-piste{height:8px;border-radius:4px;background:rgba(0,0,0,.06);overflow:hidden}
.jl-piste i{display:block;height:100%;border-radius:4px}
.jour-liste b{text-align:right;font-variant-numeric:tabular-nums}
.jl-pc{text-align:right;font-size:12.5px;opacity:.6;font-variant-numeric:tabular-nums}

@media (max-width:860px){
  .sc-haut{grid-template-columns:minmax(0,1fr)}   /* pas 1fr : sa largeur minimale poussait toute la section hors de l'écran */
}
@media (max-width:640px){
  .sn{flex-direction:column;align-items:stretch;flex-wrap:nowrap}   /* en colonne, le wrap élargissait la ligne à la plus longue rangée de semaines */
  .sn-mois{justify-content:space-between}
  .sn-semaines{overflow-x:auto;scrollbar-width:none}
  .sn-semaines::-webkit-scrollbar{display:none}
  .sn-semaines button{flex:1;padding:7px 9px;font-size:12.5px}
  .semaine-carte{padding:20px 14px 20px;border-radius:20px}
  .sc-jours{gap:4px}
  .sj{grid-template-rows:14px 140px auto 6px 22px}
  .sj-h{font-size:10px;letter-spacing:-.03em}
  .visage{width:21px;height:21px}
  .ec-ligne{grid-template-columns:96px minmax(0,1fr) 56px;gap:8px;font-size:12.5px}
  .sj{padding:5px 1px;margin:-5px -1px}
  .jour-liste li{grid-template-columns:26px 78px minmax(0,1fr) 56px 34px;gap:8px;font-size:13px}
  .jauge-apps{height:40px}
  .sc-listes{grid-template-columns:1fr;gap:20px}
}
/* L'ÉCRAN TRÈS ÉTROIT (Salih, 05/10, l'affichage « super fin », ~280 px) :
   le septième jour sortait de la carte, la liste des apps perdait sa
   dernière colonne, « La semaine » passait sur deux lignes. Les heures
   au-dessus des barres rapetissent, la piste de chaque app s'efface (la
   jauge au-dessus dit déjà les parts), le mois cède sa largeur fixe. */
@media (max-width:400px){
  .sn-nom{min-width:0;font-size:17px}
  .semaine-carte{padding:18px 10px}
  .sc-jours{gap:2px}
  .sj{padding:4px 0;margin:-4px 0;gap:6px}
  .sj-h{font-size:8.5px;letter-spacing:-.04em}
  .sc-total b{font-size:42px}
  .ec-badge{padding:8px 14px 9px}
  .ec-badge b{font-size:20px}
  .ec-ligne{grid-template-columns:84px minmax(0,1fr) 50px;gap:6px;font-size:12px}
  .jour-liste li{grid-template-columns:24px minmax(0,1fr) auto 30px;gap:8px}
  .jour-liste img,.jour-liste .autres{width:24px;height:24px}
  .jl-piste{display:none}
  .jauge-apps{height:36px;gap:2px;padding:3px}
  .jg-part img{width:20px;height:20px;border-radius:5px}
}
@media (prefers-reduced-motion:reduce){.semaine-carte.entre,.jour-vue{animation:none}}