/* Compact homepage shared by public pages and local previews. */
.direct-preview{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px max(16px,4vw);font:11px/1.3 'Work Sans',sans-serif;color:#898992;background:#0b0b0f;border-bottom:1px solid #ffffff08}
.direct-preview a{display:flex;align-items:center;gap:9px;color:#c4c4cd;text-decoration:none;transition:color .2s}
.direct-preview a:hover{color:#fff}.direct-preview a:focus-visible{outline:2px solid #e98036;outline-offset:4px}
.home-direct .showcase-stage{padding:25px 0 24px;min-height:0}
.home-direct .hero-particles{opacity:.5}
.home-direct .showcase-copy{padding:0 24px}
.home-direct .direct-intro{display:flex;align-items:center;justify-content:center;gap:28px;max-width:1020px;margin:auto}
.home-direct .showcase-copy h1{font-size:clamp(38px,4.25vw,62px);line-height:1.16;letter-spacing:-.055em;margin:0;text-align:center}
.home-direct .showcase-copy .hero-lead{font-size:15px;line-height:1.5;margin:13px auto 0;max-width:650px}
.home-direct .showcase-copy .ribbon-actions{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:25px;margin:19px 0 0}
.home-direct .showcase-copy .text-link{font-size:13px}
.home-direct #screens{position:relative;z-index:2;margin:24px auto 0;padding:0;border:0;max-width:none;--hardware-inset:clamp(16px,4vw,56px);scroll-margin-top:20px}
.home-direct .direct-account-note{font-size:12px;line-height:1.5;text-align:center;color:#aeadb8;margin:0 0 13px}
.home-direct .screens-heading{margin:0;height:0}
.direct-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.site-home.home-direct #screens-grid.available-apps-grid{display:flex;width:100%;gap:12px;padding:0 var(--hardware-inset) 9px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--hardware-inset)}
.site-home.home-direct .available-apps-grid .hardware-tile{display:grid;flex:0 0 clamp(214px,21vw,286px);width:auto;min-width:0;scroll-snap-align:start;grid-template-rows:26px 23px 136px 36px;gap:0;min-height:0;padding:17px 16px 12px;border-radius:17px;background:linear-gradient(145deg,#ffffff06,transparent 60%),#17171c;border:1px solid #ffffff0d;box-shadow:none;transform:none;isolation:isolate;transition:background .3s,border-color .3s,box-shadow .3s}
.home-direct .screens-section .hardware-tile::before{border-radius:inherit;background:radial-gradient(ellipse at 50% 0,#ffffff0c,transparent 72%);opacity:0;transition:opacity .35s}
.site-home.home-direct .available-apps-grid .hardware-tile.available:hover{border-color:#ffffff24;background-color:#1c1c22;transform:none;box-shadow:0 8px 22px #0002}
.home-direct .screens-section .hardware-tile:hover::before{opacity:1}
.home-direct .screens-section .hardware-heading{gap:9px}
.home-direct .screens-section .hardware-heading svg{width:20px;height:20px;color:var(--orange)}
.home-direct .screens-section .hardware-tile h3{font-size:16px;font-weight:650;line-height:1.35}
.site-home.home-direct .available-apps-grid .hardware-support{margin:0;min-height:0;font-size:11px;line-height:1.7;color:#aaa9b4;white-space:nowrap}
.site-home.home-direct .available-apps-grid .hardware-art{height:124px;margin:6px -5px;display:flex;align-items:center;justify-content:center}
.site-home.home-direct .available-apps-grid .hardware-art>img{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;transform:none;filter:drop-shadow(0 8px 8px #0004);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.site-home.home-direct .available-apps-grid .hardware-tile.mobile .hardware-art>img{width:auto;height:100%;transform:rotate(3deg);border-radius:10px;border:3px solid #29292e;box-shadow:0 0 0 1px #ffffff20}
.site-home.home-direct .available-apps-grid .hardware-tile.available:hover .hardware-art>img{transform:translateY(-3px)}
.site-home.home-direct .available-apps-grid .hardware-action{min-height:0;margin:0;padding-top:9px;font-size:12px;line-height:1.3;border-top:1px solid #ffffff0b;color:#d4d3dc;align-self:stretch}
.site-home.home-direct .available-apps-grid .hardware-action>span{font-size:inherit}
.site-home.home-direct .upcoming-apps{justify-content:center;gap:12px;width:calc(100% - 48px);margin:17px auto 0;padding:0;border:0}
.site-home.home-direct .upcoming-apps h3{font-size:11px;color:#898994;font-weight:400}
.site-home.home-direct .upcoming-apps-list{gap:16px}.site-home.home-direct .upcoming-app{font-size:11px;gap:5px;color:#aaa9b4}
.site-home.home-direct .upcoming-app svg{width:14px;height:14px;color:#81818d}
.site-home.home-direct .experience-section{padding-top:58px}
.home-direct .experience-heading{align-items:center}
.home-direct .experience-heading .deck-controls{margin:0;gap:8px;flex:none}
.home-direct .experience-heading .deck-controls>div{width:0;min-width:0}
.home-direct .experience-heading .deck-controls button{width:36px;height:36px;min-height:0;padding:0;font-size:18px;border-color:#ffffff17;background:#ffffff05}
/* All platforms share one compact, native scrolling row. */
.home-direct .hardware-window{width:100%}
.home-direct .hardware-window::before,.home-direct .hardware-window::after{width:var(--hardware-inset)}
.home-direct #screens>.hardware-controls{justify-content:flex-end;padding:3px var(--hardware-inset) 0;gap:7px}
.home-direct #screens>.hardware-controls button{width:32px;height:32px;min-height:0;padding:0}
.home-direct #screens>.hardware-controls button span{font-size:17px}
.site-home.home-direct .available-apps-grid .hardware-tile.soon{background:#17171c;cursor:default}
.site-home.home-direct .available-apps-grid .hardware-tile.soon .hardware-heading svg{color:#93939e}
.site-home.home-direct .available-apps-grid .hardware-tile.soon .hardware-art{opacity:.72;filter:saturate(.35)}
.site-home.home-direct .available-apps-grid .hardware-tile.soon .hardware-action>span{font-size:11px}
.site-home.home-direct .available-apps-grid .hardware-generated .hardware-art{mix-blend-mode:lighten}
.site-home.home-direct .available-apps-grid .hardware-generated .hardware-art>img{filter:none;border:0;border-radius:0;box-shadow:none}
.site-home.home-direct .available-apps-grid .hardware-tile.available .hardware-action{color:var(--orange)}
@media(max-width:1000px) and (min-width:701px){
 .home-direct .direct-intro{gap:16px}
 .site-home.home-direct #screens-grid.available-apps-grid{gap:10px;width:100%}
 .site-home.home-direct .available-apps-grid .hardware-tile{flex-basis:215px;padding:13px 12px 10px;grid-template-rows:24px 23px 112px 32px;border-radius:13px}
 .home-direct .screens-section .hardware-tile h3{font-size:13px}.home-direct .screens-section .hardware-heading{gap:6px}.home-direct .screens-section .hardware-heading svg{width:17px;height:17px}
 .site-home.home-direct .available-apps-grid .hardware-support{font-size:10px;white-space:normal;line-height:1.5}
 .site-home.home-direct .available-apps-grid .hardware-art{height:100px}.site-home.home-direct .available-apps-grid .hardware-action{font-size:11px}
}
@media(max-width:700px){
 .direct-preview{padding:7px 14px;font-size:10px}.direct-preview>span{font-size:0}.direct-preview>span::after{content:'Mango · Studio';font-size:10px}
 .home-direct .showcase-stage{padding:22px 0 20px}
 .home-direct .showcase-copy{padding:0 16px}
 .home-direct .direct-intro{gap:8px;max-width:470px}
 .home-direct .showcase-copy h1{font-size:clamp(23px,5.95vw,39px);line-height:1.23;letter-spacing:-.052em;flex:none}
 .home-direct .showcase-copy .hero-lead{font-size:12px;margin-top:12px;max-width:none;line-height:1.5}
 .home-direct .showcase-copy .ribbon-actions{flex-direction:row;gap:17px;margin-top:16px}
 .home-direct .showcase-copy .text-link{font-size:11px}
 .home-direct #screens{margin-top:20px}.home-direct .direct-account-note{font-size:10px;margin-bottom:10px}
 .site-home.home-direct #screens-grid.available-apps-grid{width:100%;gap:9px}
 .site-home.home-direct .available-apps-grid .hardware-tile{flex-basis:176px;padding:11px 12px 9px;border-radius:13px;grid-template-rows:23px 21px 98px 29px}
 .home-direct .screens-section .hardware-tile h3{font-size:13px}.home-direct .screens-section .hardware-heading{gap:7px}.home-direct .screens-section .hardware-heading svg{width:17px;height:17px}
 .site-home.home-direct .available-apps-grid .hardware-support{font-size:9px;line-height:1.7}
 .site-home.home-direct .available-apps-grid .hardware-art{height:92px;margin:3px -3px}
 .site-home.home-direct .available-apps-grid .hardware-action{font-size:11px;padding-top:8px}
 .site-home.home-direct .upcoming-apps{gap:7px;margin-top:13px;flex-wrap:wrap;width:calc(100% - 28px)}
 .site-home.home-direct .upcoming-apps h3,.site-home.home-direct .upcoming-app{font-size:9px}.site-home.home-direct .upcoming-apps-list{gap:10px}
 .site-home.home-direct .experience-section{padding-top:38px}
 .home-direct .experience-heading{display:flex;align-items:center;gap:16px}
 .home-direct .experience-heading h2{font-size:23px}
}
@media(prefers-reduced-motion:reduce){.home-direct .hardware-art>img,.home-direct .hardware-tile::before{transition:none!important}.home-direct .hardware-tile.available:hover .hardware-art>img{transform:none!important}}

/* Accueil du 21/09 : titre agrandi, fonctionnalités sous l'ouverture, supports en fin de page. */
.home-direct .showcase-copy h1{font-size:clamp(46px,5.4vw,78px);line-height:1.12}
.home-direct .showcase-copy .hero-lead{font-size:16px;margin-top:15px}
.home-direct .hero-platforms{margin-top:17px;gap:8px}
/* Une seule couleur pour tous les raccourcis ; seul le survol la change. */
.home-direct .hero-platforms .hero-platform,
.home-direct .hero-platforms .hero-platform.is-upcoming{color:#b0b0b8}
.home-direct .hero-platforms .hero-platform:hover,
.home-direct .hero-platforms .hero-platform:focus-visible,
.home-direct .hero-platforms .hero-platform.is-upcoming:hover,
.home-direct .hero-platforms .hero-platform.is-upcoming:focus-visible{color:var(--orange)}
/* Les huit raccourcis tiennent sur une ligne, quel que soit leur nombre. */
.home-direct .showcase-copy .hero-platforms{grid-template-columns:repeat(auto-fit,minmax(40px,max-content))}
/* Les huit supports tiennent à l'écran sur ordinateur, sans flèche ni défilement caché. */
@media(min-width:701px){
 .site-home.home-direct #screens-grid.available-apps-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;padding-bottom:0}
}
@media(min-width:701px) and (max-width:1100px){
 .site-home.home-direct #screens-grid.available-apps-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.site-home.home-direct .showcase-stage .experience-section{padding:16px 0 0}
.home-direct .showcase-stage .experience-heading{display:block;margin:0;min-height:0}
.home-direct #screens{margin:0 auto;padding:70px 0 0;scroll-margin-top:24px}
.home-direct .screens-heading{display:block;height:auto;margin:0 auto 18px;padding:0;text-align:center}
.home-direct .screens-section .screens-heading h2{margin:0;font-size:clamp(25px,2.5vw,34px);line-height:1.2;letter-spacing:-.04em;text-align:center}
@media(max-width:700px){
 .home-direct .showcase-copy h1{font-size:clamp(30px,8vw,44px);line-height:1.17}
 .home-direct .showcase-copy .hero-lead{font-size:13px;margin-top:13px}
 .home-direct .hero-platforms{margin-top:14px}
 .home-direct .hero-platforms .hero-platform{width:32px}
 .home-direct .hero-platforms .hero-platform svg{width:19px;height:19px}
 .site-home.home-direct .showcase-stage .experience-section{padding-top:12px}
 .home-direct #screens{padding-top:46px}
 .home-direct .screens-heading{margin-bottom:14px}
 .home-direct .screens-section .screens-heading h2{font-size:21px}
}