/* Safari garde son verre natif : on prolonge seulement les surfaces de la page.
   Le haut suit l'écran ; le bas suit la surface qui touche la barre d'accueil.
   Ces couleurs servent aussi à theme-color et à la barre d'état native. */
html.lq{
  --browser-top:var(--bg);
  --browser-bottom:#FFFFFF;
  --immersive-top:#6E50F6;
  --immersive-mid:#5538E6;
  --immersive-bottom:#4529CC;
  --immersive-background:linear-gradient(180deg,var(--immersive-top) 0%,var(--immersive-mid) 48%,var(--immersive-bottom) 100%);
}
html.lq:has(:where(body.in-lesson)),
html.lq:has(:where(.lst)),
html.lq:has(:where(.viz.on)){--browser-bottom:var(--bg)}
html.lq:has(:where(.imp-sheet.on)){--browser-bottom:var(--surface)}
html.lq:has(:where(#onboarding.on)),
html.lq:has(:where(#loader:not(.fade-out):not([hidden]):not([style*="display: none"]):not([style*="display:none"]))){
  --browser-top:var(--immersive-top);
  --browser-bottom:var(--immersive-bottom);
}
/* La vidéo « Le métier de data analyst » avant l’accueil de l’onboarding (4 novembre, 3 h 37) : le fond clair de la vidéo, comme
   sur la vitrine ; l’écran de chargement, encore là au tout début, garde son violet. */
html.lq:has(:where(#onboarding.on.ob-video-step)){--browser-top:#F4F2FC;--browser-bottom:#F4F2FC}
html.lq:has(:where(#loader:not(.fade-out):not([hidden]):not([style*="display: none"]):not([style*="display:none"]))){--browser-top:var(--immersive-top);--browser-bottom:var(--immersive-bottom)}
/* Le lecteur reste propriétaire de ses bords pendant son fondu de fermeture. */
html.lq:has(:where(.lv:not(.is-closing))){--browser-top:var(--immersive-top);--browser-bottom:var(--immersive-bottom)}
html.lq:has(:where(.lv.is-fin-end:not(.is-closing))){--browser-top:#4A3BB5;--browser-bottom:#16123A}
html.lq:has(:where(.mu)){--browser-top:#16123A;--browser-bottom:#16123A}

/* Des aplats explicites : Safari récent lit les fonds, les autres navigateurs
   utilisent theme-color. Aucun voile fixe n'est ajouté devant le contenu. */
html.lq{background-color:var(--browser-bottom)}
html.lq body{background-color:var(--browser-top)}
/* Les dégradés atteignent leurs couleurs exactes aux deux extrémités. Les
   décors s'effacent aux bords pour ne pas créer de raccord grille/aplat. */
html.lq .lv{background-color:var(--immersive-top);background-image:var(--immersive-background)}
/* En fermeture, le fond uni du lecteur (que Safari lit pour la zone de l’heure) prend tout de suite la couleur de l’écran d’en
   dessous, au lieu de devenir transparent : sans couleur à lire sur le lecteur, Safari pouvait garder le violet déjà pris jusqu’à
   son retrait (Elisa, 3 novembre, 9 h 01 : « trace violette après avoir quitté le cours »). Rien ne change à l’écran : le dégradé
   du lecteur, opaque, couvre ce fond. */
html.lq .lv.is-closing{background-color:var(--browser-top)}
html #onboarding.ob-vitrine{background:var(--immersive-background)!important}
html.lq #loader{background:var(--immersive-background)!important}
html.lq .lv::before{
  -webkit-mask-image:linear-gradient(transparent,#000 72px,#000 calc(100% - 72px),transparent);
  mask-image:linear-gradient(transparent,#000 72px,#000 calc(100% - 72px),transparent);
}
/* Onboarding (Elisa, 3 novembre, 17 h 32 : « attention aux barres en haut et en bas ») : Safari couvre la zone de l’heure d’un aplat
   uni ; la grille et le halo jaune commençaient juste dessous, déjà presque entiers, d’où une marche plus claire sous la barre. Ils
   n’apparaissent plus qu’après la zone de l’heure, en fondu, et s’effacent avant la barre du bas : sous les deux barres, le fond est
   uni, de la couleur que Safari donne à ses barres. Le halo descend d’autant pour garder sa place dans le coin. */
html #onboarding.ob-vitrine::before{
  -webkit-mask-image:linear-gradient(transparent calc(var(--safe-top,0px) + 6px),#000 calc(var(--safe-top,0px) + 150px),#000 calc(100% - var(--safe-bottom,0px) - 220px),transparent calc(100% - var(--safe-bottom,0px) - 80px));
  mask-image:linear-gradient(transparent calc(var(--safe-top,0px) + 6px),#000 calc(var(--safe-top,0px) + 150px),#000 calc(100% - var(--safe-bottom,0px) - 220px),transparent calc(100% - var(--safe-bottom,0px) - 80px));
}
/* L’écran de chargement, le premier que l’on voit (Elisa, 3 novembre, 22 h 24 : « Regarde la barre ») : sa grille et ses halos (dont
   le halo menthe du coin bas gauche) touchaient les deux bords. Sous la barre d’adresse, Safari ne trouvait pas une couleur unie et
   posait une bande plus claire, au bord net ; en haut, la grille commençait d’un coup sous l’heure. Même fondu que l’onboarding,
   croisé avec le halo en ellipse d’origine (ludique.css) ; l’ouverture de l’appli iOS (.is-intro) n’est pas touchée. */
html.lq #loader:not(.is-intro)::before{
  -webkit-mask-image:linear-gradient(transparent calc(var(--safe-top,0px) + 6px),#000 calc(var(--safe-top,0px) + 150px),#000 calc(100% - var(--safe-bottom,0px) - 220px),transparent calc(100% - var(--safe-bottom,0px) - 80px)),radial-gradient(ellipse 85% 75% at 50% 40%,#000 30%,transparent 92%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(transparent calc(var(--safe-top,0px) + 6px),#000 calc(var(--safe-top,0px) + 150px),#000 calc(100% - var(--safe-bottom,0px) - 220px),transparent calc(100% - var(--safe-bottom,0px) - 80px)),radial-gradient(ellipse 85% 75% at 50% 40%,#000 30%,transparent 92%);
  mask-composite:intersect;
}
html #onboarding.ob-vitrine::after{
  top:calc(var(--safe-top,0px) - 150px);
  -webkit-mask-image:linear-gradient(transparent 156px,#000 310px);
  mask-image:linear-gradient(transparent 156px,#000 310px);
}

/* La lumière des récompenses reste au centre ; leurs bords rejoignent le fond sombre. */
html.lq .mu{
  background-color:#16123A;
  background-image:linear-gradient(180deg,#16123A,transparent 18%,transparent 80%,#16123A),radial-gradient(120% 70% at 50% 22%,#5B47D6 0%,#2E2580 44%,#16123A 100%);
}

/* Safari 26.x : un premier essai étirait html/body à la hauteur physique
   de l'écran (overflow:hidden, min-height, écrans en position absolue).
   Sur iPhone, ce document plus haut que la zone visible décalait le clavier,
   la barre de touches SQL et les feuilles (bande vide en bas, champs masqués).
   On garde uniquement les aplats de couleur : le fond racine peint déjà
   toute la toile derrière le verre de Safari, sans toucher au layout. */
html.safari-glass .lv.is-fin-end{background:radial-gradient(130% 75% at 50% 0%,#4A3BB5 0%,#2A2272 48%,#16123A 100%)}
/* Élément vide : WebKit lit son aplat sans qu'il ne peigne de bande.
   Un élément DOM et une brève variation de hauteur évitent la teinte figée
   d'un pseudo-élément après navigation, retour d'onglet ou interaction.
   https://exsesx.dev/blog/en/safari-26-invisible-tint-sampler */
/* Les repères sont dans la page dès le départ (index.html) : invisibles et sans place ailleurs que dans Safari 26. */
#browser-status-sample,#browser-bottom-sample{display:none}
html.safari-glass #browser-status-sample{
  display:block;position:fixed;inset:0 0 auto;width:100%;height:12px;z-index:2147483647;
  margin:0;padding:0;border:0;outline:0;box-shadow:none;transition:none;
  pointer-events:none;background-color:var(--browser-top);
  background-clip:text;-webkit-background-clip:text;
}
html.safari-glass #browser-bottom-sample{
  display:block;position:fixed;inset:auto 0 0;width:100%;height:12px;z-index:2147483647;
  margin:0;padding:0;border:0;outline:0;box-shadow:none;transition:none;
  pointer-events:none;background-color:var(--browser-bottom);
  background-clip:text;-webkit-background-clip:text;
}
html.safari-glass #onboarding.ob-vitrine .ob-foot{background:transparent!important}