/* @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-18) {
    --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-18 {
    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-18 a>img{
    width: calc(var(--head) * 1.2);
}
#ios-18 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 (HIG) — jour + date, pas le PNG grille */
.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; }
/* Icône Téléphone (baseline iOS Phone — vert + combiné) */
.sb-phone .phone-face {
    display: flex; align-items: center; justify-content: center;
    width: 60px; height: 60px; border-radius: 13px;
    background: linear-gradient(180deg, #30d158 0%, #34c759 100%);
    box-shadow: 0 0 0 0.5px rgba(255,255,255,.18);
}
.sb-phone .phone-face svg { display: block; transform: rotate(-12deg); }

/* ==== 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-18 {
    background-color: #ff0000;
        background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    color: #fff;
    padding: 0;
}
body#ios-18 #iosheader { height: 44px; padding: 5px 22px 0; color: #fff; font-weight: 600;
    font-family: var(--font-ui); }
body#ios-18 #heure { font-size: 1.05em; }
body#ios-18 .sb-label,
body#ios-18 .widget-cal,
body#ios-18 .widget-photos,
body#ios-18 #recherche,
body#ios-18 .sb-cal {
    font-family: var(--font-ui);
}
body#ios-18 #headerbattery img { height: 11px; filter: brightness(0) invert(1); }
body#ios-18 #headercellular { display: none; }

/* Widgets : Photos (iPadOS medium) + Calendrier */
#widgets { display: flex; gap: 14px; margin: 32px 24px 0; height: 159px; }
#widgets .widget { flex: 1; border-radius: 22px; background: #fff; color: #1c1c1e;
                   box-shadow: 0 6px 18px rgba(0,0,0,.18); cursor: pointer; }
#widgets .widget-pale { background: #f4f7f2; }
#widgets .widget-pale::after { content: ''; display: block; height: 104px; margin: 14px;
                               border-radius: 14px; background: #dfe9d8; }
.widget-cal { padding: 12px 16px; }
.w-cal-day { color: #ff3b30; font-weight: 700; font-size: .8em; letter-spacing: .04em; margin: 0; }
.w-cal-num { font-size: 2.9em; font-weight: 300; line-height: 1.0; margin: 0; }
.w-cal-ev { color: #8e8e93; font-size: .86em; margin-top: 4px; }
.widget-photos {
    display: flex; flex-direction: column; padding: 10px 12px 10px; box-sizing: border-box;
    background: linear-gradient(160deg, #1c1c1e 0%, #2c2c2e 55%, #3a3a3c 100%);
    color: #f2f2f7;
}
.w-photos-kicker {
    margin: 0 0 8px; font-size: 0.72em; font-weight: 700; letter-spacing: 0.04em;
    color: #ff375f; text-transform: uppercase;
}
.w-photos-grid {
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
    gap: 3px; flex: 1; min-height: 0; border-radius: 10px; overflow: hidden;
}
.w-ph {
    display: block; border-radius: 2px;
    background-color: #3a3a3c;
    background-size: cover;
    background-position: center;
}
.w-ph--a { background-color: #ff9f0a; }
.w-ph--b { background-color: #0a84ff; }
.w-ph--c { background-color: #bf5af2; }
.w-ph--d { background-color: #30d158; }
.w-photos-caption {
    margin: 8px 0 0; font-size: 0.78em; font-weight: 500; color: rgba(242, 242, 247, 0.78);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Grille : première rangée à 272 (235 + 37), icône 62, pas de rangée 98 */
body#ios-18 .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-18 #desktop > a { display: block; width: 62px; height: 62px; }
body#ios-18 #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 16px; width: max-content; height: 28px;
             background: rgba(255,255,255,.30); border-radius: 999px;
             font-size: .88em; color: #fff; backdrop-filter: blur(6px); }

/* Dock : barre ~740→820, icônes 60 */
body#ios-18 #tableau, body#ios-18 #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-18 #tableau > nav > a { display: block; width: 60px; height: 60px; }
body#ios-18 #tableau > nav > a > img { width: 60px; height: 60px; border-radius: 14px; }

/* Widgets — calage sur la GT : jour rouge en tête, « 26 » grand, texte gris, carte claire à gauche */
#widgets .widget-cal { padding: 10px 16px; }
.w-cal-day { font-size: .82em; letter-spacing: .03em; }
.w-cal-num { font-size: 3.1em; font-weight: 300; line-height: .95; margin-top: 2px; }
.w-cal-ev { color: #8e8e93; font-size: .88em; margin-top: 10px; }
#widgets .widget-pale::after { height: 118px; margin: 12px; border-radius: 16px; background: #dfe9d8; }

/* ==== Géométrie recalée sur mesures GT (2026-09-27, 2e passe) ====
   grille : icônes 60, pas colonnes 90 (marge 30), rangées 272/370/468 (pas 98) ;
   dock : barre 738→831 (h 93), largeur 342 centrée ; cartes widgets 26-184 / 206-364, y 77-235. */
body#ios-18 .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-18 .sb-page > a { width: 60px; height: 78px; }
body#ios-18 .sb-page > a > img,
body#ios-18 .sb-cal .cal-face,
body#ios-18 .sb-phone .phone-face { width: 60px; height: 60px; border-radius: 13.5px; }

#widgets { margin: 33px 26px 0; height: 158px; gap: 22px; }
#widgets .widget { border-radius: 20px; }

#recherche { margin: 156px auto 0; background: rgba(255,255,255,.55); color: #fff; }
#recherche span { opacity: .95; }

body#ios-18 #tableau, body#ios-18 #tableau > nav {
    width: 342px; height: 93px; margin: 22px auto 14px; border-radius: 34px;
}
body#ios-18 #tableau > nav > a, body#ios-18 #tableau > nav > a > img { width: 60px; height: 60px; }

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

/* Fond iOS 17 — composition en calques OFFICIELS (comme iOS) :
   « Floating » (calque couleur) au-dessus de « Background Light », blend `screen`.
   Paramètre retenu par balayage mesuré contre la GT (7 variantes, §8.2) : 51,5 % d'écart,
   contre 54,0 % (Background seul) et 76,7 % (Floating 125 % +80). */
body#ios-18 {
    background-color: #4f0219;
    background-image: url('../../../../usr/share/capsuleos/assets/images/vendors/apple/wallpaper/ios-17-floating-1.webp'), url('../../../../usr/share/capsuleos/assets/images/vendors/apple/wallpaper/ios-17-springboard.webp');
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-size: 100% 100%, 100% 100%;
    background-blend-mode: screen, normal;
    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 sans points). */
#sb-points { display: none; justify-content: center; gap: 7px; margin: 8px auto 0; }
#sb-points.is-paging,
#sb-points:focus-within { display: flex; }
#sb-points span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.45); }
#sb-points span.on { background: #fff; }
#sb-points span[role="button"] { cursor: pointer; }

/* Dock tablette : Fichiers + Photos (iPadOS) ; masqués en mode téléphone GT */
html.ios-form-phone .ios-dock-extra { display: none !important; }
html.ios-form-tablet body#ios-18.ios-springboard #tableau {
    width: min(560px, 62%);
}
html.ios-form-tablet body#ios-18 .sb-phone .phone-face,
html.ios-form-tablet body#ios-18 .sb-cal .cal-face {
    width: 76px; height: 76px; border-radius: 18px;
}
html.ios-form-tablet body#ios-18 .sb-phone .phone-face svg { width: 42px; height: 42px; }
html.ios-form-tablet body#ios-18 .widget-photos { padding: 10px 14px; }
html.ios-form-tablet body#ios-18 .w-photos-kicker { font-size: 0.68em; }

/* Toast stub apps (Forme / Watch) — pédagogie « app non fournie » */
.ios-sb-toast {
    position: absolute; left: 50%; bottom: 110px; transform: translateX(-50%);
    z-index: 40; max-width: 280px; padding: 10px 16px;
    border-radius: 14px; background: rgba(28, 28, 30, 0.88); color: #f2f2f7;
    font: 500 13px/1.35 'SF UI', -apple-system, BlinkMacSystemFont, sans-serif;
    text-align: center; backdrop-filter: blur(16px); pointer-events: none;
}
html.ios-form-tablet .ios-sb-toast { bottom: 96px; }

/* ==== Bas d'écran ancré, iPhone (même géométrie que la GT iPhone 13 iOS 18.0 : Recherche y≈688, dock y 738) ====
   En flux, le dock suivait la hauteur de la page : 682 px avec la page GT (8 apps), hors écran avec la page
   d'usine (16 apps, DefaultIconState.plist). Règles reprises d'iOS 17 (§10.12), scopées forme téléphone. */
html.ios-form-phone body#ios-18 #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-18 #recherche { position: absolute; top: calc(100% - 156px); left: 0; right: 0; margin: 0 auto; }
html.ios-form-phone body#ios-18 #sb-points { position: absolute; top: calc(100% - 156px); left: 0; right: 0; margin: 0 auto; z-index: 2; }
html.ios-form-phone body#ios-18 #tableau { position: absolute; top: calc(100% - 106px); left: 50%; margin: 0 0 0 -183px; }
html.ios-form-phone.ios-home-editing body#ios-18 #recherche { visibility: hidden; }