/* @import en tête : un @import placé après @font-face est ignoré par le navigateur (reset, variables, a11y non chargés — régression Φ du 2026-10-08). */
@import url(./imports.css);

/* Typographie officielle Apple — SF UI (pull runtime simulateur, voir SOURCE-VM.txt) */
@font-face { font-family: 'SF UI'; src: url('../../../../usr/share/capsuleos/assets/images/vendors/apple/fonts/SFUI.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'SF UI'; src: url('../../../../usr/share/capsuleos/assets/images/vendors/apple/fonts/SFUIItalic.ttf') format('truetype'); font-style: italic; font-display: swap; }
@font-face { font-family: 'SF Mono'; src: url('../../../../usr/share/capsuleos/assets/images/vendors/apple/fonts/SFUIMono.ttf') format('truetype'); font-display: swap; }

/* Tokens typographiques (contrat visual-fidelity : --font-ui / --font-mono / --head). */
html:has(#ios-17) {
    --font-ui: 'SF UI', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'SF Mono', Menlo, monospace;
}

html {
    scrollbar-color: var(--background);
    scroll-behavior: smooth;
    color: var(--bgw);
}

#ios-17 {
    display: var(--f);
    flex-flow: var(--cnw);
    align-items: var(--c);
    justify-content: var(--sb);
    width: var(--max-w);
    height: var(--max-h);
    background-image: var(--ios);
    background-size: var(--scov);
    background-repeat: var(--nr);
    background-position: var(--c);
    overflow: var(--n);
}
#iosheader{
    display: var(--f);
    flex-flow: var(--rnw);
    align-items: var(--c);
    justify-content: var(--sb);
    width: var(--full);
    height: calc(var(--head) * 1);
    padding: calc(var(--head) / 15) calc(var(--head) / 5);
    font-size: 0.8em;
}
#headercellular{
    display: var(--f);
    flex-flow: var(--rnw);
    align-items: var(--c);
    justify-content: var(--fs);
}
#iosheader img{
    height: calc(var(--head) * 0.35);
}
#headercellular>img{
    padding-right: calc(var(--head) / 10);
}
#headercellular>p:last-child{
    padding-left: calc(var(--head) / 5);
}
#headerbattery>img{
    padding-left: calc(var(--head) / 10);
}
#heure{
    font-weight: var(--wb);
}
#headerbattery{
    display: var(--f);
    flex-flow: var(--rnw);
    align-items: var(--c);
    justify-content: var(--fe);
}


#ios-17 a>img{
    width: calc(var(--head) * 1.2);
}
#ios-17 a>img:active{
    filter:brightness(50%);
}
#tableau, #tableau>nav {
    display: var(--f);
    flex-flow: var(--rnw);
    align-items: var(--c);
    justify-content: var(--sa);
    width: var(--full);
    height: calc(var(--head) * 1.8);
    border: var(--n);
}
#tableau{
   background: #fff6e2cc; 
}

/* Grille SpringBoard — squelette AccΣ aligné sur la GT simulateur (2026-09-27) */
#desktop {
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
    justify-content: flex-start;
    gap: calc(var(--head) * 0.7) calc(var(--head) * 0.5);
    width: var(--full);
    padding: calc(var(--head) * 0.6) calc(var(--head) * 0.5);
}
.sb-page > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
    text-decoration: none;
    color: #fff;
}
.sb-page > a > .sb-label {
    display: block;
    margin-top: 7px;
    font-size: 11px;
    font-weight: 550;
    text-align: center;
    white-space: nowrap;
    text-shadow: none;
}
/* Icône Calendar dynamique (GT : MON + jour) — pas le PNG grille du mois */
.sb-cal .cal-face {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    width: 60px; height: 60px; border-radius: 13px; background: #fff;
    box-shadow: 0 0 0 0.5px rgba(255,255,255,.18);
    box-sizing: border-box; padding-top: 6px;
}
.sb-cal .cal-dow { color: #ff3b30; font-size: 11px; font-weight: 700; letter-spacing: .04em; line-height: 1; }
.sb-cal .cal-dom { color: #1c1c1e; font-size: 38px; font-weight: 300; line-height: 1; margin-top: 1px; }

/* ==== Fidélité springboard iOS — mesures GT (CSS 390x844) recalées 2026-09-27 ====
   widgets 76→235 · grille rangées 272/370/468 (pas 98, icône 62, marge 7 %) ·
   pastille recherche ~688 · dock bar ~740→820 · fond radial (chaud à droite, cyan en bas). */
body#ios-17 {
    background-color: #ff0000;
        background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    color: #fff;
    padding: 0;
}
body#ios-17 #iosheader { height: 44px; padding: 5px 22px 0; color: #fff; font-weight: 600;
    font-family: var(--font-ui); }
body#ios-17 #heure { font-size: 1.05em; }
body#ios-17 .sb-label,
body#ios-17 .widget-label,
body#ios-17 #recherche,
body#ios-17 .widget-cal,
body#ios-17 .sb-cal {
    font-family: var(--font-ui);
}
body#ios-17 #headerbattery img { height: 11px; filter: brightness(0) invert(1); }
body#ios-17 #headercellular { display: none; }

/* Widgets : cartes top 76, hauteur 159 + libellés (GT) */
#widgets { display: flex; gap: 22px; margin: 33px 26px 0; height: 178px; }
#widgets .widget-col { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; }
#widgets .widget { width: 100%; height: 158px; border-radius: 20px; background: #fff; color: #1c1c1e;
                   box-shadow: none; }
#widgets .widget-maps { background: #e2efd9; }
/* Widget Calendar Φ 1,77 % : day 0,73 / num w200 `#000` mt4 / ev mt26 + labels 12 px (VERIFY×3). */
.widget-cal { padding: 14px 14px 8px 16px; box-sizing: border-box; text-align: left; }
.w-cal-day { color: #ff3b30; font-weight: 700; font-size: 0.73em; letter-spacing: 0.02em; margin: 0; }
.w-cal-num { font-size: 2.1em; font-weight: 200; line-height: 0.88; margin-top: 4px; color: #000; }
.w-cal-ev { color: #8e8e93; font-size: 0.92em; letter-spacing: -0.02em; margin-top: 26px; }
.widget-label { margin-top: 4px; font-size: 12px; line-height: 1.2; color: #fff;
                text-shadow: none; }

/* Grille : première rangée à 272 (235 + 37), icône 62, pas de rangée 98 */
body#ios-17 .sb-page {
    display: grid; grid-template-columns: repeat(4, 62px); grid-auto-rows: 62px;
    row-gap: 36px; column-gap: 21px;
    justify-content: center; align-content: start;
    margin: 37px 0 0; padding: 0; width: 100%; background: none;
}
body#ios-17 #desktop > a { display: block; width: 62px; height: 62px; }
body#ios-17 #desktop > a > img { width: 62px; height: 62px; border-radius: 14px;
                                    box-shadow: 0 0 0 0.5px rgba(255,255,255,.18); }

/* Pastille de recherche : ~688 (530 + 158) */
#recherche { display: flex; align-items: center; justify-content: center; gap: 6px;
             margin: 158px auto 0; padding: 7px 12px; width: max-content; height: 16px;
             background: rgba(255,255,255,.30); border-radius: 999px;
             font-size: .66em; color: #fff; backdrop-filter: blur(6px); }

/* Dock : barre ~740→820, icônes 60 */
body#ios-17 #tableau, body#ios-17 #tableau > nav {
    width: 86%; margin: 24px auto 24px; height: 80px;
    background: rgba(255,255,255,.32); border-radius: 30px;
    backdrop-filter: blur(14px); border: 0;
    display: flex; align-items: center; justify-content: space-evenly;
}
body#ios-17 #tableau > nav > a { display: block; width: 60px; height: 60px; }
body#ios-17 #tableau > nav > a > img { width: 60px; height: 60px; border-radius: 14px; }

/* ==== Géométrie recalée sur mesures GT (accueil 2026-10-05) ====
   grille : icônes 60 + libellés, pas colonnes 90 (marge 30), rangées 272/370 ;
   dock : barre 738→831 (h 93), largeur 348 centrée, r30 ; cartes widgets 26-184 / 206-364, y 77-235. */
body#ios-17 .sb-page {
    grid-template-columns: repeat(4, 60px); grid-auto-rows: 78px;
    row-gap: 20px; column-gap: 30px;
    margin-top: 17px; padding: 0;
}
body#ios-17 .sb-page > a { width: 60px; height: 78px; }
body#ios-17 .sb-page > a > img { width: 60px; height: 60px; border-radius: 13.5px;
    box-shadow: none; }

#widgets { margin: 27px 26px 0; height: 178px; gap: 22px; }
#widgets .widget { border-radius: 22px; }

#recherche { margin: 219px auto 0; background: rgba(155,74,78,0.74); color: #fff; backdrop-filter: blur(16px); }
#recherche span { opacity: .95; }

/* Dock chrome Φ 1,77 % : r35 blur 60 + icônes r13,5 (VERIFY×3, stack widgets/cal). */
body#ios-17 #tableau, body#ios-17 #tableau > nav {
    width: 366px; height: 95px; margin: 18px auto 10px; border-radius: 35px;
    background: rgba(204, 97, 116, 1);
    backdrop-filter: blur(60px); -webkit-backdrop-filter: blur(60px);
}
body#ios-17 #tableau > nav {
    display: flex; align-items: center; justify-content: center;
    gap: 30px; width: 100%; height: 100%;
    background: transparent; margin: 0; border: 0;
}
body#ios-17 #tableau > nav > a, body#ios-17 #tableau > nav > a > img { width: 60px; height: 60px; border-radius: 13.5px; }

/* barre d'état : glyphes blancs alignés sur la GT (heure à x≈33, glyphes à droite) */
body#ios-17 #iosheader { padding: 5px 26px 0; }

/* Fond iOS 17 — phase « Home PortraitUp Light » rendue depuis les documents CoreAnimation officiels du
   runtime (ios-17-iphone-caml/main.caml + calques HEIC, root/tools/lab/render-caml-wallpaper.mjs,
   2026-10-12). Remplace l'empilement réglé à la main (boost / maskbr-ora screen / bande soft-light) :
   springboard Φ 12,3 → 11,5 %, hors icônes 12,7 → 9,2 %. Écart moyen par canal du fond seul, masques
   widgets / icônes / pilule / dock : 3,0 (ancien calque seul : 34,6) — la recette est exacte, le reste est le contenu. */
body#ios-17 {
    background-color: #4f0219;
    background-image: url('../../../../usr/share/capsuleos/assets/images/vendors/apple/wallpaper/ios-17-iphone-home-portrait.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    color: #fff;
    padding: 0;
}

/* Shell springboard : surface d'app plein écran + indicateur d'accueil (modèle iOS). */
#ios-app { position: fixed; inset: 0; background: #000; display: none; z-index: 20;
           flex-direction: column; }
#ios-app-cadre { flex: 1; width: 100%; border: 0; background: #fff; }
#ios-app-retour { flex: 0 0 28px; width: 140px; margin: 6px auto 8px; border: 0; border-radius: 999px;
                  background: rgba(255,255,255,.85); cursor: pointer; }
#ios-app-retour:hover { background: #fff; }

/* ─── Pages du springboard (GT page 1 : 8 icônes) ────────────────────────────────────
   La page 1 reproduit la GT ; les autres apps restent atteignables sur la page 2,
   comme dans iOS (indicateur de pages, navigation au clic sur les points). */
#desktop .sb-page { display: none; }
#desktop .sb-page.sb-page-on { display: grid; }
/* Les blocs par version (body#ios-17 .sb-page { display: grid }) sont plus spécifiques que
   `#desktop .sb-page` : on réaffirme l'état à spécificité supérieure, sinon les deux pages
   s'affichent l'une sous l'autre. */
body[id] #desktop .sb-page:not(.sb-page-on) { display: none; }
body[id] #desktop .sb-page.sb-page-on { display: grid; }
/* iOS 16+ : au repos la pastille Recherche remplace les points de page (GT springboard sans points) ;
   ils n'apparaissent qu'au changement de page (.is-paging) ou au clavier. */
#sb-points { display: none; justify-content: center; gap: 7px; margin: 12px auto 0; }
#sb-points.is-paging,
#sb-points:focus-within { display: flex; }
#sb-points span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.45); }
#sb-points span.on { background: #fff; }
#sb-points span[role="button"] { cursor: pointer; }

/* Vague orange Home Light — bande mid/upper (GT trop orange vs CAP magenta).
   Géométrie calée Φ : top 22 % / h 37 % / size 330 % soft-light. */
body#ios-17::before {
    content: ''; position: fixed; left: 0; right: 0; top: 22%; height: 37%;
    background: url('../../../../usr/share/capsuleos/assets/images/vendors/apple/wallpaper/ios-17-wallpaper-orange-home-light.webp') center top / 330% auto no-repeat;
    mix-blend-mode: soft-light; opacity: 1.0; pointer-events: none; z-index: 0;
}
body#ios-17 > * { position: relative; z-index: 1; }









/* iconsR soft-light (Φ 6,58 %) — CAP iconsR trop peu bleu (−B).
   Géométrie : l55 w45 t42 h32 op 0,58 #3080b0. */
/* AppIcon filter (Φ 6,58 %) — fidélité glyphes grille/dock vs GT. */
body#ios-17 .sb-page img { filter: saturate(1.06) contrast(1.03) brightness(1.02); }
body#ios-17 #dock img { filter: saturate(1.06) contrast(1.03) brightness(1.02); }
/* 2ᵉ bande orange midL soft-light (Φ 1,77 %) — VERIFY×3. */
body#ios-17::after {
    content: ''; position: fixed; left: 0; width: 66%; top: 24%; height: 28%;
    background: url('../../../../usr/share/capsuleos/assets/images/vendors/apple/wallpaper/ios-17-wallpaper-orange-home-light.webp') center top / 335% auto no-repeat;
        mix-blend-mode: soft-light; opacity: 1.0; pointer-events: none; z-index: 0;
}


#recherche .sb-search-ico { display: block; flex-shrink: 0; opacity: .95; }

/* ==== Bas d'écran ancré (GT iPhone 13, 2026-10-12 : page 2 et mode modification) ====
   La pastille Recherche (y≈688), la pastille de pages (même place, en mode modification) et le dock (y 738)
   gardent leur position quel que soit le nombre de rangées de la page — en flux elles remontaient en page 2.
   Dock : page 1 garde sa couleur calée (GT 2026-10-05) ; en page 2 le dock mesuré est blanc (GT 21). */
html.ios-form-phone body#ios-17 #desktop { position: relative; }
/* Ancrage au bas de l'écran (PWA sur tout modèle d'iPhone ou de téléphone) : 156 / 106 px depuis le bas = 688 / 738
   sur l'écran GT de 844 px ; un écran plus haut garde la Recherche et le dock au même écart du bas, comme iOS. */
html.ios-form-phone body#ios-17 #recherche { position: absolute; top: calc(100% - 156px); left: 0; right: 0; margin: 0 auto; }
html.ios-form-phone body#ios-17 #sb-points { position: absolute; top: calc(100% - 156px); left: 0; right: 0; margin: 0 auto; z-index: 2; }
html.ios-form-phone body#ios-17 #tableau { position: absolute; top: calc(100% - 106px); left: 50%; margin: 0 0 0 -183px; }
/* Page 1 : couleur calée sur la GT du 2026-10-05 (état « rose » du fond) ; page 2 (GT 21 du 2026-10-12,
   état « cyan ») : dock blanc 253/248/253 mesuré. */
html.ios-form-phone body#ios-17:has(#desktop .sb-page:nth-child(2).sb-page-on) #tableau { background: rgba(253, 248, 253, 0.97); }
html.ios-form-phone.ios-home-editing body#ios-17 #recherche { visibility: hidden; }

/* §10.61 — accueil iPhone re-mesuré sur la GT 10 du 2026-10-12 : cartes widgets y 77–235 (et non 71),
   première rangée d'icônes à y 273 (et non 290). Page 1 seulement : la page 2 n'a pas de widgets. */
html.ios-form-phone body#ios-17 #widgets { margin-top: 33px; }
html.ios-form-phone body#ios-17 #desktop .sb-page:first-child { margin-top: -6px; }