/* Inter (SIL Open Font License), variable 400–800, latin subset, self-hosted: the frame needs no internet for fonts */
@font-face{font-family:Inter;font-style:normal;font-weight:400 800;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}

/* ponytail: styles communs aux maquettes E (matin / soir), compatibles Chrome 106 */
html,body{margin:0;height:100%}
body{background:var(--page);display:flex;align-items:center;justify-content:center;min-height:100vh;font-family:Inter,Roboto,system-ui,sans-serif;color:var(--ink)}
.screen{width:1280px;height:800px;background:var(--bg);box-sizing:border-box;padding:24px;overflow:hidden;display:grid;grid-template-columns:380px 460px 360px;gap:16px}
.col{display:flex;flex-direction:column;gap:16px;min-height:0}
svg.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.tile{background:var(--card);border-radius:28px;padding:22px;box-sizing:border-box;position:relative;overflow:hidden;display:flex;flex-direction:column;flex:none}
.grow{flex:1}
.label{font-size:15px;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:8px}
.big{font-weight:800;letter-spacing:-2px;line-height:1}
.pill{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:999px;background:var(--bg);font-size:15px;font-weight:600}
.pill b{font-weight:800}

/* Bonjour */
.hello .big{font-size:76px;margin-top:6px}
.hello .date{font-size:21px;font-weight:700;margin-top:8px}
.hello .pills{display:flex;gap:8px;margin-top:auto}
/* « Tout » (docs/navigation.md): the empty top-right corner of Bonjour, 84 px for big fingers; nothing else moves */
.hello .allbtn{position:absolute;right:20px;top:20px;width:84px;height:84px;border-radius:24px;background:var(--bg);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:14px;font-weight:800;cursor:pointer}
.hello .allbtn svg.i{width:30px;height:30px}

/* Météo */
.weather{background:var(--yellow)}
.weather .now{display:flex;align-items:center;gap:16px;position:relative}
.wx-icon{width:60px;height:60px;border-radius:20px;background:var(--sc-icon);display:flex;align-items:center;justify-content:center;color:var(--amber)}
.wx-icon svg{width:34px;height:34px}
.weather .now .big{font-size:96px}
.weather .wcond{font-size:20px;font-weight:700;margin-top:10px;position:relative}
.weather .stats{display:flex;gap:20px;margin-top:12px;position:relative}
.col .stat small{display:block;font-size:13px;font-weight:600;color:var(--yellow-t)}
.col .stat b{font-size:18px}
.col .tmrw{margin-top:auto;background:var(--wash-2);border-radius:20px;padding:14px 16px;display:flex;align-items:center;gap:14px;position:relative}
.col .tmrw svg{width:36px;height:36px;color:var(--blue-d)}
.col .tmrw .big{font-size:40px;letter-spacing:-1px}
.col .tmrw p{margin:0;font-size:15px;font-weight:600;color:var(--yellow-t);line-height:1.3}
.col .tmrw p b{color:var(--ink);font-size:16px}
.deco{position:absolute;right:-50px;top:-50px;width:200px;height:200px;border-radius:50%;background:var(--deco);opacity:.55}

/* Maison */
.home{background:var(--mint)}
.col .rooms{display:flex;gap:10px;margin-top:auto}
.col .room{flex:1;background:var(--wash);border-radius:16px;padding:10px 12px}
.col .room span{display:block;font-size:13px;font-weight:600;color:var(--muted)}
.col .room b{font-size:24px;font-weight:800;letter-spacing:-.5px}
.col .room em{font-style:normal;font-size:14px;font-weight:700;color:var(--mint-t);margin-left:4px}
/* Maison compact, bottom of column 3 (mockups/tenue-v2.html): 124 px, never moves */
.col .home{height:124px;padding:16px 18px}
.col .home .rooms{margin-top:10px}
.col .home .room{padding:6px 12px 7px;white-space:nowrap}
.col .home .room span{font-size:12px}
.col .home .room b{font-size:22px}
.col .home .room em{font-size:13px}

/* Météo réduite (300 px) au-dessus de « Quoi mettre » */
#t-weather .now .big{font-size:88px}
#t-weather .wx-icon{width:60px;height:60px}
#t-weather .wcond{margin-top:6px}
#t-weather .stats{margin-top:8px}
#t-weather .tmrw{padding:10px 16px}
#t-weather .tmrw svg{width:32px;height:32px}
#t-weather .tmrw .big{font-size:36px}
#t-weather.has-heat .now .big{font-size:70px}
#t-weather.has-heat .wx-heat{margin-top:8px}

/* « Quoi mettre » (mockups/tenue-v2.html, variante 2) : tuile blanche unie, vignettes à la couleur du palier */
.k1{background:var(--k1);color:var(--k1-t)}
.k2{background:var(--k2);color:var(--k2-t)}
.k3{background:var(--k3);color:var(--k3-t)}
.k4{background:var(--k4);color:var(--k4-t)}
.k5{background:var(--k5);color:var(--k5-t)}
.k6{background:var(--k6);color:var(--k6-t)}
.kr{background:var(--kr);color:var(--kr-t)}
.ku{background:var(--ku);color:var(--ku-t)}
.k0{background:var(--card);color:var(--muted)}
.col .qm{height:188px;padding:18px 20px;background:var(--card)}
.qm .label .rng{margin-left:auto;font-size:16px;font-weight:800;color:var(--ink);display:inline-flex;align-items:center;gap:4px}
.qm .label .rng svg.i{width:18px;height:18px;color:var(--muted)}
.qm .eve{display:inline-flex;align-items:center;gap:5px;background:var(--navy);color:var(--on-color);border-radius:999px;padding:2px 10px 2px 7px;font-size:13px;font-weight:700}
.qm .eve svg{width:14px;height:14px;color:var(--star)}
.qm .split{display:flex;gap:10px;margin-top:8px}
.qm .grp{display:flex;flex-direction:column;min-width:0}
.qm .grp + .grp{border-left:2px solid var(--line);padding-left:10px}
.qm .grp h6{margin:0 0 4px 2px;font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}
.qm .grp .row{display:flex;gap:6px}
.qm .card{flex:1;min-width:0;border-radius:16px;height:78px;box-sizing:border-box;padding:6px 4px 6px;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative}
.qm .card svg.i{width:32px;height:32px;stroke-width:1.8}
.qm .card b{font-size:13px;font-weight:800;color:var(--ink);margin-top:5px;line-height:1.1;white-space:nowrap}
.qm .card small{font-size:11px;font-weight:700;margin-top:2px;white-space:nowrap}
.qm .bdg{position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:50%;background:var(--strong);color:var(--on-strong);font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1}
.qm .card .bdg svg.i{width:14px;height:14px;stroke-width:2.2}
.qm .note2{display:flex;align-items:center;gap:8px;font-size:14px;line-height:17px;min-height:17px;font-weight:700;color:var(--ink);margin-top:auto;white-space:nowrap;overflow:hidden}
.qm .fps{display:flex;gap:5px;flex:none}
.qm .fp{border-radius:999px;padding:0 8px;font-size:13px;line-height:17px;font-weight:700;white-space:nowrap}
.qm .fp b{font-weight:800}
.qm .fp svg.i{width:14px;height:14px;vertical-align:-2px;stroke-width:2.2}
.qm .fpn{min-width:0;overflow:hidden;text-overflow:ellipsis}

/* Vélo ou métro */
.bike.ok-state{background:var(--green)}
.bike.no-state{background:var(--blue)}
.col .verdict{display:flex;align-items:center;gap:14px;margin-top:8px}
.col .verdict .big{font-size:80px;letter-spacing:-3px}
.col .mark{flex:none;width:58px;height:58px;border-radius:50%;color:var(--on-color);display:flex;align-items:center;justify-content:center}
.col .mark svg{width:32px;height:32px;stroke-width:3}
.ok-state .mark{background:var(--green-d)}
.no-state .mark{background:var(--blue-d)}
.col .why{font-size:18px;font-weight:600;margin-top:8px}
.ok-state .why,.ok-state .label{color:var(--green-t)}
.no-state .why,.no-state .label{color:var(--blue-t)}
.col .conds{display:flex;gap:8px;margin-top:auto}
.col .cond{flex:1;display:flex;align-items:center;gap:6px;white-space:nowrap;background:var(--wash);border-radius:16px;padding:10px 10px;font-size:14px;font-weight:600}
.col .cond b{margin-left:auto}
.ok-state .cond b{color:var(--green-dt)}
.col .cond.bad{background:var(--strong);color:var(--on-strong)}
.col .cond.bad b{color:var(--on-strong)}

/* Vélo'v */
.col .st{display:flex;align-items:center;gap:12px;padding:7px 0;border-bottom:1px solid var(--line)}
.col .st:last-child{border-bottom:0}
.col .st .name{flex:1;min-width:0}
.col .st .name b{display:block;font-size:17px;font-weight:700}
.col .st .name span{font-size:13px;font-weight:600;color:var(--muted)}
.col .fill{width:70px;height:8px;border-radius:4px;background:var(--line);overflow:hidden}
.col .fill i{display:block;height:100%;background:var(--green-d);border-radius:4px}
.col .st .n{width:64px;text-align:right}
.col .st .n b{font-size:30px;font-weight:800;letter-spacing:-1px}
.col .st .n span{display:block;font-size:12px;font-weight:600;color:var(--muted)}
.col .st.best{background:var(--green-best);border-radius:16px;padding:7px 12px;margin:0 -12px;border-bottom:0}
.col .st.weak .name b,.col .st.weak .n b{color:var(--muted)}
.col .flag{display:inline-block;background:var(--flag);color:var(--flag-t);border-radius:7px;padding:1px 7px;font-size:12px;font-weight:700;margin-left:6px}

/* Transports */
.line-head{display:flex;align-items:center;gap:12px;margin-top:12px}
.line-head .badge{width:52px;height:52px;border-radius:14px;font-size:26px}
.line-head b{display:block;font-size:18px;font-weight:700}
.line-head div span{font-size:14px;font-weight:600;color:var(--muted)}
.line-head .big{margin-left:auto;font-size:56px;letter-spacing:-2px}
.line-head .big small{font-size:20px;letter-spacing:0;margin-left:3px}
.badge{width:34px;height:34px;border-radius:10px;color:var(--on-line);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:18px;flex:none}
.col .next-dep{display:flex;align-items:baseline;gap:10px;margin-top:10px}
.col .next-dep .big{font-size:64px;letter-spacing:-2.5px}
.col .next-dep .big small{font-size:22px;letter-spacing:0;margin-left:3px}
.col .next-dep span{font-size:16px;font-weight:600;color:var(--muted)}
.col .network{display:flex;gap:6px;margin-top:auto}
.col .network span{flex:1;height:32px;border-radius:9px;color:var(--on-line);font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center}
.col .network span.warn{outline:3px solid var(--amber);outline-offset:2px}
/* Live icon (real-time departure, app.js rtLive): a dot + 2 arcs whose opacity pulses, currentColor (white on the
   line chips). No icon = timetable. Frozen with the other animations (body.wx-still = night / power saving, reduced motion). */
.rt{display:inline-block;position:relative;width:.8em;height:.8em;margin-left:.35em;flex:none;font-style:normal}
.rt i{position:absolute;left:0;bottom:0;box-sizing:border-box;border:0 solid currentColor;border-top-width:.13em;border-right-width:.13em;border-top-right-radius:100%;animation:rt-pulse 1.8s ease-in-out infinite}
.rt i:nth-child(1){width:.24em;height:.24em;border:0;border-radius:50%;background:currentColor;animation:none}
.rt i:nth-child(2){width:.52em;height:.52em}
.rt i:nth-child(3){width:.8em;height:.8em;animation-delay:.3s}
@keyframes rt-pulse{0%,100%{opacity:.3}50%{opacity:1}}
body.wx-still .rt i{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){.rt i{animation:none}}
.col .disrupt{display:flex;align-items:center;gap:10px;background:var(--coral);color:var(--on-color);border-radius:16px;padding:10px 14px;font-size:15px;font-weight:700;margin-top:12px}
.col .disrupt svg{width:20px;height:20px;flex:none}
.col .disrupt.alert{background:var(--red);min-height:44px;box-sizing:border-box;padding:8px 8px 8px 14px;cursor:pointer}
.col .disrupt .txt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.col .disrupt .ok{flex:none;background:var(--hi-alert);color:var(--red-t);border-radius:12px;padding:6px 12px;font-weight:800}

/* Agenda */
.col .day{font-size:14px;font-weight:700;color:var(--muted);margin:14px 0 6px}
.col .day:first-of-type{margin-top:12px}
.col .ev{display:flex;align-items:center;gap:12px;padding:9px 0;font-size:17px;font-weight:600;border-bottom:1px solid var(--line)}
.col .ev:last-child{border-bottom:0}
.col .ev time{background:var(--bg);border-radius:9px;padding:4px 8px;font-size:13px;font-weight:700;min-width:48px;text-align:center}
.col .ev.today{background:var(--orange);color:var(--on-color);border-radius:18px;padding:12px 14px;border-bottom:0;font-size:20px;font-weight:700}
.col .ev.today time{background:var(--glass-2);color:var(--on-color)}

/* Dehors */
.out{background:var(--lav)}
.col .halves{display:flex;gap:10px;margin-top:auto}
.col .half{flex:1;background:var(--wash);border-radius:16px;padding:10px 12px}
.col .half span{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--lav-t)}
.col .half b{display:block;font-size:24px;font-weight:800;letter-spacing:-.5px;margin-top:4px}
.col .scale{display:flex;gap:3px;margin-top:6px}
.col .scale i{flex:1;height:6px;border-radius:3px;opacity:.35}
.col .scale i.on{opacity:1}

/* À venir */
.soon{flex-direction:row;gap:12px;padding:0;background:transparent;border-radius:0}
.soon .card{flex:1;border-radius:28px;padding:18px;box-sizing:border-box;display:flex;flex-direction:column}
.soon .bday{background:var(--pink)}
.soon .trip{background:var(--sky)}
.soon .card .big{font-size:40px;letter-spacing:-1.5px;margin-top:auto}
.soon .card p{margin:4px 0 0;font-size:14px;font-weight:600}
.soon .bday .label,.soon .bday p{color:var(--pink-t)}
.soon .trip .label,.soon .trip p{color:var(--sky-t)}

/* F : corrections d'espacement + liste À venir */
.hello .big{font-size:68px}
.hello .pills{padding-top:16px}
.home .rooms,.out .halves{margin-top:12px}
.col .up{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:17px;font-weight:600}
.col .up:last-child{border-bottom:0}
.col .up .ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none}
.col .up .ic svg{width:18px;height:18px}
.col .up .ic.bd{background:var(--pink);color:var(--pink-t)}
.col .up .ic.tr{background:var(--sky);color:var(--sky-t)}
.col .up small{display:block;font-size:13px;color:var(--muted);font-weight:600}
.col .up b{margin-left:auto;white-space:nowrap;font-size:20px;font-weight:800;letter-spacing:-.3px}
.alertw{background:var(--coral);color:var(--on-color)}
.alertw .label{color:var(--on-color);opacity:.9}
.alertw h3{margin:10px 0 4px;font-size:28px;font-weight:800;letter-spacing:-.5px;line-height:1.1}
.alertw p{margin:0;font-size:16px;font-weight:600;opacity:.92}

/* data older than its TTL */
.hello .waitl{position:relative;display:inline-flex;align-items:center;gap:2px;margin-left:-2px;color:var(--warn-t);font-weight:700;cursor:pointer;white-space:nowrap}
/* tap target enlarged for fingers (like the birthday pill); chevron = the app's action icon → details/attente.js */
.hello .waitl::before{content:"";position:absolute;left:-10px;right:-12px;top:-16px;bottom:-16px}
.hello .waitl svg.i{width:13px;height:13px;stroke-width:3}

/* ---------- detail sheet (shared shell) ---------- */
.screen{position:relative}
[data-detail]{cursor:pointer}
.sheet{position:absolute;left:0;top:0;width:1280px;height:800px;box-sizing:border-box;padding:24px;background:var(--bg);z-index:10;display:flex;flex-direction:column;gap:16px}
.sheet[hidden]{display:none}
.sheet-head{height:72px;flex:none;display:flex;align-items:center;gap:16px}
.sheet-title{font-size:34px;font-weight:800;letter-spacing:-1px;display:flex;align-items:center;gap:12px}
.sheet-title svg{width:32px;height:32px}
.sheet-close{margin-left:auto;height:72px;min-width:200px;border:0;border-radius:24px;background:var(--strong);color:var(--on-strong);font:inherit;font-size:22px;font-weight:800;cursor:pointer}
/* body = 1232 × 664 px; detail views lay out inside it */
.sheet-body{flex:1;min-height:0;display:flex;gap:16px}

/* long verdict ("Vélo + k-way") stays on one line */
.col .bike .verdict .big.long{font-size:56px;letter-spacing:-2px;white-space:nowrap}

/* ---------- Météo, direction C « Atmosphère » (any .wxbox: home tile + detail "Maintenant") ---------- */
.wxbox{--wx-bg:var(--sc-sun);--wx-ink:var(--sc-ink);--wx-muted:var(--sc-sun-m);--wx-chip:var(--sc-chip);--wx-chipfg:var(--sc-sun-c);
  --wx-sub:var(--sc-sub);--wx-subink:var(--sc-ink);--wx-submuted:var(--sc-sun-m);background:var(--wx-bg);color:var(--wx-ink)}
.wxbox > *{position:relative;z-index:2}
.wxbox > .wx-atmo{position:absolute}
.wxbox .wx-atmo{position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;border-radius:28px;z-index:auto}
.wxbox .wx-l{position:absolute;left:0;top:0;z-index:1;pointer-events:none}
.wxbox .wx-fill{width:100%;height:100%}
.wxbox .wx-veil{z-index:3}
.wxbox .wx-icon{background:var(--wx-chip);color:var(--wx-chipfg);flex:none}
.wxbox .stat small{color:var(--wx-muted)}
.wxbox .tmrw{background:var(--wx-sub);color:var(--wx-subink)}
.wxbox .tmrw p{color:var(--wx-submuted)}
.wxbox .tmrw p b{color:var(--wx-subink)}
.wxbox .tmrw.wx-tonight{background:var(--sc-tonight);color:var(--sc-ink-dk)}
.wxbox .tmrw.wx-tonight p{color:var(--sc-tonight-t)}
.wxbox .tmrw.wx-tonight p b{color:var(--sc-ink-dk)}
.wxbox.wx-dark{--wx-ink:var(--sc-ink-dk);--wx-chip:var(--sc-chip-dk);--wx-sub:var(--sc-sub-dk);--wx-subink:var(--sc-ink-dk)}
.wxbox.wx-dark .big,.wxbox.wx-dark .wcond,.wxbox.wx-dark .stat b{text-shadow:0 1px 3px rgba(0,0,0,.3)}

.wxbox.wx-sun{--wx-bg:var(--sc-sun)}
.wxbox.wx-partly{--wx-bg:var(--sc-partly);--wx-muted:var(--sc-partly-m);--wx-submuted:var(--sc-partly-m);--wx-chipfg:var(--sc-partly-c)}
.wxbox.wx-overcast{--wx-bg:var(--sc-over);--wx-muted:var(--sc-over-m);--wx-submuted:var(--sc-over-m);--wx-chipfg:var(--sc-over-c)}
.wxbox.wx-rain{--wx-bg:var(--sc-rain);--wx-muted:var(--sc-rain-m);--wx-submuted:var(--sc-rain-m);--wx-chipfg:var(--sc-rain-c)}
.wxbox.wx-storm{--wx-bg:var(--sc-storm);--wx-muted:var(--sc-storm-m);--wx-submuted:var(--sc-storm-m);--wx-chipfg:var(--sc-storm-c);--wx-sub:var(--sc-storm-sub)}
.wxbox.wx-storm .big,.wxbox.wx-storm .wcond,.wxbox.wx-storm .stat{text-shadow:0 1px 4px var(--sc-storm-glow)}
.wxbox.wx-snow{--wx-bg:var(--sc-snow);--wx-muted:var(--sc-snow-m);--wx-submuted:var(--sc-snow-m);--wx-chipfg:var(--sc-snow-c)}
.wxbox.wx-fog{--wx-bg:var(--sc-fog);--wx-ink:var(--sc-fog-ink);--wx-subink:var(--sc-fog-ink);--wx-muted:var(--sc-fog-m);--wx-submuted:var(--sc-fog-m);--wx-chipfg:var(--sc-fog-c);--wx-sub:var(--sc-fog-sub)}
.wxbox.wx-fog .now .big{color:var(--sc-fog-big);text-shadow:0 0 14px var(--sc-fog-glow)}
.wxbox.wx-night,.wxbox.wx-nightc{--wx-bg:var(--sc-night);--wx-muted:var(--sc-night-m);--wx-submuted:var(--sc-night-m);--wx-chipfg:var(--sc-night-c)}

/* animated layers (.wx-a): transform / opacity only */
.wxbox .wx-drift{animation:wx-drift 38s ease-in-out infinite alternate;will-change:transform}
.wxbox .wx-slow{animation-duration:56s;animation-direction:alternate-reverse}
.wxbox .wx-spin{transform-origin:210px 210px;animation:wx-spin 140s linear infinite;will-change:transform}
.wxbox .wx-fall{top:-26px;animation:wx-fall .9s linear infinite;will-change:transform}
.wxbox .wx-snow{animation-duration:11s}
.wxbox .wx-snow2{animation-duration:15s}
.wxbox .wx-tw{animation:wx-tw 5s ease-in-out infinite alternate;will-change:opacity}
.wxbox .wx-d2{animation-delay:-2.5s}
.wxbox .wx-d3{animation-delay:-4s}
.wxbox .wx-haze{animation:wx-haze 80s linear infinite;will-change:transform}
.wxbox .wx-h2{animation-duration:120s;animation-direction:reverse}
.wxbox .wx-h3{animation-duration:55s}
.wxbox .wx-bolt{width:100%;height:100%;opacity:0;animation:wx-bolt 15s linear 2s infinite;will-change:opacity}
.wxbox .wx-b2{animation-delay:9s}
.wxbox.wx-flash .wx-b1{animation:none;opacity:1}
@keyframes wx-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-34px,0,0)}}
@keyframes wx-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes wx-fall{from{transform:translate3d(0,-200px,0)}to{transform:translate3d(0,0,0)}}
@keyframes wx-tw{from{opacity:1}to{opacity:.25}}
@keyframes wx-haze{from{transform:translate3d(0,0,0)}to{transform:translate3d(-380px,0,0)}}
/* ~250 ms double flicker once per 15 s cycle; two bolts offset by 7 s → a strike every 7–8 s */
@keyframes wx-bolt{0%{opacity:0}.4%{opacity:1}.8%{opacity:.25}1.2%{opacity:1}1.7%,100%{opacity:0}}
/* power saving switch (HB.setMotion) + reduced motion: freeze the scene, hide the lightning */
body.wx-still .wxbox .wx-a{animation-play-state:paused}
body.wx-still .wxbox .wx-bolt{animation:none;opacity:0}
@media (prefers-reduced-motion: reduce){.wxbox .wx-a{animation:none}}

/* ---------- night mode (body.night) + burn-in shift ---------- */
/* a real fixed element: a ::after inside the shifted (transformed) screen was not painted reliably */
#t-veil{position:fixed;left:0;top:0;width:100%;height:100%;background:var(--night-veil);opacity:0;pointer-events:none;z-index:50;transition:opacity 1.2s ease}
body.night #t-veil{opacity:.72}
body.no-fade #t-veil{transition:none}
/* on the frame the window is the screen: give the 2 px revealed by the shift the same colour as the screen */
@media (max-width:1290px){html,body{background:var(--bg)}}

/* agenda: guest arrival / departure codes */
.col .agenda .et{min-width:0}
.col .agenda .et small,.col .up small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.col .agenda .et small{display:block;font-size:13px;font-weight:600;color:var(--muted)}
.col .agenda .ev.today .et small{color:var(--on-color);opacity:.85}
.col .agenda .mv-next{display:flex;align-items:center;gap:12px;margin-top:12px;padding:10px 14px;border-radius:16px;background:var(--sky);color:var(--ink);font-size:15px;font-weight:600}
.col .agenda .mv-next b{display:block;font-size:17px;font-weight:800}
.col .agenda .mv-next.late{background:var(--navy);color:var(--navy-tt)}
.col .agenda .mv-next.late b{color:var(--on-color)}
.col .agenda .mv-next.late svg{color:var(--star)}

/* ---------- heat (connectors/bike.js heat, weather.vigilance) ---------- */
/* solid chip: readable on every Atmosphère scene, light or dark */
.wxbox .wx-heat{display:flex;align-items:center;gap:8px;align-self:flex-start;max-width:100%;box-sizing:border-box;height:32px;margin-top:12px;padding:0 14px 0 10px;
  border-radius:12px;font-size:15px;font-weight:800;white-space:nowrap;box-shadow:0 1px 4px var(--heat-shadow)}
.wxbox .wx-heat span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.wxbox .wx-heat svg{width:20px;height:20px;flex:none}
.wxbox .wx-heat ~ .tmrw{padding-top:10px;padding-bottom:10px} /* room for the heat line */
.wxbox .wx-heat.hz-1{background:var(--hz1);color:var(--hz1-t)}
.wxbox .wx-heat.hz-2{background:var(--hz2);color:var(--on-color)}
.wxbox .wx-heat.hz-3{background:var(--hz3);color:var(--on-color)}
.wxbox.wx-hot.wx-sun{--wx-bg:var(--sc-hot);--wx-muted:var(--sc-hot-m);--wx-submuted:var(--sc-hot-m);--wx-chipfg:var(--sc-hot-c)}
.wxbox.wx-hot.wx-partly{--wx-bg:var(--sc-hotp);--wx-muted:var(--sc-hot-m);--wx-submuted:var(--sc-hot-m)}
/* bike: heat-driven "Vélo élec" / "Vélo tôt" */
.bike.heat-state{background:var(--heat)}
.heat-state .why,.heat-state .label{color:var(--heat-t)}
.heat-state .mark{background:var(--heat-d)}
.heat-state .cond b{color:var(--heat-dt)}
/* long heat reason ("… · retour 40° à 17 h → TCL") may take 2 lines: smaller, tighter */
.col .bike .why.two{font-size:16px;line-height:1.2;margin-top:4px}

/* ---------- Sortir de la maison (connectors/outing.js) : bandeaux en tête de l'Agenda, lumière vélo ---------- */
.col .agenda.fit{flex:none}
.col .agenda.fit.shrink{flex:0 1 auto;min-height:0}
.col .agenda.fit .day{margin:10px 0 3px}
.col .agenda.fit .ev{padding:7px 0}
.col .agenda.fit .ev.today{padding:10px 14px}
.col .agenda.fit .up{padding:7px 0}
.col .agenda.dense .day{margin:8px 0 2px}
.col .agenda.dense .ev{padding:6px 0}
.col .agenda.dense .ev.today{padding:9px 14px}
.col .agenda.dense .up{padding:5px 0}
.col .agenda .day.none{color:var(--faint);font-weight:600}
.col .band{border-radius:28px;overflow:hidden;flex:none}
.col .band .dep{background:var(--navy);color:var(--on-color);padding:14px 22px}
.col .band .dep small{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--navy-t)}
.col .band .dep small svg{width:15px;height:15px;color:var(--star)}
.col .band .dep b{display:block;font-size:28px;font-weight:800;letter-spacing:-.8px;line-height:1.1;margin-top:2px}
.col .band .dep > span{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--navy-tt);margin-top:3px;white-space:nowrap;min-width:0}
.col .band .dep > span svg{width:15px;height:15px}
.col .band .dep > span i{font-style:normal;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* (« À prendre » moved into « Quoi mettre ») */
/* inline-block (not inline-flex): the pill's baseline is its text, so it sits on the reason's baseline */
.col .bike .why .mini{display:inline-block;background:var(--navy);color:var(--on-color);border-radius:999px;padding:4px 12px 4px 9px;font-size:15px;font-weight:700;white-space:nowrap;vertical-align:baseline}
.col .bike .why .mini svg{width:18px;height:18px;color:var(--star);vertical-align:-4px;margin-right:6px}
.col .bike .why.two .mini{margin-top:4px;font-size:14px;padding:3px 10px 3px 8px}
.col .bike .why.wrap .mini{display:table;margin-top:6px}
.col .bike.tight .verdict{margin-top:2px}
.col .bike.tight .verdict .big{font-size:64px;letter-spacing:-2.5px}
.col .bike.tight .verdict .big.long{font-size:56px;letter-spacing:-2px} /* « Vélo + k-way » at 64px pushed its badge out of the tile */
.col .bike.tight .mark{width:48px;height:48px}
.col .bike.tight .conds{padding-top:10px}
/* Dehors takes what the agenda leaves: tall / medium / compact */
.out.out-tall,.out.out-medium{flex:1;min-height:0}
.out .tb{flex:1;display:flex;flex-direction:column;gap:10px;margin-top:12px;min-height:0}
.out .blk{flex:1;background:var(--wash);border-radius:18px;padding:12px 16px;display:flex;flex-direction:column;justify-content:center;min-height:0}
.out .blk span{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--lav-t)}
.out .blk b{display:block;font-size:38px;font-weight:800;letter-spacing:-1px;line-height:1.05;margin-top:2px}
.out .blk .scale i{height:8px;border-radius:4px}
.out .tm{font-size:15px;font-weight:600;color:var(--lav-t);margin-top:10px}
.out .tm b{color:var(--ink)}
.out.out-medium .tm{margin-top:auto}
/* sheet header hint (agenda month view) */
.sheet-hint{font-size:17px;font-weight:600;letter-spacing:0;color:var(--muted);margin-left:12px}

/* ---------- Calendrier et saisons (connectors/seasons.js) : tuile .cx ou bande .cxs sous l'agenda ---------- */
.cx .label{color:inherit;opacity:.8}
.cx h3{margin:10px 0 0;font-size:36px;font-weight:800;letter-spacing:-1px;line-height:1.05}
.cx .sub{margin:8px 0 0;font-size:17px;font-weight:600;line-height:1.3}
.cx .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.cx .chip{height:40px;display:inline-flex;align-items:center;gap:8px;padding:0 14px;border-radius:14px;font-size:16px;font-weight:700;background:var(--wash)}
.cx .chip svg{width:18px;height:18px}
.cx .kk{font-size:13px;font-weight:700;opacity:.75;margin-top:14px}
.cx .kk + .chips{margin-top:6px}
.cxs{flex-direction:row;align-items:center;gap:14px;padding:14px 18px 14px 14px;min-height:84px}
.cxs .ic{width:54px;height:54px;border-radius:18px;background:var(--wash);display:flex;align-items:center;justify-content:center;flex:none}
.cxs .ic svg{width:28px;height:28px}
.cxs .t{flex:1;min-width:0}
.cxs .t b{display:block;font-size:19px;font-weight:800;letter-spacing:-.3px;line-height:1.15}
.cxs .t span{display:block;font-size:14px;font-weight:600;margin-top:3px;line-height:1.25;opacity:.85}
.c-heure{background:var(--navy);color:var(--on-color)}
.c-heure .chip,.c-heure.cxs .ic{background:var(--glass)}
.c-heure .ic,.c-heure .label svg{color:var(--star)}
.c-ferie{background:var(--sky);color:var(--sky-tt)}
.c-pollution{background:var(--coral);color:var(--on-color)}
.c-pollution .chip,.c-pollution.cxs .ic{background:var(--glass-2)}
.c-pollution h3{font-size:28px;letter-spacing:-.5px}
.c-lessive{background:var(--mint);color:var(--mint-tt)}
.cx .todo{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.cx .todo div{display:flex;align-items:center;gap:12px;background:var(--glass-2);border-radius:16px;padding:9px 12px;font-size:16px;font-weight:700;line-height:1.2}
.cx .todo div svg{width:22px;height:22px}
.cx .todo small{display:block;font-size:13px;font-weight:600;opacity:.85}
.c-lessive .linge-k{font-size:15px;font-weight:700;opacity:.8;margin-top:10px}
.c-lessive h3{font-size:46px;letter-spacing:-1.5px;margin-top:2px}
.c-lessive .sub{margin-top:4px}
.c-lessive .days5{display:flex;gap:6px;margin-top:14px}
.c-lessive .days5 div{flex:1;border-radius:14px;padding:8px 0 9px;text-align:center;background:var(--wash-lo);font-size:13px;font-weight:700}
.c-lessive .days5 div.best{background:var(--hi);box-shadow:0 0 0 2px var(--mint-t)}
.c-lessive .days5 svg{width:22px;height:22px;display:block;margin:5px auto 6px}
.c-lessive .dots{display:flex;gap:3px;justify-content:center}
.c-lessive .dots i{width:9px;height:9px;border-radius:50%;background:var(--mint-t);opacity:.2}
.c-lessive .dots i.on{opacity:1}
.col .agenda .mv-next .vl{font-style:normal}

/* ---------- Week-ends, voyages et invités (connectors/weekend.js) ---------- */
/* 15A + 23A under a trip that starts today / tomorrow */
.col .agenda .et .twx{display:flex;gap:6px;margin-top:5px}
.col .agenda .et .twx i{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;border-radius:9px;background:var(--sky);color:var(--sky-tt);font-style:normal;font-size:13px;font-weight:700;white-space:nowrap}
.col .agenda .et .twx svg{width:16px;height:16px}
.col .agenda .ev.today .et .twx i{background:var(--wash-3)}
.tmo{display:inline-flex;align-items:center;gap:6px;margin-top:6px;height:30px;padding:0 12px;border-radius:10px;background:var(--yellow);color:var(--yellow-t);font-size:13px;font-weight:600;white-space:nowrap}
.tmo svg{width:18px;height:18px}
.tmo b{color:var(--ink);font-weight:800}
.tmo.big{align-self:flex-start;height:36px;font-size:15px;margin-top:10px}
/* 22B arriving tonight */
.col .agenda .mv-guest{margin-top:12px;padding:10px 16px;border-radius:20px;background:var(--sky);color:var(--ink);flex:none}
.col .agenda .mv-guest small{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--sky-t)}
.col .agenda .mv-guest small svg{width:15px;height:15px}
.col .agenda .mv-guest b{display:block;font-size:26px;font-weight:800;letter-spacing:-.7px;line-height:1.15;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.col .agenda .mv-guest span{display:flex;align-items:center;gap:5px;font-size:14px;font-weight:600;margin-top:4px;white-space:nowrap}
.col .agenda .mv-guest em{font-style:normal;color:var(--on-line);font-weight:800;font-size:13px;border-radius:7px;padding:2px 7px}
.col .agenda .mv-guest.late{background:var(--navy);color:var(--on-color)}
.col .agenda .mv-guest.late small{color:var(--navy-t)}
.col .agenda .mv-guest.late small svg{color:var(--star)}
.col .agenda .mv-guest.late span{color:var(--navy-tt)}
/* 14A veille de départ */
.c-depart{background:var(--sky);color:var(--sky-tt)}
.c-depart h3{font-size:40px}
.c-depart .kk{text-transform:uppercase;letter-spacing:.5px}
.c-depart .wchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.c-depart .wc{flex:1 1 calc(50% - 4px);box-sizing:border-box;min-width:0;height:52px;display:flex;align-items:center;gap:8px;padding:0 12px;border-radius:16px;background:var(--wash-2);border:2px solid transparent;cursor:pointer;white-space:nowrap}
.c-depart .wc svg{width:20px;height:20px;flex:none}
.c-depart .wc b{font-size:16px;font-weight:800;overflow:hidden;text-overflow:ellipsis}
.c-depart .wc.ha{flex-basis:100%;border:2px dashed var(--sky-dash)}
.c-depart .wc em{margin-left:auto;font-style:normal;font-size:11px;font-weight:800;text-transform:uppercase;background:var(--tag);color:var(--tag-t);border-radius:6px;padding:3px 6px}
.c-depart .wc.am{flex-basis:100%;background:var(--navy);color:var(--on-color)}
.c-depart .wc.done{background:transparent;border:2px dashed var(--sky-dash);opacity:.55}
.c-depart .foot{margin:10px 0 0;font-size:13px;font-weight:600;opacity:.8}
.cxs.c-depart .ic{background:var(--wash)}
/* 22C dîner à la maison (light) */
.c-diner{background:var(--pink);color:var(--pink-ttt)}
.c-diner h3{font-size:34px}
.col .agenda .ev .et{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-depart .wc.ha b{font-size:15px}
.c-depart .wc.ha em{font-size:10px;padding:3px 5px}

/* ---------- Transports et ville (connectors/ville.js) ---------- */
.cx .lb{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 5px;box-sizing:border-box;border-radius:10px;color:var(--on-line);font-size:14px;font-weight:800;flex:none}
/* 8B grève demain */
.c-greve{background:var(--navy);color:var(--on-color)}
.c-greve .label svg{color:var(--star)}
.c-greve h3{font-size:30px;letter-spacing:-.7px}
.c-greve .grows{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.c-greve .grows > div{display:flex;align-items:center;gap:12px;background:var(--glass);border-radius:16px;padding:9px 12px}
.c-greve .grows span{min-width:0}
.c-greve .grows b{display:block;font-size:17px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-greve .grows small{display:block;font-size:13px;font-weight:600;color:var(--navy-t);white-space:nowrap}
.c-greve .gquiet{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:15px;font-weight:700;color:var(--navy-tt)}
.c-greve .gquiet .lb{min-width:28px;height:28px;font-size:12px;opacity:.5}
.c-greve .gquiet span:last-child{margin-left:8px}
.c-greve .foot{margin:10px 0 0;font-size:13px;font-weight:600;color:var(--navy-t)}
/* 16B départ pour le train */
.c-train{background:var(--peach);color:var(--peach-t)}
.c-train h3{font-size:44px;color:var(--ink);letter-spacing:-1.3px}
.c-train .sub{font-size:16px}
.c-train .kk{opacity:1}
.c-train .troutes{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.c-train .troutes > div{display:flex;align-items:center;gap:12px;background:var(--wash);border-radius:16px;padding:8px 12px;border:2px solid transparent}
.c-train .troutes > div.best{background:var(--hi);border-color:var(--peach-t)}
.c-train .lbs{display:flex;gap:4px;flex:none}
.c-train .troutes span{min-width:0}
.c-train .troutes b{display:block;font-size:17px;font-weight:800;color:var(--ink);white-space:nowrap}
.c-train .troutes small{display:block;font-size:13px;font-weight:600;white-space:nowrap}
.c-train .troutes em{font-style:normal;font-size:11px;font-weight:800;background:var(--peach-2);border-radius:6px;padding:2px 6px}
.c-train .foot{margin:10px 0 0;font-size:13px;font-weight:600}
/* 24B grand événement (bande) */
.c-event{background:var(--event);color:var(--on-color)}
.c-event.cxs .ic{background:var(--glass);color:var(--star)}

/* ---------- 30 v5 « Bon retour » (weekend.js returnWidget) ---------- */
.c-retour{background:var(--peach);color:var(--peach-t)}
.c-retour .label{opacity:1;color:var(--peach-t)}
.c-retour .label b{color:var(--peach-tt);font-size:20px;font-weight:800;letter-spacing:-.4px}
.c-retour .label span{margin-left:auto;font-size:13px;font-weight:700;opacity:.8}
.c-retour .acts{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.c-retour .act{display:flex;align-items:center;gap:12px;height:54px;box-sizing:border-box;background:var(--wash);border-radius:16px;padding:0 10px 0 12px}
.c-retour .act > svg{width:26px;height:26px;flex:none}
.c-retour .act .w{flex:1;min-width:0;white-space:nowrap}
.c-retour .act .w b{display:block;font-size:17px;font-weight:800;color:var(--ink);line-height:1.15}
.c-retour .act .w span{display:block;font-size:13px;font-weight:600;line-height:1.2}
.c-retour .when{flex:none;display:flex;align-items:center;height:36px;padding:0 12px;border-radius:12px;background:var(--hi);font-size:16px;font-weight:800;color:var(--peach-tt);white-space:nowrap}
.c-retour .lx5{margin-top:8px;background:var(--mint);border-radius:18px;padding:10px;color:var(--mint-tt)}
.c-retour .lx5 .lh{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;padding:0 2px;white-space:nowrap}
.c-retour .lx5 .lh svg{width:20px;height:20px;color:var(--mint-t)}
.c-retour .lx5 .lh b{color:var(--mint-ttt);font-weight:800}
.c-retour .lx5 .lh span{margin-left:auto;font-size:12px;font-weight:700;opacity:.75}
.c-retour .lx5 .d5{display:flex;gap:5px;margin-top:8px}
.c-retour .lx5 .d5 > div{flex:1;border-radius:13px;padding:7px 0;text-align:center;background:var(--wash-lo);font-size:13px;font-weight:700}
.c-retour .lx5 .d5 > div.best{background:var(--hi);box-shadow:0 0 0 2px var(--mint-t)}
.c-retour .lx5 .d5 svg{width:22px;height:22px;display:block;margin:4px auto 5px}
.c-retour .dots{display:flex;gap:3px;justify-content:center}
.c-retour .dots i{width:8px;height:8px;border-radius:50%;background:var(--mint-t);opacity:.2}
.c-retour .dots i.on{opacity:1}
.c-retour .lx5 .d5 em{display:block;height:14px;margin-top:4px;font-style:normal;font-size:11px;font-weight:800;color:var(--peach-t)}
.c-retour .lx5 .d5 em i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--peach-t);margin-right:3px;vertical-align:1px}
.cxs.c-retour .ic{background:var(--wash)}

/* ---------- Courses et plantes (catégorie E, données d'exemple, details/courses.js) ---------- */
.c-courses{background:var(--yellow);color:var(--yellow-t)}
.c-courses .label{opacity:1;color:var(--yellow-t)}
.c-courses .cnum{display:flex;align-items:center;gap:12px;margin-top:6px}
.c-courses .cnum b{font-size:56px;font-weight:800;letter-spacing:-2px;line-height:1;color:var(--ink)}
.c-courses .cnum span{font-size:16px;font-weight:700;line-height:1.2}
.c-courses .ctk{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:700;margin-top:6px}
.c-courses .ctk svg{width:16px;height:16px}
.c-courses .cchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.c-courses .cc{flex:1 1 calc(50% - 4px);box-sizing:border-box;height:50px;display:flex;align-items:center;gap:8px;padding:0 14px;border-radius:16px;background:var(--yellow-2);color:var(--ink);font-size:18px;font-weight:700;cursor:pointer;white-space:nowrap;border:2px solid transparent}
.c-courses .cc svg{width:18px;height:18px;color:var(--yellow-t);flex:none}
.c-courses .cc.on{background:var(--strong);color:var(--on-strong)}
.c-courses .cc.on svg{color:var(--star)}
.c-courses .cc.more{justify-content:center;background:transparent;border:2px dashed var(--yellow-dash);color:var(--yellow-t)}
.c-courses .cbtns{display:flex;gap:10px;margin-top:auto;padding-top:12px}
.cbtn{border:0;font:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;border-radius:18px;font-weight:800;white-space:nowrap}
.cbtn svg{width:22px;height:22px}
.c-courses .cbtn.shop{flex:1;height:58px;background:var(--strong);color:var(--on-strong);font-size:18px;min-width:0}
.c-courses .cbtn.shop svg{color:var(--star)}
.cbtn.plus{width:58px;height:58px;flex:none;background:var(--yellow-2);color:var(--yellow-t)}
.cxs .cbtn.plus{width:54px;height:54px}
.c-courses.taken{background:var(--yellow-3);border:2px dashed var(--yellow-dash)}
.c-plantes{background:var(--green-2);color:var(--green-t)}
.c-plantes .label{opacity:1;color:var(--green-t)}
.c-plantes h3{font-size:34px;color:var(--green-tt)}
.c-plantes .pinfo{display:flex;align-items:center;gap:8px;margin-top:10px;background:var(--wash);border-radius:12px;padding:7px 12px;font-size:14px;font-weight:700}
.c-plantes .pinfo svg{width:16px;height:16px}
.c-plantes .pcards{display:flex;gap:8px;margin-top:12px}
.c-plantes .pcards > div{flex:1;min-width:0;height:150px;box-sizing:border-box;border-radius:18px;background:var(--wash);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;border:2px solid transparent}
.c-plantes .pcards svg{width:30px;height:30px;color:var(--green-dt);margin-bottom:6px}
.c-plantes .pcards b{font-size:18px;font-weight:800;color:var(--green-tt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.c-plantes .pcards span{font-size:13px;font-weight:600}
.c-plantes .pcards > div.done{background:transparent;border:2px dashed var(--green-dash);opacity:.6;cursor:default}
.c-plantes .pfoot{margin:auto 0 0;padding-top:10px;font-size:15px;font-weight:600}
.c-plantes .pfoot b{color:var(--green-tt)}
.cxs.c-plantes .ic{background:var(--wash)}
.cbtn.wa{height:54px;padding:0 16px;background:var(--hi);color:var(--green-t);font-size:17px;flex:none}

/* ---------- Domotique retenue (domo.js, données d'exemple) ---------- */
.c-aerer{background:var(--air-bg);color:var(--air-t)}
.c-aerer .label{opacity:1;color:var(--air-t)}
.c-aerer h3{font-size:48px;letter-spacing:-1.8px;color:var(--air-tt)}
.c-aerer .dd{display:flex;gap:10px;margin-top:auto;padding-top:12px}
.c-aerer .dd > div{flex:1;min-width:0;background:var(--wash-2);border-radius:18px;padding:10px 12px}
.c-aerer .dd small{display:block;font-size:13px;font-weight:700;opacity:.8}
.c-aerer .dd b{display:block;font-size:19px;font-weight:800;letter-spacing:-.3px;color:var(--ink);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-aerer .dd span{display:block;font-size:13px;font-weight:600;margin-top:2px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-aerer .timer{margin-top:14px;height:12px;border-radius:6px;background:var(--wash);overflow:hidden}
.c-aerer .timer i{display:block;height:100%;border-radius:6px;background:var(--air-d)}
.c-aerer .winrow{display:flex;gap:6px;margin-top:10px}
.c-aerer .winrow span{flex:1;height:44px;border-radius:12px;background:var(--wash-2);display:flex;align-items:center;justify-content:center;gap:6px;font-size:14px;font-weight:700;white-space:nowrap}
.c-aerer .winrow span svg{width:18px;height:18px}
.c-aerer .winrow span.open{background:var(--air-d);color:var(--on-color)}
.c-aerer .fine{margin:10px 0 0;font-size:13px;font-weight:600;opacity:.85}
.cxs.c-aerer .ic{background:var(--wash-2)}
/* 32B line « Absence auto » in the 14A tile */
.c-depart .absl{display:flex;align-items:center;gap:12px;margin-top:10px;height:64px;box-sizing:border-box;padding:0 10px 0 16px;border-radius:18px;background:var(--navy);color:var(--on-color);cursor:pointer}
.c-depart .absl > svg{width:22px;height:22px;color:var(--star)}
.c-depart .absl span{flex:1;min-width:0}
.c-depart .absl b{display:block;font-size:17px;font-weight:800}
.c-depart .absl small{display:block;font-size:13px;font-weight:600;color:var(--navy-t);white-space:nowrap}
.c-depart .absl.off{cursor:default}
.c-depart .absl i{width:44px;height:44px;border-radius:12px;background:var(--glass);display:flex;align-items:center;justify-content:center}
.c-depart .absl i svg{width:20px;height:20px}
.hgo{margin-left:auto;font-size:13px;font-weight:800;color:var(--muted)}

/* ---------- « écran endormi » (mockups/tuiles-endormies.html, strong veil 66 %; app.js checkSleep) ----------
   Flat neutral veil, no blur or filter; opacity / transform only. Below the night veil (never both). */
#t-sleep{position:fixed;left:0;top:0;width:100%;height:100%;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--sleep-t);cursor:pointer;animation:slIn .6s ease-out}
#t-sleep[hidden]{display:none}
#t-sleep .shade{position:absolute;left:0;top:0;right:0;bottom:0;background:var(--sleep-shade);opacity:.66}
#t-sleep .card{position:relative;display:flex;flex-direction:column;align-items:center;max-width:1100px;text-align:center}
#t-sleep .ico{width:220px;height:220px;fill:none;stroke:var(--sleep-t);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
#t-sleep .ico g{transform-box:fill-box;transform-origin:center}
#t-sleep .ico .z{stroke:var(--star)}
#t-sleep .ico .wide{opacity:0}
#t-sleep .txt{font-size:46px;font-weight:800;letter-spacing:-1px;margin-top:18px;text-shadow:0 2px 8px rgba(0,0,0,.35)}
#t-sleep .sub{font-size:26px;font-weight:600;margin-top:10px;color:var(--sleep-sub);text-shadow:0 2px 6px rgba(0,0,0,.35)}
@keyframes slIn{from{opacity:0}to{opacity:1}}
@keyframes slOut{to{opacity:0}}
@keyframes slCard{to{opacity:0;transform:scale(1.15)}}
@keyframes slShow{to{opacity:1}}
@keyframes slUp{to{opacity:0;transform:translate(10px,-24px)}}
#t-sleep.waking{animation:slOut .25s .4s ease-in forwards}
#t-sleep.waking .shade{animation:slOut .6s ease-out forwards}
#t-sleep.waking .card{animation:slCard .35s .25s ease-in forwards}
#t-sleep.waking .ico .shut{animation:slOut .15s ease-out forwards}
#t-sleep.waking .ico .wide{animation:slShow .15s ease-out forwards}
#t-sleep.waking .ico .z{animation:slUp .4s ease-out forwards}
body.no-fade #t-sleep{animation:none}
@media (prefers-reduced-motion: reduce){#t-sleep,#t-sleep *{animation:none !important}}

/* « clé manquante » (app.js showDenied): opaque page colour, dark ink, readable from across the hall */
#t-key{position:fixed;left:0;top:0;width:100%;height:100%;z-index:45;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg);color:var(--ink);text-align:center}
#t-key[hidden]{display:none}
#t-key .ico{width:200px;height:200px;fill:none;stroke:var(--ink);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
#t-key .ico .kh{stroke:var(--red-t);stroke-width:2}
#t-key .txt{font-size:56px;font-weight:800;letter-spacing:-1px;margin-top:24px;max-width:1100px}
#t-key .sub{font-size:28px;font-weight:600;margin-top:14px;color:var(--muted);max-width:1100px}

/* ---------- birthdays (option A, mockups/anniversaires.html): pink pill on the "Aujourd'hui" / "Demain" line ----------
   Same line as the header, takes no height (negative margins); the whole header line is the tap target, and the pill's
   hit area is enlarged for fingers. Tap → the « Anniversaires » view (details/anniv.js). */
.col .agenda .day.has-bd{display:flex;align-items:center;white-space:nowrap;position:relative;cursor:pointer}
.col .agenda .day.none.has-bd{color:var(--muted);font-weight:700}
.col .bdp{position:relative;display:inline-flex;align-items:center;gap:5px;height:24px;margin:-4px 0 -3px auto;padding:0 10px 0 7px;border-radius:999px;background:var(--pink);color:var(--pink-t);font-size:13px;font-weight:700;white-space:nowrap;min-width:0;max-width:226px;box-sizing:border-box}
.col .bdp::before{content:"";position:absolute;left:-18px;right:-10px;top:-11px;bottom:-11px}
.col .bdp svg.i{width:15px;height:15px;stroke-width:2.2;flex:none}
/* action icon (outline chevron, label colour): a separate tap target inside a tappable tile shows it; no extra height */
.col .bdp svg.i:last-child{width:12px;height:12px;stroke-width:3;margin:0 -3px 0 -1px;color:var(--pink-tt)}
.col .bdp > span{overflow:hidden;text-overflow:ellipsis;min-width:0}
.col .bdp b{color:var(--pink-tt);font-weight:800}
/* « À venir » ordinary event (fix 8, app.js agendaWidget): one compact line, date in small on the right */
.col .agenda .up.ev-o{padding:5px 0;font-size:16px}
.col .agenda .up.ev-o .ic{width:26px;height:26px;border-radius:8px;background:var(--line-2);color:var(--muted)}
.col .agenda .up.ev-o .ic svg{width:14px;height:14px}
.col .agenda .up.ev-o > div{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.col .agenda .up.ev-o > small{margin-left:auto;flex:none}