/* A pocket dashboard; exploration screens retain their own scrolling. */
.app:has(#view-home.is-active){padding:0}
.app:has(#view-home.is-active)>main{height:100dvh;padding:0;overflow:auto}
#view-home .home-cover{height:100dvh;min-height:520px;box-sizing:border-box;padding:10px 16px max(10px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px;background-position:center center}
#view-home .home-header{padding:0;margin:0;min-height:48px;flex-shrink:0}
#view-home .home-logo{width:180px;max-width:58%;height:auto}
#view-home .home-actions{gap:7px}
#view-home .round-action{width:40px;height:40px;border-radius:15px;border:1px solid #fff9;background:#ffffffba;box-shadow:0 3px 10px #073a4b15}
#view-home .home-hero{display:grid;grid-template-columns:1fr 74px;height:78px;min-height:78px;margin:0;gap:0;align-items:center;position:relative}
#view-home .hero-copy{padding:0}
#view-home .greeting{font-size:12px;margin:0 0 3px}
#view-home .hero-copy h1{font-size:27px;line-height:1.02;letter-spacing:-1px;margin:0}
#view-home .hero-subtitle{display:none}
#view-home .mascot-stage{height:84px;overflow:visible}
#view-home .mascot-float{height:100%;animation:none}
#view-home .mascot{height:91px;width:70px;max-width:none;object-fit:contain;top:auto;bottom:0;right:0;transform:none}
#view-home .mascot-glow{display:none}
#view-home .home-widgets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;position:relative;z-index:6;flex-shrink:0}
#view-home .home-widget,#view-home .banana-access-home-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:84px;min-height:0;min-width:0;width:auto;margin:0;padding:8px 3px;border-radius:22px;border:1px solid #ffffffb0;box-shadow:0 4px 0 #083c4518,0 7px 15px #083c4510;text-decoration:none;color:#123f48;transition:transform .15s}
#view-home .home-widget:active{transform:translateY(3px)}
#view-home .home-widget>span{font-size:25px;line-height:28px}
#view-home .home-widget strong{font-size:12px;line-height:1.2;text-align:center}
#view-home .home-widget small{font-size:9px;line-height:1.2;margin:0;text-align:center}
#view-home .widget-maps{background:linear-gradient(145deg,#fff3a1,#ffda49)}
#view-home .widget-day{background:linear-gradient(145deg,#ffe5c8,#ffb889)}
#view-home .widget-games{background:linear-gradient(145deg,#d5fff3,#86e7cf)}
#view-home .banana-access-home-card{background:linear-gradient(145deg,#eadcff,#c6a2f2);color:#422866;overflow:hidden}
#view-home .banana-access-home-card__icon{display:none}
#view-home .banana-access-home-card__copy{display:contents}
#view-home .banana-access-home-card__copy>strong,#view-home .banana-access-home-card__copy>small{display:none}
#view-home .banana-access-home-card__copy>span{position:absolute;bottom:10px;font-size:7px;letter-spacing:0;max-width:100%;white-space:nowrap}
#view-home .banana-access-home-card>button{position:absolute;inset:0;width:100%;height:100%;max-width:none;padding:0 0 18px;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:0;background:transparent;color:inherit;border:0;border-radius:22px;box-shadow:none}
#view-home .banana-access-home-card>button::before{content:'✦';font-size:28px;line-height:28px;color:#7947bb}
#view-home .banana-access-home-card>button::after{content:'Mon accès';font-size:12px;font-weight:800}
#view-home .sun-route{order:5;position:relative;flex-shrink:0;align-self:center;width:auto;min-width:160px;margin:0;padding:5px 14px;background:#ffffff9c;border:1px solid #fff9;border-radius:30px;box-shadow:none}
#view-home .sun-route__curve,#view-home .sun-route__times{display:none}
#view-home .sun-route p{margin:0;font-size:10px;display:flex;gap:8px;align-items:center;justify-content:center}
#view-home .sun-route p strong{font-size:13px}
#view-home .universes{position:relative;z-index:5;padding:0;margin:0;flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:8px}
#view-home .universes__title--home{margin:0 auto;padding:5px 12px;background:#ffffffe0;box-shadow:none;border-radius:30px}
#view-home .universes__title h2{font-size:13px}
#view-home .universe-grid{gap:5px 12px;align-content:center}
#view-home .universe{gap:1px;scroll-margin:0}
#view-home .universe img{width:clamp(52px,calc((100dvh - 400px)/3),104px);height:clamp(52px,calc((100dvh - 400px)/3),104px)}
#view-home .universe b{font-size:11px;margin:0;padding:2px 8px;border-radius:12px;background:#ffffffd9;color:#123e49;line-height:1.15}
#view-home .universe--urgence{margin:0}
.app[data-theme=night] #view-home .home-widget{border-color:#ffffff35}
.app[data-theme=night] #view-home .widget-maps{background:linear-gradient(145deg,#ffe796,#e5b844)}
.app[data-theme=night] #view-home .widget-day{background:linear-gradient(145deg,#e7c8fb,#c18dde)}
.app[data-theme=night] #view-home .widget-games{background:linear-gradient(145deg,#aeeada,#66bfae)}
.app[data-theme=night] #view-home .sun-route{background:#102b49db;color:#fff;border-color:#ffffff30}
.app[data-theme=night] #view-home .universes__title{background:#102b49db;color:#fff}
@media(min-width:700px) and (min-height:600px){#view-home .home-cover{padding-top:16px}}
@media(orientation:landscape) and (max-height:600px){
 #view-home .home-cover{min-height:300px;display:grid;grid-template-columns:220px 1fr;grid-template-rows:46px minmax(74px,1fr) 84px 30px;align-content:stretch;gap:8px 20px}
 #view-home .home-header{grid-column:1;min-height:0}
 #view-home .home-logo{width:130px}
 #view-home .home-actions{gap:4px}
 #view-home .round-action{width:34px;height:34px}
 #view-home .home-hero{grid-column:1;grid-row:2;min-height:0;height:74px;grid-template-columns:1fr 48px}
 #view-home .hero-copy h1{font-size:23px}
 #view-home .mascot{width:48px;height:74px}
 #view-home .home-widgets{grid-column:1;grid-row:3;gap:5px}
 #view-home .home-widget,#view-home .banana-access-home-card{border-radius:15px}
 #view-home .home-widget strong,#view-home .banana-access-home-card>button::after{font-size:10px}
 #view-home .home-widget small{display:none}
 #view-home .banana-access-home-card__copy>span{font-size:6px}
 #view-home .sun-route{grid-column:1;grid-row:4;justify-self:center}
 #view-home .universes{grid-column:2;grid-row:1/5}
 #view-home .universe-grid{gap:4px}
 #view-home .universe img{width:clamp(48px,calc((100dvh - 150px)/3),90px);height:clamp(48px,calc((100dvh - 150px)/3),90px)}
 .app:has(#view-home.is-active){width:100%;max-width:900px;border-radius:0}
}
@media(prefers-reduced-motion:reduce){#view-home *{animation:none!important;transition:none!important}}
/* Nine destinations, with utilities grouped below. */
#view-home .home-header{order:0}
#view-home .home-hero{order:1;grid-template-columns:minmax(0,1fr) 54px 124px;height:84px;min-height:84px;gap:3px}
#view-home .hero-copy h1{font-size:23px}
#view-home .mascot{width:54px;height:80px}
#view-home .home-hero .sun-route{order:initial;align-self:center;width:124px;min-width:0;margin:0;padding:5px 7px;border-radius:18px;background:#ffffff45;border:1px solid #ffffff70}
#view-home .sun-route__curve{display:block;height:35px}
#view-home .sun-route__line{height:28px;bottom:2px}
#view-home .sun-route__marker{font-size:20px;transform:translate(-25%,-30%)}
#view-home .sun-route__times{display:flex;font-size:6px;margin:0}
#view-home .sun-route p{font-size:8px;gap:4px;margin-top:3px}
#view-home .sun-route p strong{font-size:11px}
#view-home .universes{order:2}
#view-home .universe--urgence{grid-column:auto}
#view-home .home-widgets{order:3}
#view-home .home-widget,#view-home .banana-access-home-card{height:76px}
#view-home .widget-account{background:linear-gradient(145deg,#d5fff3,#86e7cf);cursor:pointer}
#view-home .home-legal{order:4;align-self:flex-end;position:relative;z-index:6;height:24px;flex-shrink:0}
#view-home .home-legal button{border:0;background:#ffffffb8;color:#123d49;font:11px inherit;text-decoration:underline;border-radius:10px;padding:5px 10px;min-height:24px;cursor:pointer}
#view-home .universe img{width:clamp(48px,calc((100dvh - 410px)/3),104px);height:clamp(48px,calc((100dvh - 410px)/3),104px)}
.home-info-dialog{border:2px solid #ffdb49;border-radius:24px;background:#fff9e8;color:#153d48;padding:28px;max-width:min(90vw,380px);box-shadow:0 15px 60px #001d4660}
.home-info-dialog::backdrop{background:#06253d9c;backdrop-filter:blur(3px)}
.home-info-dialog h2{font-size:22px;margin:0 35px 14px 0}
.home-info-dialog p{font-size:16px;line-height:1.5}
.home-info-close{position:absolute;right:8px;top:8px;width:40px;height:40px;border:0;border-radius:14px;background:#ffdf55;color:#153d48;font-size:25px;cursor:pointer}
@media(max-width:360px){#view-home .home-hero{grid-template-columns:minmax(0,1fr) 44px 100px}#view-home .home-hero .sun-route{width:100px}#view-home .hero-copy h1{font-size:20px}#view-home .mascot{width:44px}}
@media(orientation:landscape) and (max-height:600px){
 #view-home .home-cover{grid-template-rows:46px minmax(74px,1fr) 76px 24px}
 #view-home .home-hero{grid-template-columns:1fr 100px;grid-row:2;height:auto;align-self:center}
 #view-home .mascot-stage{display:none}
 #view-home .home-hero .sun-route{width:100px}
 #view-home .home-widgets{grid-row:3}
 #view-home .home-legal{grid-column:1;grid-row:4;justify-self:end}
 #view-home .universe img{width:clamp(48px,calc((100dvh - 150px)/3),90px);height:clamp(48px,calc((100dvh - 150px)/3),90px)}
}
#view-home .home-legal button{font-family:inherit;font-size:11px;line-height:14px;height:24px;padding:4px 8px}
@media(orientation:landscape) and (max-height:600px){#view-home .home-hero .sun-route{grid-area:auto}#view-home .home-hero{min-height:74px}#view-home .home-cover{grid-template-rows:46px minmax(74px,1fr) 76px 24px}}
body:has(#view-home.is-active){padding:0}
/* Banana left, miniature clock right, keeping the title between them. */
#view-home .home-hero{grid-template-columns:54px minmax(0,1fr) 124px}
#view-home .mascot-stage{grid-column:1;grid-row:1}
#view-home .hero-copy{grid-column:2;grid-row:1;padding-left:4px}
#view-home .home-hero .sun-route{grid-column:3;grid-row:1}
@media(max-width:360px){#view-home .home-hero{grid-template-columns:44px minmax(0,1fr) 100px}}
@media(orientation:landscape) and (max-height:600px){#view-home .home-hero{grid-template-columns:1fr 100px}#view-home .hero-copy{grid-column:1}#view-home .home-hero .sun-route{grid-column:2}}

/* Date and album share the existing clock footprint. */
#view-home .home-hero .sun-route{text-decoration:none;color:inherit;cursor:pointer}
#view-home .home-hero .sun-route__curve{height:35px}
#view-home .sun-route__date{display:block;text-align:center;font-size:9px;font-weight:800;line-height:14px;white-space:nowrap;color:#123d49}
#view-home .sun-route:focus-visible{outline:3px solid #b43b86;outline-offset:2px}
[data-theme="night"] #view-home .sun-route__date{color:#fff2a8}

#view-home .home-hero .sun-route__marker{font-size:14px;transform:translate(-50%,-50%)}