/* Browser edition. The native application is unchanged. */
html.web-app,html.web-app body{width:100%;height:100%;margin:0;background:#f3eefb!important}
html.web-app #root{max-width:none;height:100%}
html.web-app .tuner.standalone{width:min(100%,560px)!important;min-width:0!important;max-width:560px!important;overflow-x:hidden;overflow-y:auto!important}
html.web-app .tuner.standalone .composition{height:auto!important;min-height:var(--available-height,100dvh)!important;gap:8px!important;padding-bottom:110px!important}
html.web-app .tuner.standalone .hero{height:140px!important}
html.web-app .mock-brand{width:300px!important;max-width:86%;left:50%!important;transform:translateX(-50%)}
html.web-app .tuner.standalone .wheel-section{width:min(94%,var(--web-wheel,400px))!important;height:min(90vw,var(--web-wheel,400px))!important;aspect-ratio:1!important;flex:none!important;margin:auto!important}
html.web-app .tuner.standalone .lower-info{margin:0!important}
html.web-app .tuner.standalone.screen-metronome .composition{display:flex!important}
html.web-app .tuner.standalone .persistent-metronome{flex:1;min-height:0}
html.web-app .tuner.standalone.screen-metronome .metro-page{max-height:none!important;margin:0 auto!important}
html.web-app .app-navigation button{min-height:44px}
@media(min-width:900px) and (min-height:650px){html.web-app .tuner.standalone{box-shadow:0 0 80px #4a339218}}
@media(max-height:600px){html.web-app .tuner.standalone .hero{height:125px!important}html.web-app .tuner.standalone .composition{gap:6px!important}}
html.web-app .tuner.standalone.screen-tuner .wheel-section,
html.web-app .tuner.standalone.screen-accordeur .wheel-section{width:var(--web-wheel,350px)!important;height:var(--web-wheel,350px)!important;min-height:var(--web-wheel,350px)!important;max-height:var(--web-wheel,350px)!important}
html.web-app .tuner.standalone.screen-accordeur .composition{overflow:visible!important}
/* Centre le métronome entre l’en-tête et la navigation. */
html.web-app .tuner.standalone.screen-metronome .composition{height:var(--available-height,100dvh)!important;padding-bottom:80px!important;gap:0!important}
html.web-app .tuner.standalone.screen-metronome .persistent-metronome{display:flex;flex:1 0 auto;align-items:center;justify-content:center;width:100%;padding:12px 0;box-sizing:border-box}
html.web-app .tuner.standalone.screen-metronome .metro-page{flex:none;margin:0 auto!important}

html.web-app .tuner.standalone.screen-metronome .metro-page{align-self:center!important;height:auto!important;min-height:0!important}
html.web-app .tuner.standalone.screen-metronome .persistent-metronome{height:auto!important;flex:1 0 auto!important}

/* corrections audit 0.4.0 (F01-F04) */
/* F03 : le sélecteur Jeu 1/2 dépasse de 26 px sous le cor ; on réserve la place, et on le cache dans le métronome. */
html.web-app .tuner.standalone:not(.screen-metronome) .hero{margin-bottom:30px!important}
html.web-app .tuner.standalone.screen-metronome .jeu-sw{display:none!important}
/* F01/F02 : écrans bas (paysage, petits téléphones) : tout reste atteignable en faisant défiler. */
@media(max-height:700px){
  html.web-app .tuner.standalone.screen-metronome .composition{height:auto!important;min-height:var(--available-height,100dvh)!important}
  html.web-app .tuner.standalone.screen-metronome .persistent-metronome{align-items:flex-start!important;flex:0 0 auto!important}
  html.web-app .tuner.standalone .composition{padding-bottom:96px!important}
}
/* F01 : la grille de l'Accordeur/Tuner réserve toujours la place de la roue (sinon elle déborde sur le cadre au-dessus) ; si l'écran est trop bas, on défile. */
html.web-app .tuner.standalone.screen-accordeur .composition,
html.web-app .tuner.standalone.screen-tuner .composition{height:max(var(--available-height,100dvh),calc(430px + var(--web-wheel,300px) * 1.02))!important;overflow:visible!important}
html.web-app .tuner.standalone.screen-metronome .composition{overflow:visible!important}
/* F03 : une rangée de 30 px de plus sous le cor pour le sélecteur Jeu 1/2 (Accordeur). */
html.web-app .tuner.standalone.screen-accordeur .composition{grid-template-rows:184px 34px minmax(0,1fr) 112px 100px!important;height:max(var(--available-height,100dvh),calc(460px + var(--web-wheel,300px) * 1.02))!important}
/* F04 : la pastille BÊTA 0.4.0 passe tout en haut à droite, hors du bandeau « Accorder · La 442,0 ». */
html.native-app.web-app .beta-coin{top:8px!important;right:8px!important}

/* Retest GPT F01 : le mot CENTS remonte dans le cadran, hors de Ré / H9 (Accordeur, site). */
html.web-app .screen-accordeur .cents{top:50%!important}
/* Retest GPT F02 : le métronome n'est plus coupé à aucune hauteur : la page grandit et défile, la navigation fixe ne cache plus Accent / Volume. */
html.web-app .tuner.standalone.screen-metronome .composition{height:auto!important;min-height:var(--available-height,100dvh)!important;padding-bottom:110px!important}
html.web-app .tuner.standalone.screen-metronome .persistent-metronome{height:auto!important;max-height:none!important;overflow:visible!important;flex:1 0 auto!important}
html.web-app .tuner.standalone.screen-metronome .metro-page{max-height:none!important;overflow:visible!important}

/* Retest GPT : sur petit écran la pastille BÊTA ne touche plus le titre (le titre descend de 14 px). */
@media(max-width:430px){html.web-app .mock-brand{translate:0 14px}}